React

02Wie es funktioniert

In React wird eine Ansicht aus Komponenten zusammengesetzt. Eine Komponente ist ein kleines, abgeschlossenes Stück der Oberfläche: ein Button, ein Suchfeld, eine Rechnungstabelle, eine Kundenkarte. Größere Komponenten bestehen aus kleineren, und auch eine ganze Seite ist eine Komponente.

Jede Komponente beschreibt, wie sie mit den Daten aussehen soll, die sie bekommt. Eine Kundenkarte sagt etwa: Name fett, darunter die Stadt, und ein rotes Etikett, wenn eine Rechnung überfällig ist. Diese Beschreibung schreibt der Entwickler einmal, Anweisungen zum Aktualisieren der Ansicht schreibt er keine.

Ändern sich die Daten, ermittelt React, welche Teile der Ansicht betroffen sind, und aktualisiert nur diese. Wird eine Rechnung als bezahlt markiert, verschwindet das rote Etikett von dieser einen Karte, und der Rest der Seite bleibt, wie er ist. Deshalb wirken React-Anwendungen auch dann schnell, wenn eine Ansicht Hunderte Datensätze zeigt.

03Ein Beispiel aus einer Geschäftsanwendung

Stellen Sie sich ein Ticketsystem für ein Support-Team vor. Die Ticketliste, die Detailansicht eines Tickets und das Dashboard zeigen den Status eines Tickets jeweils als kleines farbiges Etikett. In React ist dieses Etikett eine Komponente, die an allen drei Stellen verwendet wird.

Führt das Team später einen fünften Status ein, etwa „Wartet auf Kunde“, ändert ein Entwickler diese eine Komponente. Der neue Status erscheint dann überall in der richtigen Farbe. Genauso bei einer Datumsauswahl, einem Betragsfeld oder einem Bestätigungsdialog: einmal gebaut, einmal getestet, überall genutzt.

Komponenten merken sich außerdem ihren eigenen kleinen Zustand. Eine Tabelle weiß, wie sie sortiert ist und welche Zeilen ausgewählt sind, ohne dass der Rest der Seite das wissen muss.

04Alternativen

React hat einige etablierte Mitbewerber. Mit jedem davon lässt sich eine gute Webanwendung bauen:

• Vue, erschienen 2014 und von einem unabhängigen Open-Source-Team entwickelt. Gilt als leicht zu lernen.
• Angular, entwickelt von Google. Ein vollständiges Framework mit vielen eingebauten Teilen, verbreitet in großen Unternehmen.
• Svelte, ein jüngerer Ansatz, der mehr Arbeit erledigt, bevor der Code den Browser erreicht.

05Warum wir React gewählt haben

React ist die verbreitetste dieser Bibliotheken. Für Sie als Kunde hat das handfeste Folgen. Viele Entwickler kennen React, der Code kann also auch von jemand anderem gepflegt werden, wenn Sie das einmal wollen. Für Tabellen, Diagramme oder Datumsauswahl gibt es fertige, gut getestete Komponenten, was Zeit und Geld spart. Und Probleme, die auftauchen, hat meist schon jemand gelöst und beschrieben.

React arbeitet außerdem eng mit Next.js zusammen, dem Framework, auf dem wir aufbauen, und mit TypeScript, das prüft, ob jede Komponente die Daten bekommt, die sie erwartet.

06Worauf Sie achten sollten

React selbst kostet nichts. Die Kosten einer React-Anwendung stecken in der Arbeit, sie zu bauen, und deren Qualität ist unterschiedlich. Diese Punkte sagen viel darüber aus:

• Werden Komponenten wiederverwendet, oder wird derselbe Button auf jeder Seite leicht anders neu gebaut?
• Lässt sich die Anwendung mit der Tastatur und mit Screenreadern bedienen? React ermöglicht das, aber jemand muss es umsetzen.
• Wie viel Code muss der Browser herunterladen? Zu viele Zusatzbibliotheken machen den ersten Seitenaufruf langsam.
• Ist die React-Version aktuell? Alte Versionen laufen weiter, aber ein spätes Update wird mit jedem Jahr teurer.

07Wie wir es nutzen

Jede Ansicht, die wir bauen, besteht aus React-Komponenten in TypeScript. Jedes Projekt beginnt mit wenigen Grundbausteinen wie Buttons, Formularfeldern, Tabellen und Dialogen in einem einheitlichen Design. Daraus setzen wir die Seiten zusammen. Die Anwendung bleibt so einheitlich, und spätere Änderungen gehen schnell.

In unseren Projekten läuft React innerhalb von Next.js. Viele Komponenten werden auf dem Server vorbereitet, die Seite kommt fertig im Browser an, und nur die interaktiven Teile brauchen dort JavaScript. Jede vorgeschlagene Änderung daran durchläuft die Typprüfung und die automatischen Tests, bevor sie übernommen werden kann.

Häufige Fragen