Contexte

Contexte dans React est une fonctionnalité puissante qui permet le partage de données entre les composants sans avoir besoin de passer explicitement des props à chaque niveau de l'arborescence des composants. En utilisant le Contexte, nous pouvons propager des données dans la hiérarchie des composants, les rendant facilement accessibles à tout composant, quel que soit sa position dans l'arborescence.

Remarque

Pour commencer, plongeons dans la syntaxe. Nous fournirons un guide étape par étape, en veillant à ce que vous compreniez chaque concept en cours de route. Appliquer le contexte exige une implémentation de code spécifique à divers niveaux de composants. Une fois que nous aurons couvert la syntaxe en détail, nous plongerons dans un exemple pratique.

Syntaxe :

1ère étape : Nous créons un nouveau Contexte en utilisant la fonction createContext() de la bibliothèque React et l'assignons à une variable. Nous devrions le faire au niveau supérieur de l'application. Typiquement, nous le faisons dans un fichier séparé (par exemple, context.js). Il sera responsable de l'objet Contexte.

context.js

2ème étape : Dans le fichier App, nous enveloppons tous les composants qui ont besoin d'accéder aux données partagées avec le composant Provider du Context créé. Le composant Provider nous permet de définir la valeur du contexte et de la rendre disponible à tous les composants enfants qui consomment ce contexte.

App.jsx

3ème étape : Dans le fichier App, nous devons également fournir les données du contexte. Nous y parvenons en utilisant la prop value pour le composant Context.Provider. Nous assignons toutes les données requises à la prop value.

App.jsx

4ème étape : Dans les composants enfants (ChildCompOne ou ChildCompTwo), nous pouvons accéder aux données partagées en utilisant le hook useContext. Pour utiliser le hook useContext, nous devons passer le Context créé depuis le fichier context.js comme argument.

ChildCompOne.jsx

Code complet de l'application :

Remarque

Veuillez prendre un moment pour examiner chaque étape, en ouvrant chaque fichier et dossier, afin de vous assurer que vous comprenez bien le processus. Le prochain chapitre continuera avec un exemple combinant Context et hooks. Cela vous permettra de voir comment ces concepts fonctionnent ensemble en pratique.