Dans les chapitres précédents, nous avons appris à créer des éléments JSX pour construire nos interfaces utilisateur. Il est temps d'afficher ces éléments à l'écran en les rendant dans notre application React.

Le package react-dom/client

Pour afficher un élément React dans l'arbre DOM, nous utiliserons le package react-dom/client, qui fournit deux méthodes essentielles :

1. createRoot(container) : Cette méthode crée une racine React en faisant référence à un élément DOM existant. Dans la plupart des applications React, cet élément est une balise div avec l'identifiant root, généralement défini dans le fichier index.html. Cette racine sert de conteneur où toute l'application React sera affichée ;
2. render(element) : La méthode render attend une référence à un élément ou composant React, spécifiant ce qui doit être affiché dans le conteneur racine.

Voici une structure de code basique illustrant ce processus :

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

Exemple pratique

Mettons cette théorie en pratique. Considérons l'exemple suivant, où nous créons un élément React et l'affichons dans le DOM :

Remarque

Tous les exemples et exercices seront présentés dans les CodeSandboxes afin que vous puissiez travailler avec le code sans interruption pour la configuration de votre environnement.

Par défaut, l'aperçu de la page en direct est affiché. Veuillez faire glisser le curseur sur le côté gauche du CodeSandbox pour inspecter le code.

Dans cet exemple, un élément React nommé article est créé et rendu dans le conteneur racine spécifié.