Was ist React?

Kurz gesagt: Was ist React?

React ist keine komplette Lösung wie Angular, sondern eine fokussierte Bibliothek für genau eine Aufgabe: das Rendering interaktiver Benutzeroberflächen. Routing, State-Management auf App-Ebene, Datenanbindung oder Build-Tools sind bewusst nicht enthalten – diese Aufgaben übernehmen ergänzende Bibliotheken aus dem React-Ökosystem.

Die zentrale Aussage der React-Dokumentation lautet sinngemäß: „The library for web and native user interfaces." React ist also primär eine UI-Bibliothek. Mit Frameworks wie Next.js, Remix oder Expo lässt sich React zu einer vollwertigen Anwendungs-Architektur erweitern – inklusive Server-Side Rendering, Routing oder nativer Mobile-Apps.

Die drei Kernideen

React lässt sich auf drei zentrale Konzepte reduzieren, die zusammen den Charakter der Bibliothek ausmachen.

Komponentenbasiert

Eine React-Anwendung besteht aus Komponenten – kleinen, wiederverwendbaren UI-Bausteinen. Eine Komponente ist im Kern nichts anderes als eine JavaScript-Funktion, die Markup zurückgibt.

function WelcomeBanner({ name }) {
    return <h1>Willkommen, {name}!</h1>;
}

Komponenten werden ineinander verschachtelt und so zu Seiten oder ganzen Anwendungen zusammengesetzt. Diese Komposition ist Reacts wichtigstes Strukturprinzip – statt Vererbung wird mit Komposition gearbeitet.

Deklarativ statt imperativ

Klassisches DOM-Scripting (etwa mit jQuery oder reinem JavaScript) ist imperativ: Du beschreibst Schritt für Schritt, wie das DOM zu verändern ist – „füge dieses Element ein, ändere jene Klasse, entferne den alten Knoten".

React ist deklarativ: Du beschreibst, wie die Oberfläche bei einem bestimmten Zustand auszusehen hat. Welche DOM-Operationen dafür konkret nötig sind, berechnet React selbst.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Geklickt: {count}
        </button>
    );
}

Du sagst nicht „such den Button, ändere den Text auf den neuen Wert". Du sagst: „Bei diesem count soll der Button so aussehen." Den Rest erledigt React.

Einseitiger Datenfluss

Daten fließen in React grundsätzlich von oben nach unten – von Eltern- zu Kind-Komponenten via Props. Kinder können nicht einfach Werte des Elternteils ändern. Soll ein Kind den Zustand des Elternteils beeinflussen, übergibt das Elternteil eine Callback-Funktion als Prop.

Dieser einseitige Datenfluss macht den Datenstrom nachvollziehbar und erleichtert das Debuggen erheblich – du musst nie raten, wer den Zustand zuletzt geändert hat.

Das virtuelle DOM

Das virtuelle DOM (Virtual DOM, kurz VDOM) ist eine der bekanntesten Eigenschaften von React – und gleichzeitig eines der am häufigsten missverstandenen Konzepte.

Das Problem: Direkte DOM-Manipulation ist teuer

Operationen am realen DOM sind im Browser vergleichsweise langsam. Jede Änderung kann Layout-Recalculations und Repaints auslösen. Bei häufigen, kleinen Updates – etwa bei einer Eingabe in einem Formular – kann das spürbar Performance kosten.

Die Lösung: Eine leichtgewichtige Repräsentation im Speicher

React hält eine JavaScript-Repräsentation des UI-Baums im Speicher. Wenn sich Zustand ändert, baut React zunächst diesen Baum neu auf. Dann vergleicht es den neuen mit dem alten Baum (dieser Vorgang heißt Reconciliation bzw. Diffing) und ermittelt nur die Stellen, die sich tatsächlich geändert haben.

Erst diese minimalen Änderungen werden ans reale DOM weitergegeben. Das spart Aufwand, weil viele potenzielle DOM-Operationen entfallen.

// Vorher (alter virtueller Baum):
<div>
    <h1>Hallo</h1>
    <p>Counter: 0</p>
</div>

// Nachher (neuer virtueller Baum):
<div>
    <h1>Hallo</h1>
    <p>Counter: 1</p>
</div>

// React erkennt: Nur der Textknoten in <p> hat sich geändert.
// Es wird nur dieser eine Knoten im realen DOM aktualisiert.

Wichtig: VDOM ist kein Selbstzweck

Das virtuelle DOM ist ein Implementierungsdetail, kein Feature, das du als Entwickler aktiv steuerst. Es macht React nicht automatisch schneller als jedes andere Framework – Svelte etwa kommt ohne VDOM aus und ist trotzdem performant.

Der eigentliche Vorteil liegt im Programmiermodell: Du musst dich nicht um effiziente DOM-Updates kümmern. Den Rest erledigt React.

React ist eine Bibliothek, kein Framework

Diese Unterscheidung ist mehr als Wortklauberei. Sie prägt die Arbeit mit React grundlegend.

Der Vorteil: Maximale Flexibilität und ein riesiges Ökosystem. Der Nachteil: Du triffst viele Entscheidungen selbst – jedes React-Projekt sieht etwas anders aus.

Aktuelle Version: React 19

Die aktuelle stabile Version ist React 19 (veröffentlicht im Dezember 2024). Sie bringt einige fundamentale Erweiterungen:

• Actions und der Hook useActionState vereinfachen Formular- und Mutationslogik erheblich.
• useOptimistic macht optimistische UI-Updates zum First-Class-Pattern.
• Der neue use()-Hook erlaubt das Lesen von Promises und Context inline – auch in Bedingungen und Schleifen.
• React Server Components (RSC) sind nun stabil und ermöglichen das Rendering von Komponenten direkt auf dem Server – ohne JavaScript an den Client auszuliefern.
• forwardRef ist nicht mehr nötig: Refs lassen sich in React 19 direkt als Prop übergeben.
• Verbesserte Hydration-Fehlermeldungen, automatisches Memoization-Potenzial durch den React Compiler (separat, opt-in).

React 19 ist abwärtskompatibel zu React 18; ein Migrations-Tool (types-react-codemod) hilft beim Update.

React im Vergleich zu anderen Bibliotheken

Ein kurzer Überblick, ohne Glaubenskrieg:

• Angular ist ein Komplettpaket: opinionated, eingebautes Routing, DI, Forms, Reactive-Streams (RxJS). Lernkurve höher, dafür weniger Entscheidungen pro Projekt.
• Vue liegt zwischen React und Angular: angenehmes API, eingebautes State-Management (Pinia), aber kleineres Ökosystem.
• Svelte kompiliert Komponenten zu reaktivem Vanilla-JavaScript – kein VDOM, kleine Bundles, einfache Syntax. Ökosystem wächst, ist aber kleiner als das von React.
• SolidJS sieht aus wie React, hat aber feingranulare Reaktivität ohne VDOM. Sehr performant, kleinere Community.

React punktet vor allem durch Reichweite: Job-Markt, Bibliotheken, Tooling, Lernmaterial, Community. Für die meisten Web-Projekte ist es eine sichere und solide Wahl.

Weiterführende Ressourcen

Externe Quellen

• Offizielle Dokumentation – react.dev
• Quick Start – react.dev/learn
• API-Referenz – react.dev/reference/react

Verwandte Artikel

• JSX – Syntax und Regeln
• Setup: Vite, Next.js, Create React App
• Erste Komponente
• Komponenten-Denken