Sebastian Springer MaibornWolff GmbH

React ist in vielen Bereichen bereits ein ernstzunehmender Konkurrent von Angular und hat Angular in einigen Bereichen sogar schon überholt.

In den vergangenen Jahren hat sich die UI-Bibliothek React zu einer ernstzunehmenden Alternative zu anderen etablierten Webframeworks wie Angular, Ember oder extJS 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. Zum anderen aber auch an einem Ökosystem, das sich um React entwickelt hat und mit dem sich selbst die umfangreichsten Applikationen umsetzen lassen. Dieser Artikel ist der erste in einer Serie, die sich mit React und den Bibliotheken und Werkzeugen rund um die Frontend-Bibliothek von Facebook beschäftigen. 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.

Artikelserie

Teil 1: React – ein Blick unter die Haube

Teil 2: Redux – mehr Struktur für eine React-Applikation

Teil 3: Flow – Typsicherheit auf React-Art

Teil 4: React Native – native Applikationen mit React und Redux entwickeln

Teil 5: React testen – gute und stabile Applikationen entwickeln

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 eine recht einfache Aufgabe mit React. Wie für so viele Aufgaben, 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 Installer-Paket 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 die Hilfspakete node-pre-gyp und react-scripts. Außerdem wird die Projektstruktur erzeugt. Diese 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.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 6.17 - "React"

Alle Infos zum Heft
579810577Die UI-Bibliothek React im Überblick
X
- Gib Deinen Standort ein -
- or -