Guide de débutant pour ReactJS - Context

Bonjour à tous, futurs développeurs ! Aujourd'hui, nous plongeons dans le merveilleux monde du Context de ReactJS. En tant que votre enseignant informatique de quartier, je suis là pour vous guider à travers ce concept avec la même enthousiasme que j'avais lorsque j'ai appris pour la première fois. Alors, prenez votre boisson favorite, installez-vous confortablement, et partons ensemble dans cette aventure passionnante !

Qu'est-ce que le Context dans React ?

Imaginez que vous êtes à une réunion de famille et que vous voulez partager une histoire drôle avec tout le monde. Plutôt que de chuchoter à chaque personne individuellement, ne serait-il pas génial de pouvoir tout simplement l'annoncer une fois, et que tout le monde puisse l'entendre ? C'est exactement ce que fait le Context dans React !

Le Context offre un moyen de passer des données à travers l'arbre des composants sans avoir à passer des props manuellement à chaque niveau. Il est conçu pour partager des données qui peuvent être considérées comme "globales" pour un arbre de composants React.

Quand utiliser le Context

Avant de plonger plus profondément, comprenons quand utiliser le Context :

1. Lorsque vous avez des données qui doivent être accessibles par de nombreux composants à différents niveaux d'imbrication.
2. Lorsque vous souhaitez éviter le "prop drilling" (passage de props à travers des composants intermédiaires qui n'ont pas besoin des données).

Création et utilisation du Context

Voyons le processus de création et d'utilisation du Context avec quelques exemples de code.

Étape 1 : Création d'un Context

Tout d'abord, nous devons créer un Context. Nous utiliserons la méthode React.createContext() pour cela.

import React from 'react';

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

export default ThemeContext;

Dans cet exemple, nous avons créé un ThemeContext avec une valeur par défaut de 'light'. Cette valeur par défaut est utilisée lorsque un composant n'a pas de Provider correspondant au-dessus de lui dans l'arbre.

Étape 2 : Fournir le Context

Maintenant que nous avons notre Context, nous devons le fournir à notre arbre de composants. Nous faisons cela en utilisant le composant Context.Provider.

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

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

Dans cet exemple, nous enveloppons notre composant Toolbar (et par extension, tous ses enfants) avec ThemeContext.Provider. Nous définissons la valeur sur "dark", qui sera disponible pour tous les composants à l'intérieur de ce Provider.

Étape 3 : Consommer le Context

Maintenant vient la partie amusante - utiliser notre Context ! Il y a deux façons de consommer le Context :

1. Class.contextType
2. Context.Consumer

Regardons les deux :

Utilisation de Class.contextType

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

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>Je suis un bouton thématique !</button>;
}
}

Dans cet exemple, ThemedButton est un composant de classe. Nous avons défini son contextType sur notre ThemeContext. Maintenant, this.context nous donnera accès à la valeur actuelle du context.

Utilisation de Context.Consumer

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>Je suis un bouton thématique !</button>}
</ThemeContext.Consumer>
);
}

Ici, nous utilisons le composant Context.Consumer. Il utilise une propriété de rendu pour passer la valeur actuelle du context à une fonction.

Utilisation de plusieurs Contexts

Parfois, vous pourriez avoir besoin d'utiliser plusieurs contexts. React vous permet d'imbriquer plusieurs Context Providers :

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

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

Et vous pouvez consommer plusieurs contexts comme ceci :

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

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} utilise le thème {theme}
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Mise à jour du Context

Le Context peut également être dynamique. Jetons un œil à un exemple où nous mettons à jour notre thème :

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

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

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Basculer le thème
</button>
</ThemeContext.Provider>
);
}

Dans cet exemple, nous utilisons le hook useState pour gérer notre état de thème. Nous passons à la fois le thème actuel et la fonction setTheme dans notre valeur de context.

Méthodes du Context

Voici un tableau résumant les principales méthodes de Context que nous avons couvertes :

Méthode	Description
React.createContext()	Crée un objet Context
Context.Provider	Fournit une valeur de context aux composants
Class.contextType	Permet aux composants de classe de consommer un seul context
Context.Consumer	Permet aux composants de fonction de s'abonner à un context

Conclusion

Et voilà, les amis ! Nous avons traversé le pays du Context de React, de sa création à sa consommation et même sa mise à jour. Le Context est un outil puissant dans React, vous permettant d'éviter le prop drilling et de gérer efficacement l'état global.

Souvenez-vous, comme pour tout outil, le Context n'est pas toujours la solution optimale. Pour des cas plus simples, les props pourraient toujours être votre meilleur choix. Mais lorsque vous avez besoin de partager des données entre de nombreux composants à différents niveaux, le Context peut devenir votre nouveau meilleur ami.

Continuez à pratiquer, continuez à coder, et surtout, continuez à vous amuser ! Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset