React

Eine JavaScript-Bibliothek von Meta für den Bau interaktiver Benutzeroberflächen aus wiederverwendbaren Komponenten.

Definition

React ist eine Open-Source-JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Sie wurde 2013 von Meta (damals Facebook) veröffentlicht und wird seither als Kernbaustein für Webanwendungen, mobile Apps (React Native) und Desktop-Applikationen eingesetzt.

Bedeutung

React hat sich als eine der meistgenutzten Frontend-Technologien etabliert. Laut der Stack Overflow Developer Survey 2024 verwenden über 40 % der befragten Entwickler React. Die Bibliothek bildet die technische Grundlage für Frameworks wie Next.js und ist auch im WordPress-Ökosystem verankert — der Gutenberg Editor ist vollständig in React implementiert.

Funktionsweise

React basiert auf einem komponentenbasierten Architekturansatz: Jede UI-Einheit (Button, Formular, Navigation) wird als eigenständige Komponente mit eigenem State und eigener Rendering-Logik definiert. Komponenten werden deklarativ beschrieben — der Entwickler definiert, wie die Oberfläche bei einem bestimmten Zustand aussehen soll, React berechnet die minimalen DOM-Änderungen automatisch. Dafür nutzt React einen Virtual DOM (eine In-Memory-Repräsentation des tatsächlichen DOM), vergleicht Änderungen und aktualisiert nur die betroffenen Elemente. Seit React 18 unterstützt die Bibliothek Concurrent Rendering, das UI-Updates priorisiert und die wahrgenommene Geschwindigkeit verbessert.

Praxisbeispiel

Ein E-Commerce-Unternehmen baut seine Produktkonfigurator-Oberfläche als React-Anwendung. Jede Option (Farbe, Größe, Material) ist eine eigene Komponente, die bei Änderung nur das Vorschaubild und den Preis neu rendert — nicht die gesamte Seite. Das Ergebnis: Interaktionen fühlen sich sofort an, ohne Seitenneuladung.

Verwandte Begriffe

  • Next.js: Ein auf React aufbauendes Framework, das Server-Side Rendering, Routing und API-Funktionen ergänzt.
  • Virtual DOM: Die In-Memory-Repräsentation des Browser-DOM, die React für effizientes UI-Rendering nutzt.
  • JSX: Eine Syntaxerweiterung für JavaScript, die HTML-ähnliche Strukturen direkt im Code erlaubt und von React für die Komponentenbeschreibung verwendet wird.