Aplicação de Filtro de Cores em React

Introdução

Neste projeto, você aprenderá a construir uma aplicação de filtro de cores usando React. A aplicação permitirá que os usuários filtrem uma lista de cores digitando o nome da cor que estão procurando. Este projeto ajudará você a entender como trabalhar com gerenciamento de estado, tratamento de eventos e renderização condicional em React.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar um projeto React e gerenciar dependências
• Como implementar uma funcionalidade de filtragem de cores em tempo real
• Como estilizar a aplicação usando CSS

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Configurar um projeto React e instalar dependências
• Utilizar o gerenciamento de estado em React para filtrar dados
• Lidar com eventos de entrada do usuário e atualizar a interface do usuário (UI) de acordo
• Estilizar uma aplicação React usando CSS

Configurar o Projeto

Nesta etapa, você aprenderá como configurar o projeto e instalar as dependências necessárias.

Abra seu editor de código e navegue até o diretório do projeto.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Em seguida, baixe as dependências usando o comando npm install no terminal, aguarde a conclusão do download das dependências e, em seguida, inicie o projeto usando o comando npm start.

Após o projeto iniciar com sucesso, clique em "Web 8080" para visualizá-lo em seu navegador.

Implementar o Filtro de Cores

Nesta etapa, você implementará a funcionalidade de filtro de cores.

1. Abra o arquivo App.js em seu editor de código.

2. Neste arquivo, importe as dependências necessárias:

   import React, { useState } from "react";

3. Adicione uma variável de estado dentro de const App = () => {} para armazenar a lista de cores filtrada:

   const [filteredList, setFilteredList] = useState(colors);

4. Implemente a função handleOnChange para filtrar a lista de cores com base na entrada do usuário:

   const handleOnChange = (e) => {
     const value = e.target.value;
     if (!value) {
       setFilteredList(colors);
     }
   
     const filtered = colors.filter((c) =>
       c.name.toUpperCase().includes(value.toUpperCase())
     );
     setFilteredList(filtered);
   };

5. Renderize o campo de entrada e a lista de cores filtrada:

   return (
     <div className="app">
       <input
         className="filter-input"
         type="text"
         name="filter"
         placeholder="Enter a colour name to see filtered results"
         onChange={handleOnChange}
       />
       <div className="list">
         {filteredList.map((c) => {
           return (
             <div
               className="list-item"
               key={c.name}
               style={{ backgroundColor: c.hex }}
             >
               {c.name}
             </div>
           );
         })}
       </div>
     </div>
   );

6. O código completo dentro de const App = () => {} é o seguinte:

   const App = () => {
     const [filteredList, setFilteredList] = useState(colors);
   
     const handleOnChange = (e) => {
       const value = e.target.value;
       if (!value) {
         setFilteredList(colors);
       }
   
       const filtered = colors.filter((c) =>
         c.name.toUpperCase().includes(value.toUpperCase())
       );
       setFilteredList(filtered);
     };
   
     return (
       <div className="app">
         <input
           className="filter-input"
           type="text"
           name="filter"
           placeholder="Enter a colour name to see filtered results"
           onChange={handleOnChange}
         />
         <div className="list">
           {filteredList.map((c) => {
             return (
               <div
                 className="list-item"
                 key={c.name}
                 style={{ backgroundColor: c.hex }}
               >
                 {c.name}
               </div>
             );
           })}
         </div>
       </div>
     );
   };

7. Salve o arquivo App.js, e a aplicação agora deve filtrar a lista de cores em tempo real conforme o usuário digita no campo de entrada.

   

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.