Edellisissä luvuissa opimme luomaan JSX-elementtejä käyttöliittymien rakentamiseen. Nyt on aika tuoda nämä elementit näytölle renderöimällä ne React-sovelluksessamme.

react-dom/client-paketti

React-elementin renderöimiseksi DOM-puuhun käytämme react-dom/client-pakettia, joka tarjoaa kaksi keskeistä metodia:

1. createRoot(container): Tämä metodi luo React-juuren viittaamalla olemassa olevaan DOM-elementtiin. Useimmissa React-sovelluksissa tämä elementti on div, jolla on tunniste root, ja se määritellään yleensä index.html-tiedostossa. Tämä juuri toimii säiliönä, johon koko React-sovellus renderöidään;
2. render(element): Render-metodi odottaa viitettä React-elementtiin tai -komponenttiin ja määrittää, mitä juurisäiliöön renderöidään.

Alla on perusrakenne, joka havainnollistaa tätä prosessia:

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

Käytännön esimerkki

Toteutetaan tämä teoria käytännössä. Tarkastellaan seuraavaa esimerkkiä, jossa luodaan React-elementti ja renderöidään se DOM:iin:

Huomio

Kaikki esimerkit ja tehtävät esitetään CodeSandboxeissa, jotta voit työskennellä koodin parissa ilman ympäristön asettamiseen liittyviä keskeytyksiä.

Oletuksena näet sivun live-esikatselun. Vedä CodeSandboxin vasemmalla puolella olevaa liukusäädintä tarkastellaksesi koodia.

Tässä esimerkissä luodaan React-elementti nimeltä article ja renderöidään se määriteltyyn juurikontaineriin.