Création d'une source de blog sur les planètes. Utilisation du Context pour éviter le passage de props en cascade. L'application se compose des composants suivants : App, Filter, PlanetList et PlanetItem. Pour visualiser leur hiérarchie, veuillez consulter l'image ci-dessous.

Étape 1

Créer le Context dans le fichier context.js à la racine du projet.

import { createContext } from "react";

const Context = createContext();

export default Context;

Étape 2

Informer l'ensemble de l'application de l'utilisation du context. Il est donc nécessaire d'englober toute l'application avec le Context.Provider dans le fichier App.jsx.

import React from "react";
import Context from "../context";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";

const App = () => {
  return (
    <Context.Provider>
      <div>
        <Filter />
        <PlanetList />
      </div>
    </Context.Provider>
  );
};

export default App;

Étape 3

À cette étape, il est nécessaire de définir les données du contexte (propriété value pour le composant Context.Provider). Commençons par afficher certaines données. Les données sont présentées sous la forme d'un tableau d'objets :

const planetData = [
  {
    id: "3a6d44da-bbe2-4ac2-a622-7ca5f321b71c",
    name: "Mercury",
    weight: "3.3011 × 10^23 kg",
    size: "4,879 km",
    distanceFromSun: "57.9 million km",
    material: "Rocky",
    image:
      "https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-hooks-%26-context/mercury.png",
    existenceYears: "4.5 billion years",
  },
... 
  {...}
];

Voici les étapes à suivre :

Importer les données depuis le fichier data.js

import data from "../data";

Initialiser l'état pour planets comme un tableau vide à l'aide du hook useState.

import React, { useState } from "react";
// ...
const [planets, setPlanets] = useState([]);

Utiliser le hook useEffect pour affecter les données importées à la variable planets. Cela garantit que des données sont disponibles pour l'affichage.

import React, { useState, useEffect } from "react";
// ...
  useEffect(() => {
    setPlanets(data);
  }, []);

Créer la variable appData, représentant l'ensemble des données de l'application, qui sera un objet contenant l'état planets.

const appData = { planets };

Affecter la variable appData à la propriété value du provider de contexte.

return (
  <Context.Provider value={appData}>
    <div>
      <Filter />
      <PlanetList />
    </div>
  </Context.Provider>
);

Code complet du fichier App.jsx après la troisième étape.

import React, { useEffect, useState } from "react";
import Context from "../context";
import data from "../data";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";

const App = () => {
  const [planets, setPlanets] = useState([]);

  useEffect(() => {
    setPlanets(data);
  }, []);

  const appData = { planets };

  return (
    <Context.Provider value={appData}>
      <div>
        <Filter />
        <PlanetList />
      </div>
    </Context.Provider>
  );
};

export default App;

Étape 4

Examinons le composant PlanetList. Son objectif est de générer une structure de balisage spécifique. À l'intérieur de cette structure, le composant PlanetItem est utilisé. Il convient de noter qu'aucune propriété n'est transmise et que le contexte n'est pas utilisé dans ce composant, car il n'est pas nécessaire de manipuler les données à ce niveau.

import React from "react";
import PlanetItem from "../PlanetItem/PlanetItem";

const PlanetList = () => {
  return (
    <ul>
      <PlanetItem />
    </ul>
  );
};

export default PlanetList;

Étape 5

À cette étape, il est nécessaire d'accéder aux données afin d'afficher les informations concernant les planètes. Pour cela, suivre les étapes suivantes :

Importer le Context depuis le fichier context.js.

import Context from "../context";

Utiliser le hook useContext pour récupérer les données planets depuis le contexte.

import React, { useContext } from "react";
// ...
const { planets } = useContext(Context);

Générer la structure de balisage à l'aide de la fonction map, qui permet d'itérer sur l'ensemble de données dans React. Appliquer la déstructuration pour accéder à toutes les propriétés de chaque objet planète.

return (
  <>
    {planets.map(
      ({
        id,
        name,
        weight,
        size,
        distanceFromSun,
        material,
        image,
        existenceYears,
      }) => (
        <li key={id}>
          <img src={image} alt={name} width={160} />
          <div>
            <h3>{name}</h3>
            <p>
              Weight: <span>{weight}</span>
            </p>
            <p>
              Size: <span>{size}</span>
            </p>
            <p>
              Distance form Sun: <span>{distanceFromSun}</span>
            </p>
            <p>
              Material: <span>{material}</span>
            </p>
            <p>
              Old: <span>{existenceYears}</span>
            </p>
          </div>
        </li>
      )
    )}
  </>
);

Code complet du fichier PlanetItem.jsx après la cinquième étape.

import React, { useContext } from "react";
import Context from "../context";

const PlanetItem = () => {
  const { planets } = useContext(Context);

  return (
    <>
      {planets.map(
        ({
          id,
          name,
          weight,
          size,
          distanceFromSun,
          material,
          image,
          existenceYears,
        }) => (
          <li key={id}>
            <img src={image} alt={name} width={160} />
            <div>
              <h3>{name}</h3>
              <p>
                Weight: <span>{weight}</span>
              </p>
              <p>
                Size: <span>{size}</span>
              </p>
              <p>
                Distance form Sun: <span>{distanceFromSun}</span>
              </p>
              <p>
                Material: <span>{material}</span>
              </p>
              <p>
                Old: <span>{existenceYears}</span>
              </p>
            </div>
          </li>
        )
      )}
    </>
  );
};

export default PlanetItem;

Code complet de l'application :

Veuillez prendre un moment pour examiner l'ensemble du projet, en prêtant attention à la fonctionnalité globale et à la structure. Pour l'instant, il est conseillé de se concentrer sur la compréhension de la manière dont les données sont transmises et affichées dans les différents composants. Notez comment les données sont obtenues et utilisées dans les composants enfants, à l'exception du composant Filter. Le composant Filter constituera un défi dans le prochain chapitre, ce qui vous permettra d'améliorer davantage la fonctionnalité de l'application.