In den vorherigen Kapiteln haben wir gelernt, wie man JSX-Elemente erstellt, um Benutzeroberflächen zu gestalten. Nun ist es an der Zeit, diese Elemente auf dem Bildschirm anzuzeigen, indem wir sie in unserer React-Anwendung rendern.

Das Paket react-dom/client

Um ein React-Element in den DOM-Baum zu rendern, verwenden wir das Paket react-dom/client, das zwei wesentliche Methoden bereitstellt:

1. createRoot(container): Diese Methode erstellt eine React-Root, indem sie auf ein bestehendes DOM-Element verweist. In den meisten React-Anwendungen handelt es sich dabei um ein div-Element mit der ID root, das typischerweise in der Datei index.html definiert ist. Diese Root dient als Container, in dem die gesamte React-Anwendung gerendert wird;
2. render(element): Die Render-Methode erwartet eine Referenz auf ein React-Element oder eine Komponente und legt fest, was im Root-Container gerendert werden soll.

Die folgende Code-Struktur veranschaulicht, wie dieser Prozess funktioniert:

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

Praktisches Beispiel

Setzen wir diese Theorie in die Praxis um. Betrachten Sie das folgende Beispiel, in dem wir ein React-Element erstellen und es in den DOM rendern:

Hinweis

Alle Beispiele und Aufgaben werden in den CodeSandboxes präsentiert, sodass Sie ohne Unterbrechung durch Einrichtungsschritte direkt mit dem Code arbeiten können.

Standardmäßig wird die Live-Vorschau der Seite angezeigt. Bitte ziehen Sie den Schieberegler auf der linken Seite der CodeSandbox, um den Code einzusehen.

In diesem Beispiel wird ein React-Element namens article erstellt und in den angegebenen Root-Container gerendert.