React

React ist eine Sammlung fertiger Programmbausteine, mit der man die sichtbare Oberfläche von Webseiten und Apps baut. Gemeint ist alles, was man auf dem Bildschirm sieht und anklicken kann: Buttons, Suchfelder, Listen, Menüs. Eine solche Sammlung nennt man Bibliothek. Man muss sie nicht benutzen, aber sie nimmt einem sehr viel Arbeit ab. Entwickelt wurde React 2013 bei Facebook, heute ist der Programmcode frei verfügbar und jeder darf ihn kostenlos einsetzen. Es ist damit eines der meistgenutzten Werkzeuge der Webentwicklung überhaupt.

Warum halb das Web damit gebaut ist

Moderne Webseiten sind keine starren Dokumente mehr. Ein Online-Shop zeigt den Warenkorb sofort an, ein Chat lädt neue Nachrichten ohne Neuladen der Seite. Früher musste jede dieser kleinen Änderungen von Hand programmiert werden. Das wurde bei großen Anwendungen schnell unübersichtlich und fehleranfällig.

React löst das Problem, indem es die Oberfläche in kleine Teile zerlegt. Jedes Teil kümmert sich nur um sich selbst. Ein Team kann so an einem riesigen Projekt arbeiten, ohne dass sich alle ständig ins Gehege kommen. Genau das ist der Grund, warum große Firmen zu React greifen.

Der zweite Grund ist das Ökosystem. Weil so viele Menschen React nutzen, gibt es für fast jedes Problem schon eine fertige Lösung, eine Anleitung oder eine Antwort in einem Forum. Wer React kann, findet außerdem leicht einen Job. Bei Umfragen unter Entwicklern liegt React seit Jahren auf den vorderen Plätzen.

Komponenten und der Umweg über die Kopie

Die Grundeinheit in React heißt Komponente. Eine Komponente ist ein abgeschlossener Baustein der Oberfläche, zum Beispiel ein einzelner Kommentar unter einem Video. Man schreibt sie einmal und benutzt sie hundertmal, für jeden Kommentar erneut. Komponenten lassen sich auch ineinander verschachteln: Die Kommentarspalte enthält viele einzelne Kommentare, jeder Kommentar enthält einen Namen, ein Bild und einen Text.

Jede Komponente hat einen Zustand, also die Daten, die sie gerade anzeigt. Bei einem Like-Button wäre das die Zahl der Likes. Ändert sich der Zustand, zeichnet React die Komponente neu. Der Entwickler beschreibt also nur, wie die Oberfläche bei einem bestimmten Zustand aussehen soll. Um die einzelnen Änderungsschritte kümmert sich React selbst.

Damit das schnell bleibt, führt React intern eine Kopie der Seitenstruktur im Speicher, das sogenannte virtuelle DOM. Bei einer Änderung vergleicht React die neue Kopie mit der alten. Nur die Unterschiede werden an den Browser weitergegeben. Das ist wie bei einer Hausaufgabe, in der man einen Rechtschreibfehler ausbessert, statt das ganze Blatt neu zu schreiben.

Von Netflix bis zur Handy-App

Sehr wahrscheinlich hast du heute schon eine React-Oberfläche bedient. Die Weboberflächen von Instagram, Netflix, WhatsApp Web und vielen Online-Banken sind damit gebaut. Auch die Chat-Oberflächen bekannter KI-Dienste laufen auf React oder auf Frameworks, die darauf aufbauen. Von außen sieht man das nicht, technisch versierte Nutzer können es aber in den Entwicklerwerkzeugen des Browsers erkennen.

Ein naher Verwandter ist React Native. Damit schreibt man eine App einmal und veröffentlicht sie sowohl für Android als auch für iPhones. Das spart Firmen viel Geld, weil sie nicht zwei getrennte Teams brauchen. Häufig genannt wird außerdem Next.js, ein Aufbau auf React, der Seiten schon auf dem Server vorbereitet und dadurch schneller lädt.

Ein verbreiteter Irrtum: React ist keine Programmiersprache. Der Code wird in JavaScript geschrieben, der Sprache, die in jedem Browser läuft. React ist nur ein Hilfsmittel darin. Konkurrenten wie Vue oder Angular verfolgen ähnliche Ideen und stehen in Stellenanzeigen oft direkt daneben.