React: Komponenten-Bibliothek für moderne Web-Oberflächen

React ist eine JavaScript-Bibliothek von Meta für den Bau von Benutzeroberflächen. Entwickelt von Jordan Walke, kam sie 2011 im Facebook-Newsfeed zum Einsatz und ist seit 2013 als Open Source verfügbar. React ist komponentenbasiert: Eine Oberfläche wird aus kleinen, wiederverwendbaren Bausteinen zusammengesetzt, die jeweils ihren eigenen Zustand (State) verwalten.

Komponenten und JSX

Eine Komponente ist eine Funktion, die Oberflächenteile zurückgibt. Die Beschreibungssprache heißt JSX — HTML-artige Syntax direkt im JavaScript-Code:

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

JSX wird vor der Auslieferung in normales JavaScript übersetzt — meist durch Babel. React selbst ist eine Bibliothek, kein vollständiges Framework: Für Routing, Formulare oder Datenabfragen greift man auf ergänzende Pakete zurück.

Virtual DOM und Rendering

React pflegt ein virtuelles Abbild des DOM im Speicher. Ändert sich der State einer Komponente, berechnet React die Unterschiede (Diffing) und aktualisiert nur die betroffenen Stellen im echten DOM. Das macht Updates schneller, als die ganze Seite neu zu rendern. Dieses Konzept wird oft als Virtual DOM bezeichnet — ein eigenständiger Artikel dazu existiert auf dieser Seite (noch) nicht, im Text bleibt es ein Fachbegriff.

State und Hooks

Mit dem Hook useState erhält eine Komponente eigenen Zustand, useEffect führt Seiteneffekte wie Datenabfragen aus:

import { useState } from "react";
function Zaehler() {
  const [zahl, setZahl] = useState(0);
  return <button onClick={() => setZahl(zahl + 1)}>
    {zahl}</button>;
}

Daten fließen von oben nach unten (Props an Kinder), Ereignisse von unten nach oben (Callback-Funktionen). Dieser Einweg-Datenfluss macht das Verhalten vorhersehbar.

React im Ökosystem

React wird per npm installiert und läuft im Browser; für mobile Apps gibt es React Native. Große Anwendungen erhalten oft die Struktur einer Single Page Application. Der fertige Code wird typischerweise mit Webpack oder Vite gebündelt und per Deployment ausgerollt.

Verwandte Begriffe: JSX, Framework, DOM, Babel, Webpack, SPA, Build, Deployment.