Hello, React!

Das JavaScript-Ökosystem ist in den letzten Jahren schier explodiert. Mittlerweile geht die offizielle npm-Registry auf die 500.000 Packages zu, Tendenz steigend, und tagtäglich werden neue Frameworks und Bibliotheken veröffentlicht. Manche davon haben die Halbwertszeit eines durchschnittlichen Milchproduktes. Andere wiederum schlagen hohe Wellen und haben nachhaltigen Einfluss auf die Community.

Eines dieser revolutionären Projekte ist React, die beliebte UI-Bibliothek von Facebook. Mithilfe derer lassen sich anspruchsvolle Benutzeroberflächen auf deklarative Art und Weise entwickeln. So lässt sich viel Komplexität vermeiden. Das Ergebnis ist Code, der sich gut pflegen lässt.

 

React funktioniert nach dem Baukastenprinzip und setzt kleine, unabhängige UI-Komponenten zu größeren Teilen zusammen. Jede Komponente definiert dabei eine klare Schnittstelle. Das macht sie wiederverwendbar und ermöglicht das Testen in Isolation.

Des Weiteren gibt React vor, wie Komponenten untereinander zu kommunizieren haben: Daten fließen nur in eine Richtung, von oben nach unten. Das schafft Klarheit und vermeidet die Komplexität, die mit Spaghetti-Code oder kaskadierenden Updates einhergeht.

In React-Anwendungen wird die gesamte Benutzeroberfläche via JavaScript beschrieben. Das Entwickler-Team von Facebook hat dafür eine HTML-ähnliche Syntax namens JSX geschaffen, die sich direkt im JavaScript-Code verwenden lässt:

 

ReactComponent

 

Was sich anfangs befremdlich anfühlen mag, entpuppt sich schnell als gutes Design mit hoher Kohäsion. „Separation of concerns“ heißt schließlich nicht, nach unterschiedlichen Technologien zu trennen (HTML und JavaScript), sondern nach unterschiedlichen Belangen (verschiedene Komponenten). So bleibt zusammen, was zusammengehört, und getrennt, was getrennt gehört.

Damit all das am Ende im Browser ausgeführt werden kann, muss ein entsprechender Build-Prozess für die Anwendung aufgesetzt werden. In der Community sind vor allem Babel und Webpack die Werkzeuge der Wahl. Gemeinsam mit React und modernen JavaScript-Features aus ES2015+ entsteht so ein mächtiger Stack zur Entwicklung anspruchsvoller Webanwendungen.

 

Ich lade Sie herzlich ein, während der Developer Week an meinem Workshop zu React teilzunehmen:

„Einführung in React“

29.06.2017, 13:30 – 17:30 Uhr

 

Sie lernen die Grundlagen und Konzepte von React kennen und sind danach in der Lage, ein Projekt mit React, Webpack, Babel und ES2015+ aufzusetzen. Ich freue mich auf Sie!