React: Die beliebteste JavaScript-Bibliothek für moderne UIs – Einsteiger-Guide

React ist seit Jahren die meistgenutzte Frontend-Bibliothek der Welt – und das aus gutem Grund. Entwickelt von Meta (ehemals Facebook) und 2013 als Open-Source-Projekt veröffentlicht, hat React die Art und Weise, wie wir Benutzeroberflächen im Web bauen, grundlegend verändert. Doch bevor wir tiefer einsteigen: React ist eine Bibliothek, kein Framework. Das ist ein wichtiger Unterschied, den viele Einsteiger zunächst verwirrt.

Bibliothek statt Framework – was bedeutet das?

Ein vollständiges Framework wie Angular bringt alles mit: Routing, HTTP-Client, Formularverwaltung, Dependency Injection. React hingegen kümmert sich ausschließlich um die View-Schicht einer Anwendung – also darum, wie Daten auf dem Bildschirm dargestellt werden. Alles andere, wie Routing oder State-Management, müssen Entwicklerinnen und Entwickler durch externe Pakete ergänzen. Das macht React flexibel, bedeutet aber auch, dass man für größere Projekte eigene Architekturentscheidungen treffen muss.

Diese Flexibilität ist gleichzeitig Stärke und Schwäche: Einsteiger können schnell loslegen, ohne ein komplettes Ökosystem verstehen zu müssen. Große Teams hingegen müssen sich auf Standards einigen, was React allein nicht vorgibt.

JSX – JavaScript und HTML vereint

Das auffälligste Merkmal von React ist JSX (JavaScript XML). JSX erlaubt es, HTML-ähnliche Syntax direkt in JavaScript-Code zu schreiben. Hinter den Kulissen wird JSX durch einen Compiler (in der Regel Babel oder der Vite-Build-Prozess) in gewöhnliche JavaScript-Funktionsaufrufe umgewandelt.

function Begruessung({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

JSX ist kein Muss – React funktioniert auch ohne es – aber praktisch jedes React-Projekt verwendet JSX, da es den Code erheblich lesbarer macht. Attribute werden in camelCase geschrieben (className statt class), und JavaScript-Ausdrücke werden in geschweifte Klammern eingeschlossen.

Komponenten: der Grundbaustein jeder React-Anwendung

React-Anwendungen bestehen aus Komponenten. Jede Komponente ist eine JavaScript-Funktion, die JSX zurückgibt. Komponenten können verschachtelt werden, eigene Zustände verwalten und Daten über Props empfangen.

Props (kurz für Properties) sind unveränderliche Eingabeparameter, die von einer Elternkomponente an eine Kindkomponente weitergegeben werden. State hingegen ist interner, veränderlicher Zustand einer Komponente. Wenn sich State oder Props ändern, rendert React die betroffene Komponente automatisch neu.

Hooks: useState und useEffect

Seit React 16.8 (2019) sind Hooks das zentrale Konzept für State und Seiteneffekte in funktionalen Komponenten. Die zwei wichtigsten Hooks für Einsteiger:

useState fügt einer Komponente lokalen Zustand hinzu. Der Hook gibt ein Array mit dem aktuellen Wert und einer Setter-Funktion zurück:

const [zaehler, setZaehler] = useState(0);

useEffect erlaubt es, Seiteneffekte in Komponenten auszuführen – etwa API-Aufrufe, Timer oder das Manipulieren des DOM. Der Hook wird nach dem Rendern ausgeführt und kann optional eine Bereinigungsfunktion zurückgeben:

useEffect(() => {
  document.title = `Klicks: ${zaehler}`;
}, [zaehler]);

Das zweite Argument ist das Dependency-Array. Enthält es [zaehler], wird der Effekt nur ausgeführt, wenn sich zaehler ändert. Ein leeres Array [] bedeutet: einmal beim Mounten ausführen.

Das Virtual DOM

Ein zentrales Konzept in React ist das Virtual DOM. Anstatt bei jeder Änderung direkt das echte Browser-DOM zu manipulieren, pflegt React eine leichtgewichtige JavaScript-Repräsentation des DOM im Speicher. Bei einer Zustandsänderung vergleicht React das neue virtuelle DOM mit dem alten (dieser Prozess heißt Reconciliation) und aktualisiert nur die tatsächlich geänderten Teile des echten DOM. Das war ursprünglich ein großer Performancevorteil, wobei neuere Frameworks diesen Ansatz inzwischen hinterfragen.

Projekt erstellen: create-react-app vs. Vite

Lange war create-react-app (CRA) der Standardweg, ein neues React-Projekt zu starten. Es richtet alles automatisch ein: Webpack, Babel, ESLint. Allerdings ist CRA inzwischen offiziell nicht mehr empfohlen, da es langsam und schwer anpassbar ist.

Der aktuelle Standard ist Vite. Vite ist ein blitzschnelles Build-Tool, das ESM-nativen Dev-Server und sehr kurze Startzeiten bietet. Ein neues React-Projekt mit Vite erstellt man so:

npm create vite@latest mein-projekt -- --template react

Weitere beliebte Alternativen sind Next.js (für Server-Side Rendering und Static Site Generation) und Remix (für datenorientierte Full-Stack-Anwendungen). Wer eine reine clientseitige App baut, ist mit Vite gut bedient.

Vergleich: React vs. Vue vs. Angular vs. Svelte

Kriterium	React	Vue	Angular	Svelte
Lernkurve	Mittel	Niedrig	Steil	Niedrig
Ökosystem	Sehr groß	Groß	Groß (integriert)	Wächst
Performance	Gut (VDOM)	Gut (VDOM)	Gut	Sehr gut (kein VDOM)
Typ	Bibliothek	Progressiv	Full Framework	Compiler
Ideal für	SPAs, große Apps	Einsteiger, SPAs	Enterprise	Kleine bis mittelgroße Apps
Hinter dem Projekt	Meta	Community	Google	Community / Vercel

React bleibt die sicherste Wahl, wenn Jobmarktrelevanz, Ökosystemgröße und Community-Support entscheidend sind. Vue.js ist zugänglicher für Einsteiger, während Svelte mit seinem Compiler-Ansatz besonders schlanken Code produziert.

Häufig gestellte Fragen (FAQ)

Muss ich JavaScript gut können, bevor ich React lerne?

Ja, unbedingt. Grundkenntnisse in modernem JavaScript (ES6+) sind Voraussetzung: Arrow Functions, Destructuring, Array-Methoden wie map und filter, sowie das Konzept von Promises solltest du kennen, bevor du mit React startest.

Was ist der Unterschied zwischen State und Props?

Props sind unveränderliche Eingaben, die von außen in eine Komponente hereingegeben werden – vergleichbar mit Funktionsargumenten. State ist interner, veränderlicher Zustand, der von der Komponente selbst verwaltet wird. Wenn sich State ändert, rendert React die Komponente neu.

Brauche ich Redux für State-Management?

Für die meisten modernen React-Anwendungen ist Redux nicht notwendig. Reacts eingebauter useContext-Hook in Kombination mit useReducer deckt viele Anwendungsfälle ab. Für komplexere Anforderungen sind leichtgewichtige Alternativen wie Zustand oder Jotai oft besser geeignet als Redux.

Was ist React Server Components?

React Server Components (RSC) sind eine neuere Funktion, die es erlaubt, Komponenten direkt auf dem Server zu rendern, ohne JavaScript an den Client zu schicken. Sie werden vor allem in Next.js 13+ genutzt und können die initiale Ladezeit erheblich verbessern, da weniger JavaScript im Browser ausgeführt werden muss.

Wer tiefer in React einsteigen möchte, findet in der offiziellen React-Dokumentation eine hervorragend strukturierte Lernressource mit interaktiven Beispielen. React bleibt 2026 die erste Wahl für viele Teams und Einzelentwickler – das breite Ökosystem, die große Community und die kontinuierliche Weiterentwicklung machen es zur soliden Grundlage für moderne Webprojekte.