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

Le package react-dom/client

Pour rendre 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 référant un élément DOM existant. Dans la plupart des applications React, cet élément est un élément div avec l'id root, généralement défini dans le fichier index.html. Cette racine sert de conteneur où l'ensemble de l'application React sera rendu ;
2. render(element) : La méthode render attend une référence à un élément ou composant React, spécifiant ce qui doit être rendu dans le conteneur racine.

Voici une structure de code de base illustrant comment ce processus fonctionne :

// 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 le rendons dans le DOM :

Remarque

Tous les exemples et défis seront présentés dans les CodeSandboxes afin que vous puissiez travailler avec le code sans aucune interruption pour configurer votre environnement.

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

Dans cet exemple, nous créons un élément React appelé article et le rendons dans le conteneur racine spécifié.