Elemente in React Rendern
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:
- 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 IDroot
, das typischerweise in der Dateiindex.html
definiert ist. Diese Root dient als Container, in dem die gesamte React-Anwendung gerendert wird; - 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.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Elemente in React Rendern
Swipe um das Menü anzuzeigen
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:
- 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 IDroot
, das typischerweise in der Dateiindex.html
definiert ist. Diese Root dient als Container, in dem die gesamte React-Anwendung gerendert wird; - 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.
Danke für Ihr Feedback!