Vi skapar en bloggkälla om planeterna. Vi använder Context för att undvika prop drilling. Appen kommer att bestå av följande komponenter: App, Filter, PlanetList och PlanetItem. För att visualisera deras hierarki, se bilden nedan.

Steg 1

Skapa Context i filen context.js på den översta nivån.

import { createContext } from "react";

const Context = createContext();

export default Context;

Steg 2

Låt hela appen veta att vi använder context. Vi behöver alltså wrappa hela appen med Context.Provider i filen 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;

Steg 3

I detta steg måste vi ange kontextens data (value-prop för Context.Provider-komponenten). Vi börjar med att rendera viss data. Data presenteras som en array av objekt:

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

Vi gör följande:

Importera data från filen data.js

import data from "../data";

Initiera tillståndet för planets som en tom array med hjälp av hooken useState.

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

Använd hooken useEffect för att tilldela den importerade datan till variabeln planets. Detta säkerställer att vi har data att rendera.

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

Skapa variabeln appData, som representerar hela appens data, vilket kommer att vara ett objekt med tillståndet planets.

const appData = { planets };

Tilldela variabeln appData till value-propet för context-provider.

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

Fullständig kod för filen App.jsx efter steg tre.

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;

Steg 4

Vi tittar nu på komponenten PlanetList. Dess syfte är att rendera en specifik markup. Inuti denna markup använder vi komponenten PlanetItem. Det är värt att notera att vi inte skickar några props eller använder context inom denna komponent eftersom det inte finns behov av att arbeta med data på denna nivå.

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

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

export default PlanetList;

Steg 5

I detta steg behöver vi komma åt datan för att rendera information om planeterna. För att göra detta följer vi dessa steg:

Importera Context från filen context.js.

import Context from "../context";

Använd hooken useContext för att hämta planets-data från context.

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

Rendera markupen med hjälp av funktionen map, vilket gör det möjligt att iterera över datamängden i React. Använd destrukturering för att komma åt alla egenskaper för varje planet-objekt.

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

Fullständig kod för filen PlanetItem.jsx efter steg fem.

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;

Fullständig appkod:

Ta dig tid att granska hela projektet och uppmärksamma den övergripande funktionaliteten och strukturen. För närvarande rekommenderas att fokusera på att förstå hur data skickas och renderas i de olika komponenterna. Notera hur data hämtas och används i barnkomponenterna, med undantag för Filter-komponenten. Filter-komponenten kommer att vara en utmaning i nästa kapitel, så du kan ytterligare förbättra appens funktionalitet.