© Liashko/Shutterstock.com
Entwickler Magazin
React - ein Blick unter die Haube

Auf die Plätze, fertig, React!

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?

Sebastian Springer


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 Kommandozeile...

Entwickler Magazin
React - ein Blick unter die Haube

Auf die Plätze, fertig, React!

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?

Sebastian Springer


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 Kommandozeile...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang