Erstelle eine Farbfilter-App mit React

Einführung

In diesem Projekt lernst du, wie du eine Farbfilteranwendung mit React aufbaust. Die Anwendung wird Benutzern ermöglichen, eine Liste von Farben nach dem Namen der Farbe zu filtern, nach der sie suchen. Dieses Projekt hilft dir zu verstehen, wie du mit Zustandsverwaltung, Ereignisbehandlung und bedingtem Rendern in React umgehst.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du ein React-Projekt einrichtest und Abhängigkeiten verwaltest
Wie du eine Echtzeit-Farbfilterfunktionalität implementierst
Wie du die Anwendung mit CSS gestylst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Ein React-Projekt einzurichten und Abhängigkeiten zu installieren
Die Zustandsverwaltung in React nutzen, um Daten zu filtern
Benutzereingabeereignisse zu behandeln und die Benutzeroberfläche entsprechend zu aktualisieren
Eine React-Anwendung mit CSS zu stylen

Projekt einrichten

In diesem Schritt lernst du, wie du das Projekt einrichtest und die erforderlichen Abhängigkeiten installierst.

Öffne deinen Code-Editor und navigiere zum Projektverzeichnis.

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

Als nächstes lade die Abhängigkeiten mit dem Befehl npm install im Terminal herunter, warte, bis die Abhängigkeiten heruntergeladen sind, und starte dann das Projekt mit dem Befehl npm start.

Sobald das Projekt erfolgreich gestartet ist, klicke auf "Web 8080", um es in deinem Browser anzuschauen.

✨ Lösung prüfen und üben

Farbfilter implementieren

In diesem Schritt wirst du die Farbfilterfunktionalität implementieren.

Öffne die Datei App.js in deinem Code-Editor.
Importiere in dieser Datei die erforderlichen Abhängigkeiten:
```
import React, { useState } from "react";
```
Füge eine Zustandsvariable innerhalb von const App = () => {} hinzu, um die gefilterte Liste von Farben zu speichern:
```
const [filteredList, setFilteredList] = useState(colors);
```

Implementiere die Funktion handleOnChange, um die Farbliste basierend auf der Benutzereingabe zu filtern:

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);
};

Rendere das Eingabefeld und die gefilterte Liste von Farben:

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>
);

Der vollständige Code innerhalb von const App = () => {} lautet wie folgt:

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>
  );
};

Speichere die Datei App.js. Die Anwendung sollte jetzt die Farbliste in Echtzeit filtern, wenn der Benutzer im Eingabefeld tippt.