Contexte en Pratique

Créons une source de blog sur les planètes. Nous utiliserons Context pour éviter le passage de props. L'application se composera des composants suivants : App, Filter, PlanetList et PlanetItem. Pour visualiser leur hiérarchie, veuillez vous référer à l'image ci-dessous.

Étape 1

Créez le Context dans le fichier context.js au niveau supérieur.

Étape 2

Informez l'ensemble de l'application que nous utilisons le contexte. Donc, nous devons envelopper toute l'application avec le Context.Provider dans le fichier App.jsx.

Étape 3

À cette étape, nous devons définir les données du contexte (prop value pour le composant Context.Provider). Commençons par rendre quelques données. Les données sont présentées sous la forme d'un tableau d'objets :

Voici ce que nous allons faire :

Importer les données du fichier data.js

Initialiser l'état pour les planets comme un tableau vide en utilisant le hook useState.

Utiliser le hook useEffect pour assigner les données importées à la variable planets. Cela garantit que nous avons des données à rendre.

Créer la variable appData, représentant toutes les données de l'application, qui sera un objet avec l'état planets.

Assigner la variable appData à la prop value du fournisseur de contexte.

Code complet du fichier App.jsx après l'étape trois.

Étape 4

Jetons un coup d'œil au composant PlanetList. Son but est de rendre un balisage spécifique. À l'intérieur de ce balisage, nous utilisons le composant PlanetItem. Il est à noter que nous ne passons aucun prop ni n'utilisons le contexte dans ce composant car il n'est pas nécessaire de travailler avec des données à ce niveau.

Étape 5

Dans cette étape, nous devons accéder aux données afin de rendre les informations sur les planètes. Pour ce faire, nous allons suivre ces étapes :

Importer le Context du fichier context.js.

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

Rendre le balisage en utilisant la fonction map, qui nous 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.

Code complet du fichier PlanetItem.jsx après l'étape cinq.

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 suggéré de se concentrer sur la compréhension de la manière dont les données sont transmises et rendues dans les différents composants. Notez comment les données sont obtenues et utilisées dans les composants enfants, à l'exclusion du composant Filter. Le composant Filter sera un défi dans le prochain chapitre, vous pourrez donc améliorer davantage la fonctionnalité de l'application.