Skip to content

Latest commit

 

History

History
24 lines (14 loc) · 1.84 KB

8.FilterExercicios.md

File metadata and controls

24 lines (14 loc) · 1.84 KB
Raw

Exercício sobre o Método filter no React 🚀🔍

Instruções 📝

  1. Crie um novo projeto React 🚀 utilizando o comando npm create vite@latest para iniciar um novo projeto. Siga os passos apresentados no terminal para configurar seu ambiente React.

  2. Prática com o Método filter no App.js 🌐:

    • Dentro do componente App, crie um array de objetos chamado produtos, onde cada objeto deve ter as propriedades nome, categoria e preco. Exemplo: [{ nome: 'Notebook', categoria: 'Eletrônicos', preco: 2500 }, { nome: 'Livro', categoria: 'Literatura', preco: 40 }].

  3. Filtrar Produtos por Faixa de Preço 💰:

    • Adicione uma funcionalidade para filtrar os produtos por uma faixa de preço especificada, por exemplo, produtos que tenham preço menor que 1000.
    • Exiba esta lista filtrada em sua interface.

  4. Pratique a Estilização com Styled-Components 💅:

    • Continuando com a instalação do pacote styled-components, crie componentes estilizados para exibir sua lista de produtos filtrados. Por exemplo, crie um StyledProductList para a lista e StyledProductItem para cada produto na lista.
    • Aplique estilos para diferenciar produtos de categorias diferentes ou produtos dentro e fora da faixa de preço especificada, utilizando cores, fontes e efeitos.

A habilidade de filtrar dados com eficiência é crucial para o desenvolvimento de aplicações web modernas, oferecendo aos usuários a capacidade de navegar facilmente por grandes conjuntos de dados. 🛠️

Pratique, explore e não hesite em ser criativo! A prática constante é essencial para dominar o uso de filter e styled-components no React. 🎨👨‍💻

Quer feedback? Compartilhe seu exercício concluído na área de comentários da matéria da aula no Classroom ou em fóruns de discussão de programação. 🏫