Aplicación de filtro de colores con React

Introducción

En este proyecto, aprenderás a crear una aplicación de filtro de colores utilizando React. La aplicación permitirá a los usuarios filtrar una lista de colores escribiendo el nombre del color que buscan. Este proyecto te ayudará a entender cómo trabajar con la gestión de estado, el manejo de eventos y la renderización condicional en React.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar un proyecto de React y administrar las dependencias
• Cómo implementar una funcionalidad de filtrado de colores en tiempo real
• Cómo dar estilo a la aplicación utilizando CSS

🏆 Logros

Después de completar este proyecto, podrás:

• Configurar un proyecto de React e instalar las dependencias
• Utilizar la gestión de estado en React para filtrar datos
• Manejar los eventos de entrada del usuario y actualizar la interfaz de usuario en consecuencia
• Dar estilo a una aplicación de React utilizando CSS

Configurar el proyecto

En este paso, aprenderás a configurar el proyecto e instalar las dependencias necesarias.

Abre tu editor de código y navega hasta el directorio del proyecto.

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

A continuación, descarga las dependencias utilizando el comando npm install en la terminal, espera a que las dependencias terminen de descargarse y luego inicia el proyecto utilizando el comando npm start.

Una vez que el proyecto se inicia correctamente, haz clic en "Web 8080" para visualizarlo en tu navegador.

Implementar el filtro de colores

En este paso, implementarás la funcionalidad de filtro de colores.

1. Abre el archivo App.js en tu editor de código.

2. En este archivo, importa las dependencias necesarias:

   import React, { useState } from "react";

3. Agrega una variable de estado dentro de const App = () => {} para almacenar la lista filtrada de colores:

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

4. Implementa la función handleOnChange para filtrar la lista de colores según la entrada del usuario:

   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. Renderiza el campo de entrada y la lista filtrada de colores:

   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. El código completo dentro de const App = () => {} es el siguiente:

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. Guarda el archivo App.js, y la aplicación ahora debería filtrar la lista de colores en tiempo real a medida que el usuario escribe en el campo de entrada.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.