ReactJS - Utilisation de useContext : Guide pour Débutants

Bonjour à tous, développeurs React en herbe ! Aujourd'hui, nous allons plonger dans une des fonctionnalités les plus puissantes de React : le hook useContext. En tant que votre professeur d'informatique du coin, je suis là pour vous guider pas à pas à travers ce concept. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser étape par étape !

Qu'est-ce que le Contexte dans React ?

Avant de nous lancer dans useContext, comprendreons ce qu'est le Contexte dans React. Imaginez que vous organisez un grand dîner de famille. Vous avez une sauce spéciale qui doit être passée autour de la table. Plutôt que de la faire passer de personne en personne (ce qui est comme le perçage de props dans React), ne serait-il pas plus simple de la placer au centre de la table où tout le monde peut y accéder ? C'est essentiellement ce que fait le Contexte dans React - il fournit un moyen de transmettre des données à travers l'arborescence des composants sans avoir à passer des props manuellement à chaque niveau.

Comprendre useContext

Maintenant, useContext est un hook qui nous permet de consommer facilement ce Contexte dans nos composants fonctionnels. C'est comme donner à chaque personne à la table du dîner un moyen direct d'accéder à cette sauce spéciale sans demander aux autres de la passer.

Signature de useContext

Regardons comment nous utilisons useContext :

const value = useContext(MyContext)

Voici ce que signifie chaque partie :

• value : Il s'agit de la valeur actuelle du contexte
• MyContext : Il s'agit de l'objet de contexte (créé avec React.createContext)

C'est aussi simple que cela ! Mais breaktons-le davantage avec un exemple du monde réel.

Utilisation du Contexte via le Hook

Créons un simple commutateur de thème pour notre application. Nous utiliserons le Contexte pour stocker le thème actuel et useContext pour y accéder dans nos composants.

Premièrement, créons notre contexte :

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

Maintenant, créons un composant qui utilise ce contexte :

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
Je suis un bouton de thème {theme} !
</button>
);
}

export default ThemedButton;

Dans cet exemple, useContext(ThemeContext) nous donne la valeur du thème actuel. Nous utilisons cette valeur pour styliser notre bouton.

Voyons maintenant comment nous pouvons fournir ce contexte dans notre application :

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Bienvenue dans notre application à thème !</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Ici, nous enveloppons notre application dans ThemeContext.Provider et définissons la valeur sur "dark". Cela signifie que tout composant à l'intérieur de ce provider peut accéder à cette valeur de thème en utilisant useContext.

Mise à Jour du Contexte

Et si nous voulions permettre aux utilisateurs de basculer les thèmes ? Nous pouvons le faire en mettant à jour notre valeur de contexte. Modifions notre composant App :

// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Bienvenue dans notre application à thème !</h1>
<ThemedButton />
<button onClick={toggleTheme}>Basculer le Thème</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

Maintenant, nous utilisons l'état pour gérer notre thème, et nous avons ajouté un bouton pour le basculer. Lorsque le thème change, tous les composants utilisant useContext(ThemeContext) se re-rendrent automatiquement avec la nouvelle valeur.

Conclusion

Et voilà ! Nous avons couvert les bases de useContext dans React. Reprenons les points principaux :

1. Le Contexte fournit un moyen de transmettre des données à travers l'arborescence des composants sans prop-drilling.
2. useContext est un hook qui permet de consommer facilement le Contexte dans les composants fonctionnels.
3. Pour utiliser useContext, nous devons d'abord créer un Contexte avec React.createContext.
4. Nous pouvons mettre à jour le Contexte en changeant la propriété value du composant Provider.

Souvenez-vous, bien que le Contexte soit puissant, il n'est pas toujours la meilleure solution. Pour des props simples qui n'ont besoin d'être passées que d'un ou deux niveaux, le passage de props régulier est souvent plus clair. Pensez au Contexte comme à cette sauce spéciale au dîner de famille - utilisez-le lorsque vous avez besoin de partager quelque chose à large échelle, mais n'en abusez pas !

J'espère que ce guide vous a aidé à démystifier useContext. Continuez à vous entraîner, et bientôt vous serez un pro du Contexte React ! Bon codage !

Méthode	Description
React.createContext	Crée un objet de Contexte
useContext	Hook pour consommer une valeur de Contexte
<Context.Provider>	Composant pour fournir une valeur de Contexte à ses enfants

Credits: Image by storyset