Wechsel zwischen Hell- und Dunkelmodus in React

Einführung

In diesem Projekt lernst du, wie du eine React-Anwendung erstellst, die es Benutzern ermöglicht, zwischen Licht- und Dunkelmodus umzuschalten. Das Projekt zeigt die Verwendung der React Context API und des useContext-Hooks, um den globalen Thementzustand zu verwalten.

👀 Vorschau

Projektvorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du einen ThemeContext mithilfe der React Context API erstellst
Wie du den ThemeContext im App-Komponenten verwendest, um den gesamten Anwendungsstil basierend auf dem Thema zu ändern
Wie du den ThemeContext im Card-Komponenten verwendest, um die Kartenstile basierend auf dem Thema zu ändern
Wie du die App-Komponente mit dem ThemeProvider umschließt, um den Themenkontext für die gesamte Anwendung verfügbar zu machen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Zu verstehen, wie die React Context API verwendet wird, um den globalen Zustand zu verwalten
Den useContext-Hook anzuwenden, um auf die Kontextwerte zuzugreifen
Unterschiedliche Stile basierend auf dem aktuellen Thema zu implementieren
Den Thema umzuschalten und den globalen Zustand zu aktualisieren

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.

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

Dateibeschreibungen:

Das components-Verzeichnis enthält alle Komponentendateien.
Das contexts-Verzeichnis enthält die Datei ThemeContext.js, die abgeschlossen werden muss.

Da es sich um ein React-Projekt handelt, müssen wir die Abhängigkeiten installieren, indem wir folgenden Befehl ausführen:

npm install

Nachdem die Abhängigkeiten installiert wurden, folge diesen Schritten, um auf das Projekt zuzugreifen:

Starte einen lokalen Server, indem du folgenden Befehl in der Konsole ausführst:

npm start

Öffne den Webserver auf der rechten Seite der Codierumgebung. Du wirst den statischen Effekt wie unten gezeigt sehen. Derzeit hat das Klicken auf die Schaltfläche "Dunkler Modus" keine Auswirkungen.

unvollständige Dunkler-Modus-Schaltfläche

ThemeContext erstellen

In diesem Schritt lernst du, wie du den ThemeContext mithilfe der React Context API erstellst. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei ThemeContext.js im Verzeichnis src/contexts.

Erstelle den ThemeContext mit React.createContext():

export const ThemeContext = React.createContext();

Erstelle den ThemeProvider-Komponenten, der die App-Komponente umschließt und den Themenkontext bereitstellt:
```
export const ThemeProvider = (props) => {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};
```
Die ThemeProvider-Komponente initialisiert den theme-Zustand mit "light" und stellt die theme- und setTheme-Werte dem Kontext zur Verfügung.

ThemeContext in der App-Komponente verwenden

In diesem Schritt lernst du, wie du den ThemeContext in der App-Komponente verwendest, um den gesamten Anwendungsstil basierend auf dem Thema zu ändern.

Öffne die Datei src/App.js.
Verwende den useContext-Hook, um den theme-Wert aus dem ThemeContext zu erhalten:
```
const { theme } = useContext(ThemeContext);
```
Aktualisiere die JSX der App-Komponente, um unterschiedliche Stile basierend auf dem theme-Wert anzuwenden:
```
return (
  <div className={theme === "light" ? "app app-light" : "app app-dark"}>
    <Card></Card>
  </div>
);
```
Die Klassen app-light und app-dark werden basierend auf dem theme-Wert auf das Haupt-div-Element angewendet.

ThemeContext in der Card-Komponente verwenden

In diesem Schritt lernst du, wie du den ThemeContext in der Card-Komponente verwendest, um die Kartenstile basierend auf dem Thema zu ändern.

Öffne die Datei src/components/Card.js.

Verwende den useContext-Hook, um die theme- und setTheme-Werte aus dem ThemeContext zu erhalten:

export const Card = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  //...
};

Implementiere die handleThemeToggle-Funktion, um das Thema umzuschalten:
```
const handleThemeToggle = (e) => {
  setTheme(theme === "light" ? "dark" : "light");
};
```
Diese Funktion wird den theme-Wert im ThemeContext aktualisieren, wenn die Schaltfläche geklickt wird.

Verhülle die App-Komponente mit dem ThemeProvider

In diesem letzten Schritt lernst du, wie du die App-Komponente mit dem ThemeProvider umhüllst, um den Themenkontext für die gesamte Anwendung verfügbar zu machen.

Öffne die Datei src/index.js.

Importiere den ThemeProvider aus der Datei ThemeContext.js:

import { ThemeProvider } from "./contexts/ThemeContext";

Umhülle die App-Komponente mit dem ThemeProvider in der ReactDOM.render-Funktion:

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Jetzt können die App-Komponente und ihre Kindkomponenten den theme- und setTheme-Werte aus dem ThemeContext mithilfe des useContext-Hooks zugreifen.

Nachdem du die Herausforderung abgeschlossen hast, sollte das Ergebnis wie folgt aussehen:

theme switch demonstration gif

Herzlichen Glückwunsch! Du hast das Projekt abgeschlossen. Du solltest jetzt in der Lage sein, zwischen Licht- und Dunkelmodus zu schalten, indem du die Schaltfläche in der Kartenkomponente klickst.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.

Wechsel zwischen Hell und Dunkel