React

Kurz: Eine JavaScript-Bibliothek zum Bauen von Benutzeroberflächen, entwickelt von Meta — die Basis, auf der auch Next.js aufbaut.

Genauer: React beschreibt UI als Baum wiederverwendbarer Komponenten und aktualisiert bei Zustandsänderungen effizient nur die betroffenen Teile der Seite (Virtual DOM statt kompletter Neu-Render). Es ist bewusst nur eine “View”-Bibliothek — Routing, Datenladen usw. übernehmen Frameworks wie Next.js, die auf React aufsetzen.

Im Detail

Entstehung und Grundidee

React wurde ab 2011 intern bei Facebook entwickelt (u. a. für den News Feed und für Instagram.com) und 2013 als Open Source veröffentlicht. Auslöser war ein wiederkehrendes Problem klassischer Webanwendungen: Sobald sich Daten an mehreren Stellen der Seite gleichzeitig ändern (z. B. ein Like-Zähler UND eine Benachrichtigungs-Badge UND eine Kommentarliste), wird der manuelle DOM-Code, der all diese Stellen synchron hält, schnell unübersichtlich und fehleranfällig — kleine Änderungen an einer Stelle vergessen leicht, eine andere Stelle mit zu aktualisieren. Reacts Antwort: Statt den DOM-Zustand manuell zu pflegen, beschreibt man nur, wie die UI bei einem gegebenen Datenzustand aussehen SOLL, und React berechnet selbst den nötigen Unterschied zum aktuellen DOM.

Deklarativ statt imperativ

// Klassisch (imperativ) - man beschreibt SCHRITTE
const badge = document.getElementById("badge");
badge.textContent = ungeleseneNachrichten;
badge.style.display = ungeleseneNachrichten > 0 ? "block" : "none";
 
// React (deklarativ) - man beschreibt das ERGEBNIS
function Badge({ anzahl }) {
  if (anzahl === 0) return null;
  return <span className="badge">{anzahl}</span>;
}

Bei jeder Zustandsänderung ruft React die Komponentenfunktion erneut auf und vergleicht das neu berechnete Virtual DOM (ein leichtgewichtiges JavaScript-Objekt, das den gewünschten UI-Baum beschreibt) mit dem vorherigen — dieser Diff-Algorithmus (“Reconciliation”) ermittelt die minimale Menge an tatsächlichen DOM-Operationen und führt nur diese aus, statt die Seite komplett neu zu rendern.

Hooks: Zustand in Funktionskomponenten

function Zaehler() {
  const [wert, setWert] = useState(0);
 
  useEffect(() => {
    document.title = `Zähler: ${wert}`;
  }, [wert]); // läuft nur erneut, wenn sich "wert" ändert
 
  return <button onClick={() => setWert(wert + 1)}>{wert}</button>;
}

Vor React 16.8 (2019) brauchte man für internen Zustand zwingend Klassenkomponenten mit Lebenszyklus-Methoden wie componentDidMount/componentDidUpdate. Hooks (useState, useEffect, useContext u. a.) ersetzen das durch einfache Funktionsaufrufe innerhalb von Funktionskomponenten und haben sich seitdem als Standardweg durchgesetzt — Klassenkomponenten werden in neuem Code kaum noch geschrieben, bleiben aber aus Kompatibilitätsgründen unterstützt.

Bewusst nur eine View-Bibliothek

React selbst liefert absichtlich NUR die UI-Schicht — kein Routing, kein Datenladen vom Server, kein State-Management über mehrere Seiten hinweg. Das unterscheidet React fundamental von “Batteries-included”-Frameworks wie Angular (bringt Routing, HTTP-Client, Dependency Injection u. v. m. fest eingebaut mit) oder auch Vue in seiner offiziellen Vollausstattung. Stattdessen entstand ein Ökosystem ergänzender Bibliotheken und Meta-Frameworks: Next.js (Routing, Server-Rendering, API-Routen), React Router (reines Client-Side-Routing), Redux/Zustand/Jotai (globaler State), React Query/SWR (Server-Daten-Caching). Diese Modularität ist zugleich Reacts größte Stärke (freie Werkzeugwahl) und größte Einstiegshürde (viele Entscheidungen nötig, bevor überhaupt eine Anwendung läuft) — ein Grund, warum viele neue Projekte direkt mit einem Meta-Framework wie Next.js statt mit React “pur” starten.

Typische Stolperfallen

Ein häufiger Anfängerfehler ist das direkte Mutieren von State (zustand.push(x) statt setZustand([...zustand, x])) — React erkennt Änderungen über Referenzvergleich, ein mutiertes Array/Objekt behält dieselbe Referenz und löst deshalb keinen Re-Render aus. Ein zweiter klassischer Fehler ist das Vergessen der Dependency-Arrays bei useEffect, was zu Endlosschleifen oder veralteten (“stale”) Werten in Closures führen kann.

Siehe auch: React Native, JS, Angular, Vue, jQuery