Application de filtre de couleurs React

Introduction

Dans ce projet, vous allez apprendre à construire une application de filtre de couleurs à l'aide de React. L'application permettra aux utilisateurs de filtrer une liste de couleurs en tapant le nom de la couleur qu'ils cherchent. Ce projet vous aidera à comprendre comment travailler avec la gestion d'état, la gestion des événements et le rendu conditionnel en React.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer un projet React et gérer les dépendances
• Comment implémenter une fonctionnalité de filtrage de couleurs en temps réel
• Comment styler l'application à l'aide de CSS

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Configurer un projet React et installer les dépendances
• Utiliser la gestion d'état en React pour filtrer des données
• Gérer les événements d'entrée utilisateur et mettre à jour l'interface utilisateur en conséquence
• Styler une application React à l'aide de CSS

Configurez le projet

Dans cette étape, vous allez apprendre à configurer le projet et à installer les dépendances nécessaires.

Ouvrez votre éditeur de code et accédez au répertoire du projet.

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

Ensuite, téléchargez les dépendances à l'aide de la commande npm install dans le terminal, attendez que les dépendances aient fini de se télécharger puis lancez le projet à l'aide de la commande npm start.

Une fois le projet démarré avec succès, cliquez sur "Web 8080" pour le prévisualiser dans votre navigateur.

Implémentez le filtre de couleurs

Dans cette étape, vous allez implémenter la fonctionnalité de filtre de couleurs.

1. Ouvrez le fichier App.js dans votre éditeur de code.

2. Dans ce fichier, importez les dépendances nécessaires :

   import React, { useState } from "react";

3. Ajoutez une variable d'état à l'intérieur de const App = () => {} pour stocker la liste filtrée de couleurs :

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

4. Implémentez la fonction handleOnChange pour filtrer la liste de couleurs en fonction de l'entrée de l'utilisateur :

   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. Affichez le champ d'entrée et la liste filtrée de couleurs :

   return (
     <div className="app">
       <input
         className="filter-input"
         type="text"
         name="filter"
         placeholder="Entrez le nom d'une couleur pour voir les résultats filtrés"
         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. Le code complet à l'intérieur de const App = () => {} est le suivant :

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="Entrez le nom d'une couleur pour voir les résultats filtrés"
        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. Enregistrez le fichier App.js, et l'application devrait maintenant filtrer la liste de couleurs en temps réel à mesure que l'utilisateur tape dans le champ d'entrée.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.