I de föregående kapitlen lärde vi oss hur man skapar JSX-element för att bygga våra användargränssnitt. Nu är det dags att visa dessa element på skärmen genom att rendera dem i vår React-applikation.

Paketet react-dom/client

För att rendera ett React-element i DOM-trädet använder vi paketet react-dom/client, som tillhandahåller två viktiga metoder:

1. createRoot(container): Denna metod skapar en React-root genom att referera till ett befintligt DOM-element. I de flesta React-applikationer är detta element ett div-element med id root, vanligtvis definierat i filen index.html. Denna root fungerar som behållare där hela React-applikationen renderas;
2. render(element): Render-metoden förväntar sig en referens till ett React-element eller komponent och anger vad som ska renderas i root-behållaren.

Här är en grundläggande kodstruktur som illustrerar hur denna process fungerar:

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

Praktiskt exempel

Låt oss omsätta denna teori i praktiken. Titta på följande exempel där vi skapar ett React-element och renderar det i DOM:

Notera

Alla exempel och övningar presenteras i CodeSandboxes så att du kan arbeta med koden utan avbrott för miljöinställningar.

Som standard visas en live-förhandsvisning av sidan. Dra reglaget på vänster sida av CodeSandbox för att granska koden.

I det här exemplet skapas ett React-element kallat article och renderas i den angivna rotbehållaren.