Rendering von Benutzeroberflächen (UI)
Um zu verstehen, wie React funktioniert, benötigen wir zunächst ein grundlegendes Verständnis dafür, wie Browser Ihren Code interpretieren, um Benutzeroberflächen (UI) zu erstellen (oder zu rendern).
Wenn ein Benutzer eine Webseite besucht, liefert der Server eine HTML-Datei an den Browser zurück, die etwa so aussehen könnte:
Der Browser liest dann das HTML und konstruiert das Document Object Model (DOM).
Was ist das DOM?
Das DOM ist eine Objektdarstellung der HTML-Elemente. Es fungiert als Brücke zwischen Ihrem Code und der Benutzeroberfläche und hat eine baumartige Struktur mit Eltern-Kind-Beziehungen.
Sie können DOM-Methoden und JavaScript verwenden, um auf Benutzerereignisse zu reagieren und das DOM zu manipulieren, indem Sie bestimmte Elemente in der Benutzeroberfläche auswählen, hinzufügen, aktualisieren oder löschen. Die DOM-Manipulation ermöglicht es Ihnen nicht nur, bestimmte Elemente anzusprechen, sondern auch deren Stil und Inhalt zu ändern.
Im nächsten Abschnitt lernen Sie, wie Sie JavaScript und DOM-Methoden verwenden.
Zusätzliche Ressourcen:
Über React und Next.js
Erfahren Sie mehr über die Unterschiede zwischen React und Next.js und wie Sie sie gemeinsam nutzen können, um moderne Webanwendungen zu erstellen.
UI mit JavaScript aktualisieren
Erfahren Sie, wie Sie mit Event-Listenern und JavaScript die Benutzeroberfläche aktualisieren können.