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

Das react-dom/client Paket

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

1. createRoot(container): Diese Methode erstellt eine React-Wurzel, indem sie auf ein vorhandenes DOM-Element verweist. In den meisten React-Anwendungen ist dieses Element ein div-Element mit der root-ID, das typischerweise in der index.html-Datei definiert ist. Diese Wurzel dient als Container, in dem die gesamte React-Anwendung gerendert wird;
2. render(element): Die render-Methode erwartet einen Verweis auf ein React-Element oder eine Komponente, die angibt, was innerhalb des Wurzelcontainers gerendert werden soll.

Hier ist eine grundlegende Code-Struktur, die zeigt, 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

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

Hinweis

Alle Beispiele und Herausforderungen werden in den CodeSandboxes präsentiert, damit Sie mit dem Code arbeiten können, ohne Unterbrechungen für die Einrichtung Ihrer Umgebung.

Standardmäßig sehen wir die Live-Seitenvorschau. Bitte ziehen Sie den Schieberegler auf der linken Seite des CodeSandbox, um den Code zu inspizieren.

In diesem Beispiel erstellen wir ein React-Element namens article und rendern es in den angegebenen Root-Container.