React - Was kann das JavaScript Framework?

22.07.2022

React ist ein JavaScript-Framework bzw. eine Bibliothek für die Entwicklung von Benutzeroberflächen.

„Bibliothek“ ist in diesem Zusammenhang ein sehr passender Begriff:

In einer Bibliothek gibt es eine Auswahl von Büchern, die von Bibliothekaren sortiert wird. Wenn man ein Buch aus der Bibliothek braucht, kann man es einfach über das Bibliothekssystem finden und ausleihen. In einer JavaScript-Library gibt es zwar keine Bücher, dafür aber fertigen Code, auf den man zugreifen und in seinen Projekten verwenden kann.

Im Gegensatz zu kompletten Frontend Frameworks (wie z.B. Angular), die alles gebündelt mitbringen, ist React eine schlanke Bibliothek und verfolgt einen modularen Ansatz durch Auswahl und Einbindung weiterer Bibliotheken.

React vereinfacht Web-Entwicklung

Eine Webanwendung besteht aus Frontend (Client-Side) und Backend (Server-Side).

Frontend: Im Browser wird das Frontend als Benutzeroberfläche dargestellt. Also das, was man sieht und womit man interagiert.

Backend: Das Backend – also der Server hostet die Anwendung und bettet meist noch andere Infrastrukturen ein, wie bspw. eine Datenbank. Das Backend sendet nach Anfragen des Frontends Daten zurück, die von JavaScript interpretiert und aufbereitet werden können.

Um die Benutzeroberfläche einer Web-Anwendung zu programmieren, nutzt man die folgenden drei Technologien:

1. HTML: Gibt die Struktur der UI vor.

2. CSS: Fügt den HTML-Elementen Style (Farben, Abstände etc.) hinzu

3. JavaScript: Reagiert auf die User-Interaktion mit HTML-Elementen und löst weitere Prozesse aus

In der klassischen Webentwicklung wird JavaScript unterstützend in eine HTML-Datei geladen, die den View repräsentiert. Mit React hingegen erstellt man logische Einheiten aus einem Guss: Programmlogik und Views werden direkt in JavaScript definiert, und während des Build-Prozesses werden aus dem React Code letztendlich auch HTML-Elemente generiert. Als React-Entwickler:in profitiert man von diesem Automatismus und hat weniger Implementierungsaufwand.

Die Geschichte von React

React wurde maßgeblich von Facebook entwickelt und 2011 erstmals für den Newsfeed und später 2012 für Instagram eingesetzt. Im Mai 2013 wurde von Facebook angekündigt, React zukünftig als Open-Source-Projekt weiterführen zu wollen.
Anfangs war ein großer Kritikpunkt die verwendete Lizenz, die durch proprietäre und Facebook-spezifische Erweiterungen auffiel. Das ist jedoch nicht mehr der Fall und React steht seit September 2017 in der Version 16.0.0 unter der MIT-Lizenz zur Verfügung.

Das kann React: Single-Page-Apps

In einer Web-Anwendung gibt es verschiedene Ansichten oder Views. Interagiert der Anwender mit der UI – bspw. durch einen Mausklick-, kann sich dadurch die View ändern. Viele User assoziieren eine Änderung der View vielleicht mit einem Seitenwechsel. Das ist teilweise korrekt: Frühere Webanwendungen bestanden typischerweise aus mehreren verschiedenen Seiten. Wenn eine neue View angezeigt werden sollte, musste dafür eine neue Seite geladen werden.

Eine modernere Herangehensweise sind Single-Page-Applications (kurz: SPA). Eine SPA besteht aus verschiedenen Views, die alle in einer einzelnen Seite vorgeladen sind. In einer Multipage-Application sind alle Views einer Anwendung individuell in zu ladenden Seiten definiert. Klickt ein User zum Beispiel auf einen Button in der Navigationsleiste, müsste dafür eine neue Seite geladen werden, dessen Navigationsziel der Button repräsentiert.
Bei einer Single-Page-App ändert sich beim Klick auf diesen Button hingegen die aktive View dynamisch, das Laden einer separaten Seite entfällt.

Weniger DOM Manipulation durch den „Virtual DOM“

Das Modell von React verspricht durch die Konzepte des unidirektionalen Datenflusses und des „Virtual DOM“ den einfachen, aber trotzdem performanten Aufbau auch komplexer Anwendungen. React bildet typischerweise die Basis für SPAs, kann jedoch auch mittels Node.js serverseitig (vor-)gerendert werden.
Unsere Komponenten werden beim Rendern in das sogenannte Document Object Model (DOM) übersetzt. Jede Änderung des DOM sorgt dafür, dass der Browser CSS-Styles sowie HTML-Elemente neu berechnen muss.
Diese Berechnungen sind zeitaufwändig und kostenintensiv. Daher möchte man die Anzahl der DOM Manipulationen so gering wie möglich halten.
Die Idee von React: Wenn sich bloß ein bestimmter Ausschnitt der UI im Vergleich zum aktuell sichtbaren User Interface ändern soll, wird auch nur der entsprechende Teil neu gerendert.
Wie macht das React?
Mit der von Browsern bereitgestellten Web-API greift React auf das aktuelle DOM zu und erstellt daraus ein virtuelles DOM - eine im Browser Speicher angelegte Repräsentation des User Interfaces. Wenn es zu einer Änderung kommen soll, wird der aktuelle Zustand mit dem gewünschten Zustand verglichen, bevor das tatsächliche DOM geändert wird. React beauftragt den Browser nach dem Vergleich die betroffenen Bereiche des DOM nochmals zu rendern: Durch das bloße Neurendern eines Ausschnitts des DOMs kann ein echter Performancegewinn erreicht werden.

Komponenten in React

Komponenten sind ein wichtiger Bestandteil der UI und werden für deren Erstellung gebraucht.

Bei der React Entwicklung kommen zwei Arten von Komponenten zum Einsatz:

Klassenbasierte Komponenten
Funktionale Komponenten

Beide Arten von Komponenten haben unterschiedliche Anwendungsfälle und Vorteile. Dabei sind Funktionskomponenten statusfrei und die Klassen-Komponenten zustandsbehaftet. Außerdem unterscheiden sie sich in Syntax, Logik und einigen anderen entwicklungsbezogenen Aspekten. Allerdings erfährt der funktionale Ansatz zunehmend mehr Aufmerksamkeit und ist deshalb in neuen Projekten ratsam.

State – der aktuelle Status der Anwendung

Ein wichtiger Teil von React ist der Umgang mit dem sogenannten State, dem aktuellen Status der Anwendung. Da der Zustand per Definition veränderbar sein muss, ist es besonders interessant, wie ein UI-Framework oder eine UI-Bibliothek mit diesem Thema umgeht.

In React gibt es für diesen Zweck nicht nur den Zustand als Objekt, sondern auch bestimmte Funktionen, um diesen Zustand zu ändern. Die Verwendung dieser Funktionen ähnelt der Verwendung des Command-Patterns.
Es wird jedoch nicht empfohlen, State in jeder Komponente beizubehalten. Stattdessen wird oft zwischen Stateless- und Stateful- Komponenten unterschieden, wobei erstere nur zum Rendern von Daten dienen, aber keine eigene Logik haben. Es existiert nur in Stateful- Komponenten, die tendenziell höher in der UI-Hierarchie stehen.
Daher wird der Status in der Hierarchie der UI-Komponenten von oben nach unten weitergegeben. Die niedrigste Komponente löst jedoch Ereignisse als Reaktion auf Benutzeraktionen aus, die wiederum den Zustand von unten nach oben weitergeben – und schließlich Zustandsänderungen verursachen, die sich wiederum in der Hierarchie nach unten ausbreiten.

Nikolas Schmidt

Entwickler bei eyeworkers
kontakt@eyeworkers.de
+ 49 721 183960