© ronstik/Shutterstock.com, © S&S Media
Teil 1: Ein praxisnaher Einstieg in die Webentwicklung mit React

Moderne Webentwicklung mit React


React gehört zu den bekanntesten JavaScript Frameworks zum Erstellen von Webapplikationen. Mit React Native kann man native Apps für Android und iOS erstellen. Wer jahrelang unter C# und Windows programmiert hat, wird zum Beispiel gern mit TypeScript arbeiten und kann das mit React auch. Begleiten Sie uns auf dem Weg zu Ihrer eigenen React-Applikation.

In der heutigen Zeit sind moderne, schicke und interaktive Applikationen im Webbrowser gefragt, wie sie uns große Unternehmen wie Facebook, Amazon oder Google bereitstellen. Bekannte Beispiele sind das elektronische Postfach mit Kalender, Notizfunktion und Dokumentspeicher, das soziale Portal als Medienspeicher und Austauschplattform oder die Video-on-Demand-Applikation, die bewegte Bilder zeigt, wann und wo immer man es möchte oder das klassische Onlineshoppingportal. Aber auch im Unternehmen sind heute interaktive Anwendungen mit einer umfassenden grafischen Darstellung State of the Art. Sie sollen nicht nur auf dem Desktoprechner laufen, sondern als geräte- und plattformübergreifende Applikationen auch auf dem Tablet oder Smartphone. Der Browser wird zur Laufzeitumgebung für die Anwendungen. Aus der ehemaligen Desktopanwendung wird die moderne Single Page Application. Der Monolith, bestehend aus einer Kombination aus User Interface, Geschäftslogik und Datenbankschicht, wird in einzeln nutzbare Microservices gesplittet. Die einst ressourcenverschlingende serverseitige Geschäftslogik wird als Backend Service über REST und ähnliche Schnittstellen zur Verfügung gestellt.

Viele Entwickler sind verwirrt von den zahllosen Möglichkeiten und Anforderungen, diese Webapplikationen umzusetzen. In diesem Zusammenhang stellen sich die folgenden Fragen:

  • Welches Framework soll verwendet werden?

  • Auf welchem technologischen Ansatz basiert es?

  • Welcher Teil der Fachlogik soll im Client (Browser) und welcher auf dem Server implementiert werden?

  • Wie wird schnell und einfach eine ansprechende Benutzeroberfläche gestaltet und etabliert?

  • An welcher Stelle werden Daten gehalten oder vielleicht auch nur zwischengespeichert?

  • Wird noch ein klassischer Applikationsserver benötigt?

  • Kann man die entstandene Webapplikation in eine mobile App umwandeln?

Antworten auf diese Fragen bieten viele Technologien und Frameworks, mit denen man eine Webapplikation erstellen kann. Dabei darf nicht vergessen werden, dass deren technische Basis weiterhin HTML (Struktur), CSS (Design, Layout) und Interaktion (JavaScript) ist. JavaScript steht als browserbasierte Skriptsprache im Mittelpunkt. Sie wurde 1995 zusätzlich zu HTML und CSS für die Einbindung von Benutzerinteraktionen im Browser entwickelt und ist heute das Rückgrat aller modernen Webanwendungen. Dieser Artikelreihe betrachtet React als eine der derzeit populärsten Möglichkeiten, Webanwendungen im Browser und für mobile Anwendungen zu entwickeln, das bestätigen aktuelle Umfragen. Kein anderes Webframework wird aktuell so häufig eingesetzt. Das Unternehmen Facebook, das hinter der Entwicklung des Frameworks steht, setzt React für seine eigenen Social-Media-Anwendungen wie Facebook, Instagram und WhatsApp ein. Grund genug, um in React einzusteigen und sich intensiv mit der Vorgehensweise vertraut zu machen, Webapplikationen auf dieser Basis zu erstellen.

Was genau ist React?

Oft wird React [2] in einem Zug mit weiteren Frameworks zur Entwicklung von Webapplikationen genannt, zum Beispiel Vue.js und Angular. Im Gegensatz zu diesen Frameworks ist React eine Komponentenbibliothek für JavaScript. Sie wurde ursprünglich im Jahr 2013 von Facebook als Möglichkeit der modularisierten Verbesserung für Benutzerinteraktionen von deren Webapplikation entwickelt. Heute bietet die Bibliothek umfassende Möglichkeiten, Webanwendungen effizient, intuitiv und sicher zu implementieren. Im Gegensatz zu Angular bietet React als Bibliothek keine typischen Funktionen eines Frameworks wie HTTP-Abfragen, Dependency Injection, Internationalisierung oder Formularvalidierung. Dennoch ist React in Form seines Komponentenansatzes flexibel genug, um all diese und weitere Funktionen durch spezifische Bibliotheken zu ermöglichen. Erweiterungen, zum Beispiel die bekannte Bibliothek Bootstrap zur Gestaltung von webbasierten User Interfaces, können in React-Applikationen eingebunden werden. Eine Zusammenarbeit ist daher immer möglich. Aktuell liegt React in Version 16.13 vor.

In Webapplikationen auf der Basis von React erstellt der Entwickler sogenannte React Components – funktionale Bausteine, die in ihrer Gesamtheit die Funktion der Webapplikation ausmachen. Damit das funktioniert, enthält React ein Rendering-System, das den DOM-Baum der darunterliegenden Webseite, zum Beispiel als Single Page Application, manipuliert und so Inhalte auf der Seite hinzufügen oder anpassen kann. Typische Komponenten einer React-App sind Navigationsleisten, Eingabefelder, Tabellen oder eine Suchbox (Abb. 1).

krypczyk_mittmann_react_1_1.tif_fmt1.jpgAbb. 1: Typische Komponenten einer React-Applikation

Jede Komponente besteht intern aus Eigenschaften (Properties) und einem Zustand (State). Die Eigenschaften definieren die Komponente, z. B. ihr Aussehen und ihre Funktion. Der Zustand entspricht den Daten, die ein Nutzer in der Komponente eingegeben oder geändert hat oder die von einem serverseitigen Dienst für die Komponente bereitgestellt und dargestellt werden. Die Komponente besitzt einen eigenen, internen Lebenszyklus, dessen Phasen das Auslösen von Ereignissen und die Änderungen des Zustands erlauben (Abb. 2).

krypczyk_mittmann_react_1_2.tif_fmt1.jpgAbb. 2: Komponentenbasierter Aufbau einer React-Webapplikation

Komponenten werden in einer Baumstruktur angeordnet, d. h. eine React-Komponente kann weitere Komponenten einbinden und auch steuern. Der Komponentenansatz von React lebt durch den Einsatz von Bibliotheken, die entweder von React selbst oder von Drittanbietern bereitgestellt werden. Die Kernbibliothek von React definiert das beschriebene Komponentenkonzept, die Bibliothek react-dom definiert beispielsweise einen Renderer, der den DOM-Baum einer Webseite verändern kann. Die Bibliothek react-native kann im Unterschied dazu eine Komponente innerhalb einer mobilen App darstellen. Ein Drittanbieter stellt beispielsweise eine Komponentenbibliothek für weitere Steuerelemente für die Webseite bereit.

Technologiestack

Um Webapplikationen mit React zu erstellen, muss man React in einen ausgewählten Technologiestack einbinden. Wie bei der Webentwicklung üblich, hat man hier große Freiheiten und viele Variationsmöglichkeiten, jedoch kann man sich für den Einstieg an etablierten Empfehlungen orientieren. Material UI [3] ist eine solche Drittanbieterbibliothek, die Googles Material-DesignFramework in React zur Verfügung stellt. Googles Philosophie hinter dem Design-Framework ist es, eine moderne und durchgängige Nutzererfahrung in Webapplikationen zu ermöglichen. Google setzt mit den eigenen Webanwendungen und Apps auf diesen Designansatz. Material UI ist eine Sammlung von CSS- und JavaScript-Bibliotheken, die gebündelt in den Material-UI-Bibliotheken zur Nutzung in React aufbereitet werden. Um React-Komponenten möglichst effizient, intuitiv und fehlerfrei in JavaScript zu erstellen, kann man statt JavaScript auf TypeScript setzen [4].

Aufsetzen der Entwicklungsumgebung

Die Entwicklung ist auf nahezu jedem System, so unter Windows, Linux oder macOS möglich. Wie bei JavaScript-basierten Webanwendungen stützt sich die Entwicklung auf eine lokal installierte Node.js-Laufzeitumgebung. Node.js ist eine Sammlung von Java-Script-Bibliotheken, die eine server- und clientseitige Ausführung von JavaScript-Programmen ermöglicht. Node.js basiert auf der V8-Engine von Google Chrome, die auch im gleichnamigen Browser verwendet wird. Node.js liegt derzeit in der Releaseversion 13 vor. Für Windows kann eine 32- oder 64-Bit-Variante unter [5] heruntergeladen werden. Es empfiehlt sich der Download als Windows Installer, der auch gleich den Node Package Manager (npm) installiert, einen Paketmanager für JavaScript-Bibliotheken, der für die Installation von...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang