Elemente in React Rendern

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:

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.