Elemente in React Rendern

React-Komponenten beschreiben, wie die Benutzeroberfläche aussehen soll, müssen jedoch noch gerendert werden, um auf dem Bildschirm sichtbar zu sein.

In einer typischen React-Anwendung gibt es ein einzelnes Wurzelelement in der HTML-Datei. React verwendet dieses Wurzelelement als Einstiegspunkt, an dem die gesamte Anwendung gerendert wird.

Nachfolgend ein vereinfachtes Beispiel, wie eine Komponente gerendert wird:

import ReactDOM from "react-dom/client";

function App() {
  return <h1>Hello, React</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

In diesem Beispiel nimmt React die App-Komponente und rendert sie innerhalb des HTML-Elements mit der ID root. Sie müssen sich diesen Code noch nicht merken. Er dient dazu, zu zeigen, wie React Komponenten mit der Seite verbindet.

Nach dem Rendern aktualisiert React die Benutzeroberfläche automatisch, wenn sich die Ausgabe der Komponente ändert. Dadurch können Sie sich darauf konzentrieren, die Benutzeroberfläche zu beschreiben, anstatt die Seite manuell zu aktualisieren.