Opret en blogkilde om planeterne. Context anvendes for at undgå prop drilling. Applikationen består af følgende komponenter: App, Filter, PlanetList og PlanetItem. For at visualisere deres hierarki, henvises til billedet nedenfor.

Trin 1

Opret Context i filen context.js på øverste niveau.

import { createContext } from "react";

const Context = createContext();

export default Context;

Trin 2

Gør hele applikationen opmærksom på, at context anvendes. Hele applikationen skal derfor omvikles 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;

Trin 3

På dette trin skal vi angive kontekstens data (value-prop for Context.Provider-komponenten). Lad os begynde med at gengive nogle data. Dataene præsenteres som et array af objekter:

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

Fremgangsmåden er som følger:

Importer data fra data.js-filen

import data from "../data";

Initialiser state for planets som et tomt array ved brug af useState-hooket.

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

Brug useEffect-hooket til at tildele de importerede data til variablen planets. Dette sikrer, at vi har data at gengive.

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

Opret variablen appData, som repræsenterer hele appens data, og som vil være et objekt med planets state.

const appData = { planets };

Tildel variablen appData til value-proppen på context-provider.

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

Fuld kode for App.jsx-filen efter trin 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;

Trin 4

Lad os se nærmere på PlanetList-komponenten. Formålet med denne komponent er at gengive en specifik markup. Inden i denne markup anvender vi PlanetItem-komponenten. Det er værd at bemærke, at vi hverken sender props eller bruger context i denne komponent, da der ikke er behov for at arbejde med data på dette niveau.

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

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

export default PlanetList;

Trin 5

I dette trin skal vi tilgå dataene for at kunne gengive information om planeterne. For at gøre dette følger vi disse trin:

Importer Context fra context.js-filen.

import Context from "../context";

Brug useContext-hooket til at hente planets-dataene fra context.

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

Gengiv markup ved hjælp af map-funktionen, som gør det muligt at iterere over datasættet i React. Anvend destrukturering for at tilgå alle egenskaberne for hvert 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>
      )
    )}
  </>
);

Fuld kode for PlanetItem.jsx-filen efter trin 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;

Fuld app-kode:

Gennemgå venligst hele projektet og læg mærke til den overordnede funktionalitet og struktur. Det anbefales i første omgang at fokusere på at forstå, hvordan data videregives og gengives i de forskellige komponenter. Bemærk, hvordan data hentes og anvendes i underkomponenterne, undtagen Filter-komponenten. Filter-komponenten vil være en udfordring i næste kapitel, så du kan yderligere forbedre appens funktionalitet.