Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Elemente in React Rendern | Grundlagen von React und Komponentenbasierter UI
React Mastery

bookElemente 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:

  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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.17

bookElemente 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:

  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.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 6
some-alt