In den vergangenen Jahren hat sich die UI-Bibliothek React zu einer ernst zu nehmenden Alternative zu anderen etablierten Webframeworks wie Angular, Ember oder Ext JS entwickelt. Steht heute die Entscheidung zur Auswahl einer Lösung an, ist React zumindest auf einem der vorderen Plätze. Doch warum ist diese leichtgewichtige Bibliothek eigentlich so erfolgreich?

Der Erfolg von React liegt einerseits an dessen Performance, die seine Konkurrenten alt aussehen lässt, andererseits aber auch an einem Ökosystem, das sich um React entwickelt hat und mit dem sich selbst die umfangreichsten Applikationen umsetzen lassen. Auf den folgenden Seiten erfahren Sie, wie Sie Ihr Frontend mit React strukturieren können, worin das Geheimnis der Leistungsfähigkeit der Bibliothek liegt und welche Änderungen sich durch die Neuentwicklung des Kerns von React ergeben.

Die ersten Schritte

Bevor Sie sich mit React beschäftigen, sollten Sie über eine funktionierende Entwicklungsumgebung verfügen, mit der Sie mit dem Framework experimentieren und auch eigene Applikationen umsetzen können. Zugegebenermaßen ist dies mit React eine recht einfache Aufgabe. Wie für so vieles, gibt es auch für den Start mit React ein Werkzeug. Es trägt den Namen Create React App, ist als Node-Paket umgesetzt und als Open-Source-Projekt im Rahmen des Facebook-Inkubators entstanden.

Um mit React arbeiten zu können, benötigen Sie also lediglich eine Installation von Node.js auf Ihrem System. Die Node.js-Plattform können Sie sich entweder als Installerpaket von [1] herunterladen oder über den Paketmanager Ihres Systems installieren. Für den Umgang mit Abhängigkeiten kann entweder der in Node.js enthaltene Node Package Manager oder der von Facebook entwickelte Paketmanager Yarn verwendet werden. Beide Werkzeuge greifen auf das npm Repository zu und unterscheiden sich lediglich etwas in ihrer Verwendung und ihren internen Mechanismen. Mit dem Kommando yarn add -g create-react-app installieren Sie das Kommandozeilenwerkzeug auf Ihrem System. Der Befehl create-react-app todo-list erzeugt für Sie im aktuellen Verzeichnis einen neuen Unterordner mit dem Namen todo-list. Dieser enthält eine neue, voll funktionsfähige React-Applikation (Abb. 1).

Abb. 1: Erzeugen einer React-Applikation

Das Kommandozeilenwerkzeug installiert alle erforderlichen Abhängigkeiten wie React selbst, das Paket ReactDOM und das Hilfspaket react-scripts. Außerdem wird die Projektstruktur erzeugt. Sie besteht aus den allgemeinen Konfigurationsdateien im Wurzelverzeichnis wie einer .gitignore-Datei, der package.json-Datei, README.md und der yarn.lock-Datei. Das public-Verzeichnis beinhaltet mit der index.html den Einstieg in die Applikation. Die eigentliche Applikation liegt im src-Verzeichnis der Applikation. Hier werden Sie auch die meiste Zeit während der Entwicklung verbringen.

Die mit dem Kommandozeilenwerkzeug erzeugte Applikation nutzt webpack als Bundler und Babel als JavaScript-Compiler-Plattform. webpack sorgt dafür, dass die Applikation für die Entwicklung problemlos in viele kleine Dateien aufgeteilt werden kann und diese für ein Release zu wenigen Dateien zusammengefügt werden. Außerdem stellt Ihnen webpack mit dem dev-server eine Infrastruktur für die Entwicklung bereit. Der dev-server arbeitet dabei wie ein Webserver, der Ihre React-Applikation ausliefert. Änderungen an den Dateien der Applikation werden erkannt, und die Applikation wird entsprechend neu gebaut und im Browser neu geladen, sodass die Änderungen sofort sichtbar werden. Der Babel-Compiler hilft bei der Übersetzung von React-spezifischen Syntaxelementen und ermöglicht die Verwendung des ECMAScript-Modulsystems zur Verwaltung von Abhängigkeiten.

Das beim Set-up installierte Paket react-scripts stellt eine Reihe von Skripten zur Verfügung, die den Umgang mit der Applikation weiter erleichtern. Mit dem Kommando yarn start starten Sie den webpack-dev-server für den Entwicklungsbetrieb. Der Befehl yarn build erzeugt ein Paket aus Ihrer Applikation, das Sie für den Produktivbetrieb verwenden können.

Eine kurze Einführung

Werfen Sie einen Blick in die index.js-Datei im src-Ordner, wird Ihnen in der vorletzten Zeile schon die erste Besonderheit von React auffallen. Der Aufruf von ReactDOM.render sorgt dafür, dass die Applikation in den angegebenen DOM-Knoten eingebunden wird. ReactDOM ist ein Renderer für React. Er kann je nach Umgebung ausgetauscht werden, sodass eine React-Applikation nicht nur im Browser, sondern auch serverseitig oder nativ auf mobilen Geräten gerendert werden kann.

React verfolgt bei der Erzeugung der grafischen Oberfläche von Webapplikationen einen deklarativen Ansatz. Sie beschreiben mit JSX, einer eigens für React entwickelten Syntaxerweiterung, den Aufbau Ihres Frontends. JSX bricht mit dem etablierten Muster, nach dem Markup und Applikationslogik strikt getrennt werden müssen. Im Fall von React werden die Struktur und Teile des JavaScript-Quellcodes vor allem aus Performancegründen wieder vermischt. In Listing 1 sehen Sie die Verwendung einer einfachen Komponente in React.

import React from 'react';
import ReactDOM from 'react-dom';
 
function App() {
  return <div>Hello World!</div>;
}
 
ReactDOM.render(<App />, document.getElementById('root'));

Eine React-Applikation besteht wie jede Webapplikation aus einem Baum von DOM-Knoten. Zusätzlich zu den DOM-Knoten können Sie in React selbst Komponenten definieren. Dabei handelt es sich um eine Struktur, die Eigenschaften entgegennimmt und eine Struktur von Elementen zurückgibt. Was zunächst abstrakt klingt, erweist sich während der Entwicklung als ein sehr hilfreiches Konstrukt, um auch komplexe Frontends zu modellieren. Komponenten stellen wiederverwendbare Bausteine dar, aus denen sich eine Applikation zusammensetzt. Die Eigenschaften, die an eine solche Komponente übergeben werden, werden als Props bezeichnet. Wie bei Funktionsargumenten üblich, sollten diese nicht durch die Funktion, in diesem Fall durch die Komponente, verändert werden. Mithilfe der Props können Informationen von den Elternknoten an ihre Kindknoten durch den Baum gereicht werden.

Zur besseren Unterscheidung von DOM-Knoten und Komponenten hat sich als Konvention durchgesetzt, den Namen von Komponenten mit einem Großbuchstaben und den von DOM-Knoten mit einem Kleinbuchstaben zu beginnen. Da JSX case-sensitive ist, müssen Sie die Schreibweise beachten, da Sie ansonsten einen Compilerfehler erhalten.

Zur Definition von Komponenten stehen Ihnen in React mehrere Wege zur Verfügung. Die einfachste Variante ist die Erzeugung funktionaler Komponenten.

Funktionale Komponenten

Eine funktionale Komponente besteht aus einer benannten Funktion, die einen Baum von Elementen zurückgibt. Ein Element steht dabei...