Application de filtre de couleurs React

JavaScriptJavaScriptBeginner
Pratiquer maintenant

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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

aperçu du projet

🎯 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>
  );
};
  1. 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.
aperçu du projet
✨ Vérifier la solution et pratiquer

Résumé

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