Erstellung einer Blogquelle über die Planeten. Verwendung von Context, um Prop-Drilling zu vermeiden. Die App besteht aus den folgenden Komponenten: App, Filter, PlanetList und PlanetItem. Zur Veranschaulichung der Hierarchie siehe das untenstehende Bild.

Schritt 1

Erstellung des Context in der Datei context.js auf oberster Ebene.

import { createContext } from "react";

const Context = createContext();

export default Context;

Schritt 2

Bekanntmachung der Verwendung von Context in der gesamten App. Dazu muss die gesamte App mit dem Context.Provider in der Datei App.jsx umschlossen werden.

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;

Schritt 3

In diesem Schritt müssen wir die Daten des Contexts festlegen (das value-Prop für die Context.Provider-Komponente). Beginnen wir damit, einige Daten darzustellen. Die Daten werden in Form eines Arrays von Objekten präsentiert:

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",
  },
... 
  {...}
];

Folgendes werden wir tun:

Importieren der Daten aus der Datei data.js

import data from "../data";

Initialisieren des States für planets als leeres Array mit dem useState-Hook.

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

Verwendung des useEffect-Hooks, um die importierten Daten der Variable planets zuzuweisen. Dies stellt sicher, dass Daten zum Rendern vorhanden sind.

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

Erstellen der Variable appData, die die gesamten App-Daten repräsentiert und ein Objekt mit dem State planets ist.

const appData = { planets };

Zuweisen der Variable appData zum value-Prop des Context Providers.

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

Vollständiger Code der Datei App.jsx nach Schritt drei.

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;

Schritt 4

Betrachten wir die Komponente PlanetList. Ihr Zweck ist das Rendern eines bestimmten Markups. Innerhalb dieses Markups verwenden wir die Komponente PlanetItem. Es ist zu beachten, dass in dieser Komponente weder Props übergeben noch Context verwendet werden, da auf dieser Ebene keine Arbeit mit Daten erforderlich ist.

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

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

export default PlanetList;

Schritt 5

In diesem Schritt müssen wir auf die Daten zugreifen, um die Informationen über die Planeten darzustellen. Dazu gehen wir wie folgt vor:

Importieren des Context aus der Datei context.js.

import Context from "../context";

Verwendung des useContext-Hooks, um die planets-Daten aus dem Context abzurufen.

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

Rendern des Markups mit der map-Funktion, die es ermöglicht, über die Datenmenge in React zu iterieren. Destrukturierung wird angewendet, um auf alle Eigenschaften jedes Planetenobjekts zuzugreifen.

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>
      )
    )}
  </>
);

Vollständiger Code der Datei PlanetItem.jsx nach Schritt fünf.

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;

Vollständiger App-Code:

Bitte nehmen Sie sich einen Moment Zeit, um das gesamte Projekt zu überprüfen und achten Sie dabei auf die Gesamtfunktionalität und Struktur. Es wird empfohlen, sich zunächst darauf zu konzentrieren, wie die Daten in den verschiedenen Komponenten übergeben und gerendert werden. Beachten Sie, wie die Daten abgerufen und in den Kindkomponenten verwendet werden, mit Ausnahme der Filter-Komponente. Die Filter-Komponente wird in dem nächsten Kapitel eine Herausforderung darstellen, sodass Sie die Funktionalität der App weiter verbessern können.