Nei capitoli precedenti, abbiamo imparato a creare elementi JSX per costruire le nostre interfacce utente. È il momento di visualizzare questi elementi sullo schermo effettuando il rendering nella nostra applicazione React.

Il pacchetto react-dom/client

Per effettuare il rendering di un elemento React nell'albero DOM, si utilizza il pacchetto react-dom/client, che fornisce due metodi fondamentali:

1. createRoot(container): Questo metodo crea una radice React facendo riferimento a un elemento DOM esistente. Nella maggior parte delle applicazioni React, questo elemento è un elemento div con l'id root, solitamente definito nel file index.html. Questa radice funge da contenitore in cui verrà renderizzata l'intera applicazione React;
2. render(element): Il metodo render si aspetta un riferimento a un elemento o componente React, specificando cosa deve essere visualizzato all'interno del contenitore root.

Ecco una struttura di codice di base che illustra come funziona questo processo:

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

Esempio pratico

Mettiamo in pratica questa teoria. Considera il seguente esempio, in cui creiamo un elemento React e lo renderizziamo nel DOM:

Nota

Tutti gli esempi e le esercitazioni saranno presentati nei CodeSandbox, così potrai lavorare con il codice senza interruzioni per la configurazione dell'ambiente.

Per impostazione predefinita, viene visualizzata l'anteprima della pagina live. Trascina il cursore sul lato sinistro del CodeSandbox per ispezionare il codice.

In questo esempio, viene creato un elemento React chiamato article e viene renderizzato all'interno del contenitore root specificato.