I de forrige kapitlene lærte vi hvordan vi lager JSX-elementer for å bygge brukergrensesnittet vårt. Nå er det på tide å vise disse elementene på skjermen ved å rendre dem i React-applikasjonen vår.

Pakken react-dom/client

For å rendre et React-element inn i DOM-treet, bruker vi pakken react-dom/client, som tilbyr to sentrale metoder:

1. createRoot(container): Denne metoden oppretter en React-root ved å referere til et eksisterende DOM-element. I de fleste React-applikasjoner er dette et div-element med root som id, vanligvis definert i index.html-filen. Denne root fungerer som beholderen hvor hele React-applikasjonen blir rendret;
2. render(element): Render-metoden forventer en referanse til et React-element eller en komponent, og spesifiserer hva som skal rendres i root-beholderen.

Her er en grunnleggende kode som illustrerer hvordan denne prosessen fungerer:

// Import the necessary method from the `react-dom` package.
import { createRoot } from "react-dom/client";

// Obtain a reference to the DOM container with the `"root"` id.
const root = createRoot(document.getElementById("root"));

// Define the React element you want to render.
const elementToRender = <YourReactElement />;

// Use the `render()` method to place the element in the `root` container.
root.render(elementToRender);

Praktisk eksempel

La oss sette teorien ut i praksis. Se følgende eksempel, hvor vi lager et React-element og rendrer det inn i DOM-en:

Merk

Alle eksempler og oppgaver blir presentert i CodeSandboxes slik at du kan jobbe med koden uten avbrudd for oppsett av miljø.

Som standard vises forhåndsvisning av siden. Dra i glidebryteren på venstre side av CodeSandbox for å inspisere koden.

I dette eksemplet opprettes et React-element kalt article og gjengis i den angitte rotbeholderen.