Was ist React?
React steckt hinter einem großen Teil der Oberflächen, die ihr täglich im Browser bedient. Woher die Bibliothek kommt, wie sie arbeitet und wo ihre Grenzen liegen, verständlich erklärt.
- Lesezeit
- 8 Minuten
- Autor
- Samet Akin
- Veröffentlicht
- Kategorie
- Technik erklärt
Was ist React?
React ist eine Bibliothek für den Teil einer Anwendung, den Menschen sehen und anklicken. Der Grundgedanke: Statt dem Browser Schritt für Schritt zu befehlen, was er ändern soll, beschreibt der Code, wie die Oberfläche bei einem bestimmten Datenstand auszusehen hat. Liegt ein neuer Datenstand vor, vergleicht React die alte und die neue Beschreibung und passt im Browser nur die Stellen an, die sich unterscheiden. Diesen Abgleich von Hand zu programmieren war früher die häufigste Fehlerquelle in JavaScript-Oberflächen.
Die Bausteine heißen Komponenten. Eine Komponente ist ein Stück Oberfläche mit eigenem Code: ein Formularfeld, eine Preistabelle, eine ganze Produktkarte. Einmal geschrieben, lässt sie sich beliebig oft einsetzen, mit jeweils anderen Daten. Eine Seite besteht dann aus verschachtelten Komponenten, ungefähr so, wie ein Haus aus Räumen, Wänden und Fenstern besteht.
Das Beispiel zeigt die Mischschreibweise JSX: JavaScript, in dem HTML-ähnliche Bausteine stehen. Was aussieht wie eine neue Sprache, wird vor der Veröffentlichung in normales JavaScript übersetzt. In unseren Projekten kommt dazu TypeScript, damit jede Komponente auch sagt, welche Daten sie erwartet.
function Begruessung({ name }) {
return <p>Hallo {name}</p>;
}
function Seite() {
return (
<div>
<Begruessung name="Ayse" />
<Begruessung name="Mehmet" />
</div>
);
}Wie funktioniert React?
Das Herzstück ist der Zustand, im Englischen State. Jede Komponente kann sich Werte merken, etwa den Inhalt eines Suchfelds oder die gewählte Farbe in einem Konfigurator. Ändert sich so ein Wert, zeichnet React die betroffene Komponente neu und gleicht das Ergebnis mit dem ab, was gerade im Browser steht. Nur der Unterschied wird übernommen. Der Entwickler kümmert sich um die Daten, React kümmert sich um die Anzeige.
Wichtig zu wissen: React ist bewusst keine Komplettlösung. Es regelt die Oberfläche und sonst nichts. Adressen für Unterseiten, Datenladen vom Server, Bildgrößen, all das kommt aus dem Umfeld. Für öffentliche Webseiten hat sich dafür Next.js durchgesetzt, das um React herum den kompletten Rahmen stellt. Für Apps auf dem Handy gibt es React Native, das dieselbe Denkweise auf iPhone und Android bringt.
import { useState } from "react";
function Zaehler() {
const [anzahl, setAnzahl] = useState(0);
return (
<button onClick={() => setAnzahl(anzahl + 1)}>
{anzahl} mal geklickt
</button>
);
}Wozu wird React verwendet?
React lohnt sich überall dort, wo eine Seite auf Eingaben reagieren muss, ohne neu zu laden. Typische Einsatzgebiete sind:
- Kundenportale und interne Werkzeuge, in denen Aufträge, Termine und Dokumente verwaltet werden
- Konfiguratoren und Rechner, bei denen jede Auswahl sofort Preis und Optionen aktualisiert
- Onlineshops mit Filtern, Suche und Warenkorb, die ohne Neuladen reagieren
- Dashboards mit Kennzahlen, die sich laufend aktualisieren
- Mobile Apps über React Native, aus derselben Denkweise und oft mit geteiltem Code
Bei uns ist React tägliches Werkzeug: Jede Oberfläche, die wir bauen, entsteht damit, auch die Seite, die ihr gerade lest. In einem typischen Projekt, etwa einer Webanwendung für die Auftragsverwaltung, besteht die Oberfläche aus einigen Dutzend Komponenten, von der Eingabemaske bis zur Statusanzeige. Weil dieselbe Komponente überall gleich aussieht und gleich funktioniert, bleibt die Anwendung auch nach Jahren des Erweiterns bedienbar.
Die Geschichte von React
React entstand bei Facebook aus einem Alltagsproblem. Der Newsfeed und später der Facebook-Chat mussten sich ständig aktualisieren, und der damals übliche JavaScript-Code kam mit den vielen gleichzeitigen Änderungen nicht mehr zurecht. Der Entwickler Jordan Walke baute daraufhin eine Bibliothek, die die Anzeige aus den Daten ableitet, statt sie von Hand zu pflegen. Intern bewährte sich der Ansatz, 2013 gab Facebook die Bibliothek frei.
- Erschienen
- 2013, quelloffen
- Entwickelt von
- Meta, damals Facebook
- Lizenz
- MIT, kostenfrei nutzbar
- Art
- Bibliothek für Oberflächen, kein Komplettpaket
- Bekannte Nutzer
- Facebook, Instagram, Netflix, Airbnb
Vom Newsfeed zum Webstandard
Freigabe durch Facebook
Facebook stellt React auf einer Konferenz vor und gibt den Code frei. Die erste Reaktion ist Skepsis, vor allem die Mischung aus HTML und JavaScript stößt vielen auf.
2013
Was React nicht kann
React löst genau ein Problem, die Oberfläche. Alles andere bleibt offen, und das führt in der Praxis zu Missverständnissen. Wer nur React einsetzt, hat noch keine Webseite, sondern einen Baukasten für deren sichtbaren Teil.
- Es liefert von sich aus fast leeres HTML: Suchmaschinen sehen ohne einen Server-Schritt wenig Inhalt, für öffentliche Seiten braucht es deshalb ein Framework wie Next.js
- Es bringt weder Routing noch Datenladen mit: diese Entscheidungen muss jedes Projekt selbst treffen
- Es ist für reine Textseiten zu viel: eine Seite ohne Interaktion wird mit React nur schwerer und langsamer
- Es veraltet ohne Pflege: Bibliotheken im Umfeld ändern sich, ein React-Projekt braucht regelmäßige Aktualisierung
Keiner dieser Punkte ist ein Mangel, sie beschreiben nur den Zuschnitt. React will klein sein und das Umfeld entscheiden lassen. Genau deshalb passt es in so viele verschiedene Projekte.
React oder Vue?
Vue.js ist der bekannteste Mitbewerber und löst dieselbe Aufgabe: Oberflächen aus Komponenten, Anzeige folgt den Daten. Beide sind quelloffen und kostenlos, mit beiden lässt sich dieselbe Anwendung bauen. Die Unterschiede liegen im Drumherum:
- React hat das größere Umfeld: mehr fertige Bausteine, mehr Antworten auf Fragen, mehr verfügbare Entwickler
- Vue bringt mehr fertig mit, etwa Routing als offizielles Paket, und gilt als leichter im Einstieg
- React führt über React Native auch zu Handy-Apps, das gibt es bei Vue nicht in gleicher Reife
- Vue steckt in vielen PHP-Systemen, wer so ein System nutzt, hat Vue oft schon im Haus
Für neue Projekte wählen wir React, weil Umfeld und Entwicklersuche über Jahre gerechnet den Ausschlag geben. Steckt in eurem Bestand bereits Vue, ist das aber kein Grund zum Umbau, wir arbeiten auch damit weiter. Mehr dazu steht auf unserer Seite zur React-Entwicklung.
React aus Kundensicht
Als Auftraggeber begegnet euch React vor allem in einer Frage: Wer kann das Projekt in fünf Jahren weiterpflegen? Hier ist die Verbreitung das stärkste Argument. Entwickler mit React-Erfahrung sind leichter zu finden als für jede andere Oberflächen-Technik, und ein sauber aufgebautes Komponentenprojekt liest sich auch für ein neues Team schnell ein. Das senkt das Risiko, an einen einzelnen Dienstleister gebunden zu sein.
Auf der Kostenseite ist React selbst kostenlos, bezahlt wird die Entwicklungszeit. Dazu kommt ein Posten, der oft vergessen wird: Pflege. Ein React-Projekt lebt von Bibliotheken, die regelmäßig aktualisiert werden wollen, sonst stauen sich die Versionen und der nächste Umbau wird teuer. Wer eine Anwendung beauftragt, sollte Wartung deshalb von Anfang an einplanen und nicht erst, wenn etwas klemmt.
Ist React die Zukunft?
React ist seit über einem Jahrzehnt die Nummer eins unter den Oberflächen-Bibliotheken und wird von Meta zusammen mit einer großen Gemeinschaft weiterentwickelt. Die jüngsten Neuerungen, etwa Server Components, verlagern Arbeit vom Browser auf den Server und zeigen, dass die Entwicklung nicht stehen bleibt. Auch die großen Frameworks und Werkzeuge im Web richten sich zuerst an React aus.
Ehrlich ist aber auch: Keine Oberflächen-Technik hält ewig, und Herausforderer gibt es immer. Der Grund, warum React trotzdem eine sichere Wahl bleibt, ist der Bestand. Millionen Anwendungen sind darin geschrieben, und diese Masse sorgt dafür, dass Wissen, Werkzeuge und Entwickler noch sehr lange verfügbar sein werden. Für eine Investition, die zehn Jahre halten soll, zählt genau das mehr als jeder Trend.
Was React stark macht
Anzeige folgt den Daten
Der Code beschreibt, wie die Oberfläche bei einem Datenstand aussieht. Den Abgleich mit dem Browser übernimmt React, eine ganze Fehlerklasse entfällt.
Bausteine statt Einzelstücke
Eine Komponente wird einmal gebaut und überall eingesetzt. Die Oberfläche bleibt einheitlich, auch wenn die Anwendung über Jahre wächst.
Ein Umfeld für alles
Vom Datumswähler bis zur Diagrammbibliothek gibt es fertige Bausteine. Kaum ein Problem, das nicht schon jemand gelöst und veröffentlicht hat.
Entwickler gut zu finden
React ist die verbreitetste Oberflächen-Technik. Wer das Projekt später übernimmt, findet bekannte Strukturen vor statt einer Insellösung.
Was wir mit React bauen
React ist bei uns die Grundlage jeder Oberfläche, vom Portal bis zur App.
Webseiten
Firmenwebseiten mit Next.js auf React-Basis: fertiges HTML für Google, schnelle Bedienung für Besucher.
Apps
Mobile Apps mit React Native: eine Codebasis für iPhone und Android, gebaut mit derselben Komponenten-Denkweise.
Onlineshops
Shops mit Filtern, Suche und Warenkorb, die ohne Neuladen reagieren und trotzdem bei Google gefunden werden.
