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

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

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

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

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

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

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

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

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.