I de foregående kapitler lærte vi, hvordan man opretter JSX-elementer til at bygge vores brugergrænseflader. Nu er det tid til at vise disse elementer på skærmen ved at gengive dem i vores React-applikation.

Pakken react-dom/client

For at gengive et React-element i DOM-træet bruger vi pakken react-dom/client, som tilbyder to væsentlige metoder:

1. createRoot(container): Denne metode opretter en React-root ved at referere til et eksisterende DOM-element. I de fleste React-applikationer er dette element et div-element med id'et root, som typisk er defineret i filen index.html. Denne root fungerer som containeren, hvor hele React-applikationen bliver gengivet;
2. render(element): Render-metoden forventer en reference til et React-element eller en komponent og angiver, hvad der skal gengives i root-containeren.

Her er en grundlæggende kode, der illustrerer, hvordan processen 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

Lad os omsætte denne teori til praksis. Overvej følgende eksempel, hvor vi opretter et React-element og gengiver det i DOM'en:

Bemærk

Alle eksempler og udfordringer vil blive præsenteret i CodeSandboxes, så du kan arbejde med koden uden afbrydelser til opsætning af dit miljø.

Som standard vises en live forhåndsvisning af siden. Træk venligst skyderen i venstre side af CodeSandbox for at inspicere koden.

I dette eksempel oprettes et React-element kaldet article og gengives i den angivne rodcontainer.