Luodaan blogilähde planeetoista. Käytämme Context-ominaisuutta välttääksemme propien porautumisen. Sovellus koostuu seuraavista komponenteista: App, Filter, PlanetList ja PlanetItem. Komponenttien hierarkian havainnollistamiseksi katso alla olevaa kuvaa.

Vaihe 1

Luo Context tiedostoon context.js ylimmälle tasolle.

import { createContext } from "react";

const Context = createContext();

export default Context;

Vaihe 2

Ilmoita koko sovellukselle, että käytetään contextia. Kääri siis koko sovellus Context.Provider-komponenttiin tiedostossa 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;

Vaihe 3

Tässä vaiheessa tulee asettaa kontekstin data (value-prop Context.Provider-komponentille). Aloitetaan renderöimällä dataa. Data esitetään taulukkona olioita:

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

Toimi seuraavasti:

Tuo data data.js-tiedostosta

import data from "../data";

Alusta tila planets tyhjänä taulukkona käyttäen useState-hookia.

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

Käytä useEffect-hookia asettaaksesi tuotu data planets-muuttujaan. Tämä varmistaa, että renderöitävää dataa on saatavilla.

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

Luo muuttuja appData, joka edustaa koko sovelluksen dataa ja sisältää planets-tilan oliona.

const appData = { planets };

Aseta appData-muuttuja kontekstin tarjoajan value-propiksi.

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

App.jsx-tiedoston koko koodi vaiheen kolme jälkeen.

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;

Vaihe 4

Tarkastellaan PlanetList-komponenttia. Sen tarkoitus on renderöidä tietty rakenne. Tämän rakenteen sisällä käytetään PlanetItem-komponenttia. On huomioitava, ettei tälle komponentille välitetä propseja eikä käytetä kontekstia, koska datan käsittelyä ei tarvita tällä tasolla.

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

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

export default PlanetList;

Vaihe 5

Tässä vaiheessa täytyy hakea data, jotta planeettojen tiedot voidaan renderöidä. Toimi seuraavasti:

Tuo Context context.js-tiedostosta.

import Context from "../context";

Käytä useContext-hookia hakeaksesi planets-datan kontekstista.

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

Renderöi rakenne käyttäen map-funktiota, jonka avulla voidaan käydä läpi datataulukko Reactissa. Käytä destrukturointia, jotta jokaisen planeetta-olion kaikki ominaisuudet ovat helposti käytettävissä.

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

PlanetItem.jsx-tiedoston koko koodi vaiheen viisi jälkeen.

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;

Koko sovelluksen koodi:

Tutustu koko projektiin ja kiinnitä huomiota sen yleiseen toiminnallisuuteen ja rakenteeseen. Tällä hetkellä suositellaan keskittymään siihen, miten data välitetään ja renderöidään eri komponenteissa. Huomioi, miten data haetaan ja hyödynnetään lapsikomponenteissa, pois lukien Filter-komponentti. Filter-komponentti on seuraavan luvun haasteena, joten voit myöhemmin laajentaa sovelluksen toiminnallisuutta.