Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Bruk av Context i et Reelt Scenario | React Hooks og Context for Tilstandshåndtering
React Mastery

bookBruk av Context i et Reelt Scenario

La oss lage en bloggkilde om planetene. Vi skal bruke Context for å unngå prop drilling. Appen vil bestå av følgende komponenter: App, Filter, PlanetList og PlanetItem. For å visualisere hierarkiet, vennligst se bildet nedenfor.

Steg 1

Opprett Context i filen context.js på øverste nivå.

import { createContext } from "react";

const Context = createContext();

export default Context;

Steg 2

Gjør hele applikasjonen oppmerksom på at vi bruker context. Derfor må vi pakke hele appen inn i Context.Provider i App.jsx-filen.

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 dette steget må vi sette context-dataen (value-prop for Context.Provider-komponenten). Vi starter med å vise noen data. Dataene presenteres som et array av 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",
  },
... 
  {...}
];

Dette gjør vi:

Importer data fra data.js-filen

import data from "../data";

Initialiser state for planets som et tomt array ved å bruke useState-hooken.

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

Bruk useEffect-hooken for å tildele de importerte dataene til planets-variabelen. Dette sikrer at vi har data å vise.

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

Opprett variabelen appData, som representerer alle app-dataene, og som vil være et objekt med planets-state.

const appData = { planets };

Tildel appData-variabelen til value-propen til context-provider.

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

Full kode for App.jsx-filen etter 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

La oss se nærmere på PlanetList-komponenten. Formålet er å gjengi en spesifikk markup. Inne i denne markuppen bruker vi PlanetItem-komponenten. Det er verdt å merke seg at vi ikke sender noen props eller bruker context i denne komponenten, siden det ikke er behov for å jobbe med data på dette nivået.

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

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

export default PlanetList;

Steg 5

I dette steget må vi få tilgang til dataene for å vise informasjon om planetene. For å gjøre dette følger vi disse trinnene:

Importer Context fra context.js-filen.

import Context from "../context";

Bruk useContext-hooken for å hente planets-dataene fra context.

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

Render markup ved å bruke map-funksjonen, som lar oss iterere over datasettet i React. Bruk destrukturering for å få tilgang til alle egenskapene til 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>
      )
    )}
  </>
);

Fullstendig kode for PlanetItem.jsx-filen etter 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;

Fullstendig app-kode:

Ta gjerne en gjennomgang av hele prosjektet, og legg merke til den overordnede funksjonaliteten og strukturen. For nå anbefales det å fokusere på å forstå hvordan dataene sendes og vises i de ulike komponentene. Merk hvordan dataene hentes og brukes i barnekomponentene, med unntak av Filter-komponenten. Filter-komponenten vil være en utfordring i neste kapittel, slik at du kan videreutvikle appens funksjonalitet.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 11

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.17

bookBruk av Context i et Reelt Scenario

Sveip for å vise menyen

La oss lage en bloggkilde om planetene. Vi skal bruke Context for å unngå prop drilling. Appen vil bestå av følgende komponenter: App, Filter, PlanetList og PlanetItem. For å visualisere hierarkiet, vennligst se bildet nedenfor.

Steg 1

Opprett Context i filen context.js på øverste nivå.

import { createContext } from "react";

const Context = createContext();

export default Context;

Steg 2

Gjør hele applikasjonen oppmerksom på at vi bruker context. Derfor må vi pakke hele appen inn i Context.Provider i App.jsx-filen.

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 dette steget må vi sette context-dataen (value-prop for Context.Provider-komponenten). Vi starter med å vise noen data. Dataene presenteres som et array av 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",
  },
... 
  {...}
];

Dette gjør vi:

Importer data fra data.js-filen

import data from "../data";

Initialiser state for planets som et tomt array ved å bruke useState-hooken.

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

Bruk useEffect-hooken for å tildele de importerte dataene til planets-variabelen. Dette sikrer at vi har data å vise.

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

Opprett variabelen appData, som representerer alle app-dataene, og som vil være et objekt med planets-state.

const appData = { planets };

Tildel appData-variabelen til value-propen til context-provider.

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

Full kode for App.jsx-filen etter 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

La oss se nærmere på PlanetList-komponenten. Formålet er å gjengi en spesifikk markup. Inne i denne markuppen bruker vi PlanetItem-komponenten. Det er verdt å merke seg at vi ikke sender noen props eller bruker context i denne komponenten, siden det ikke er behov for å jobbe med data på dette nivået.

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

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

export default PlanetList;

Steg 5

I dette steget må vi få tilgang til dataene for å vise informasjon om planetene. For å gjøre dette følger vi disse trinnene:

Importer Context fra context.js-filen.

import Context from "../context";

Bruk useContext-hooken for å hente planets-dataene fra context.

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

Render markup ved å bruke map-funksjonen, som lar oss iterere over datasettet i React. Bruk destrukturering for å få tilgang til alle egenskapene til 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>
      )
    )}
  </>
);

Fullstendig kode for PlanetItem.jsx-filen etter 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;

Fullstendig app-kode:

Ta gjerne en gjennomgang av hele prosjektet, og legg merke til den overordnede funksjonaliteten og strukturen. For nå anbefales det å fokusere på å forstå hvordan dataene sendes og vises i de ulike komponentene. Merk hvordan dataene hentes og brukes i barnekomponentene, med unntak av Filter-komponenten. Filter-komponenten vil være en utfordring i neste kapittel, slik at du kan videreutvikle appens funksjonalitet.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 11
some-alt