In de voorgaande hoofdstukken hebben we geleerd hoe we JSX-elementen kunnen maken om onze gebruikersinterfaces op te bouwen. Nu is het tijd om deze elementen op het scherm te tonen door ze te renderen in onze React-applicatie.

Het react-dom/client-pakket

Om een React-element in de DOM-boom te renderen, maken we gebruik van het react-dom/client-pakket, dat twee essentiële methoden biedt:

1. createRoot(container): Deze methode maakt een React-root aan door te verwijzen naar een bestaand DOM-element. In de meeste React-applicaties is dit element een div-element met het root-id, meestal gedefinieerd in het index.html-bestand. Deze root fungeert als de container waarin de volledige React-applicatie wordt gerenderd;
2. render(element): De render-methode verwacht een verwijzing naar een React-element of component, waarmee wordt aangegeven wat er binnen de root-container moet worden weergegeven.

Hieronder volgt een basisstructuur van de code die laat zien hoe dit proces werkt:

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

Praktisch Voorbeeld

Laten we deze theorie in de praktijk brengen. Bekijk het volgende voorbeeld, waarin we een React-element maken en dit in de DOM renderen:

Opmerking

Alle voorbeelden en opdrachten worden gepresenteerd in de CodeSandboxes, zodat je zonder onderbrekingen met de code kunt werken zonder je omgeving te hoeven instellen.

Standaard zie je de live paginaweergave. Verschuif de schuifregelaar aan de linkerkant van de CodeSandbox om de code te bekijken.

In dit voorbeeld maken we een React-element genaamd article en renderen we dit in de opgegeven rootcontainer.