React ist eine JavaScript-Bibliothek für Benutzeroberflächen, die Facebook 2013 als Open Source veröffentlicht hat. Heute gehört sie zu Meta und ist eine der meistgenutzten Grundlagen für interaktive Weboberflächen.
- React
Eine JavaScript-Bibliothek, die Oberflächen aus wiederverwendbaren Komponenten zusammensetzt.
Beispiel: „Das Buchungsformular ist in React gebaut, damit sich der Preis beim Ändern der Personenzahl sofort anpasst.“Auch: React.js oder ReactJS. Geschrieben wird meist in JSX, einer Schreibweise, die HTML-ähnliche Tags direkt im JavaScript erlaubt.
Abgrenzung zum Framework: React kümmert sich nur um die Oberfläche. Routing, Datenabruf und Serverseite kommen aus ergänzenden Paketen oder aus einem Meta-Framework wie Next.js.
Wie React eine Oberfläche aufbaut
Jede Komponente ist eine Funktion, die aus Daten eine Beschreibung der Oberfläche liefert. Ändern sich die Daten, ruft React die Funktion erneut auf, vergleicht das Ergebnis mit dem vorherigen und ändert im Browser nur die Stellen, die sich tatsächlich unterscheiden.
Dieser Abgleich läuft über ein Abbild der Seite im Speicher, das virtuelle DOM. Er erspart dir, jede Änderung von Hand in die Seite zu schreiben, wie es mit jQuery üblich war.
Wofür React eingesetzt wird
Für Oberflächen mit viel Zustand: Dashboards, Konfiguratoren, Buchungsstrecken und Webanwendungen hinter einem Login. Mit React Native entstehen nach demselben Denkmodell auch Apps für iPhone und Android.
Auf einer gewöhnlichen Unternehmensseite ist React oft mehr Werkzeug als nötig. Eine Seite mit Texten, Bildern und einem Kontaktformular braucht keine Bibliothek, die jede Ansicht im Browser zusammensetzt.
Was React für SEO und Ladezeit bedeutet
Rendert React die Inhalte erst im Browser, sieht eine Suchmaschine zunächst eine fast leere Seite. Google führt JavaScript zwar aus, aber zeitversetzt und nicht immer vollständig; die Einzelheiten stehen unter JavaScript-SEO.
Größere React-Projekte laufen deshalb meist über Next.js, das die Seiten auf dem Server vorab erzeugt. Im Browser kommt fertiges HTML an, und React übernimmt danach die Interaktion, ein Schritt, der Hydration heißt.