Basculer entre le mode clair et le mode sombre dans React

Introduction

Dans ce projet, vous allez apprendre à créer une application React qui permet aux utilisateurs de basculer entre le mode clair et le mode sombre. Le projet démontrera l'utilisation de l'API React Context et du hook useContext pour gérer l'état thématique global.

👀 Aperçu

aperçu du projet

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment créer un ThemeContext à l'aide de l'API React Context
Comment utiliser le ThemeContext dans le composant App pour changer le style global de l'application en fonction du thème
Comment utiliser le ThemeContext dans le composant Card pour changer les styles des cartes en fonction du thème
Comment envelopper le composant App avec le ThemeProvider pour rendre le contexte thématique disponible dans toute l'application

🏆 Réalisations

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

Comprendre comment utiliser l'API React Context pour gérer l'état global
Appliquer le hook useContext pour accéder aux valeurs du contexte
Implémenter différents styles en fonction du thème actuel
Basculer le thème et mettre à jour l'état global

Configurer 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.

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

Description des fichiers :

Le répertoire components contient tous les fichiers de composants.
Le répertoire contexts contient le fichier ThemeContext.js qui doit être complété.

Puisque ceci est un projet React, nous devons installer les dépendances en exécutant la commande suivante :

npm install

Après avoir installé les dépendances, suivez ces étapes pour accéder au projet :

Lancez un serveur local en exécutant la commande suivante dans le terminal :

npm start

Ouvrez le serveur web sur le côté droit de l'environnement de codage. Vous verrez l'effet statique tel que montré ci-dessous. Actuellement, cliquer sur le bouton "Mode sombre" n'entraîne aucun changement.

bouton de mode sombre inachevé

Créer le ThemeContext

Dans cette étape, vous allez apprendre à créer le ThemeContext à l'aide de l'API React Context. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le fichier ThemeContext.js situé dans le répertoire src/contexts.
Créez le ThemeContext à l'aide de React.createContext() :
```
export const ThemeContext = React.createContext();
```

Créez le composant ThemeProvider qui va envelopper le composant App et fournir le contexte du thème :

export const ThemeProvider = (props) => {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};

Le composant ThemeProvider initialise l'état theme à "light" et fournit les valeurs theme et setTheme au contexte.

Utiliser le ThemeContext dans le composant App

Dans cette étape, vous allez apprendre à utiliser le ThemeContext dans le composant App pour changer le style global de l'application en fonction du thème.

Ouvrez le fichier src/App.js.
Utilisez le hook useContext pour accéder à la valeur theme du ThemeContext :
```
const { theme } = useContext(ThemeContext);
```
Mettez à jour le JSX du composant App pour appliquer différents styles en fonction de la valeur theme :
```
return (
  <div className={theme === "light" ? "app app-light" : "app app-dark"}>
    <Card></Card>
  </div>
);
```
Les classes app-light et app-dark seront appliquées à l'élément div principal en fonction de la valeur theme.

Utiliser le ThemeContext dans le composant Card

Dans cette étape, vous allez apprendre à utiliser le ThemeContext dans le composant Card pour changer les styles des cartes en fonction du thème.

Ouvrez le fichier src/components/Card.js.

Utilisez le hook useContext pour accéder aux valeurs theme et setTheme du ThemeContext :

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

Implémentez la fonction handleThemeToggle pour basculer le thème :
```
const handleThemeToggle = (e) => {
  setTheme(theme === "light" ? "dark" : "light");
};
```
Cette fonction mettra à jour la valeur theme dans le ThemeContext lorsque le bouton est cliqué.

Envelopper le composant App avec le ThemeProvider

Dans cette étape finale, vous allez apprendre à envelopper le composant App avec le ThemeProvider pour rendre le contexte du thème disponible dans toute l'application.

Ouvrez le fichier src/index.js.
Importez le ThemeProvider à partir du fichier ThemeContext.js :
```
import { ThemeProvider } from "./contexts/ThemeContext";
```

Enveloppez le composant App avec le ThemeProvider dans la fonction ReactDOM.render :

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

Maintenant, le composant App et ses composants enfants peuvent accéder aux valeurs theme et setTheme du ThemeContext à l'aide du hook useContext.

Après avoir terminé le défi, l'effet devrait être le suivant :

theme switch demonstration gif

Félicitations! Vous avez terminé le projet. Vous devriez maintenant être capable de basculer entre le mode clair et le mode sombre en cliquant sur le bouton dans le composant de carte.

Résumé

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