© vladvel/Shutterstock.com
React Native im Überblick

React kriegt Beine


Facebooks React-Framework liefert sich mit Angular einen Kampf um die Vorherrschaft im Bereich der Webframeworks. Das Entwicklerteam öffnete mit der Auslieferung von React Native zudem eine neue Front – das Produkt legte sich auch mit Teleriks NativeScript an.

Seit seinem Erscheinen durchlief React Native eine extrem aggressive Entwicklung: Waren die GUI-Stacks der beiden Plattformen anfangs komplett getrennt, so erfolgte mittlerweile eine – wenn auch nur teilweise – Standardisierung. Wer mit JavaScript kompetent umgehen kann und etwas Handarbeit nicht scheut, kann mit React Native Applikationen für Android, iOS und – inoffiziell – sogar die Universal Windows Platform erzeugen. Neben Smartphones und Tablets kommt Ihr Programm so sogar auf die Xbox One. Da Artikel zur Arbeit mit Android und iOS mittlerweile weit verbreitet sind, beginnt dieser mit Windows: Der Großteil der hier besprochenen Konzepte lässt sich allerdings auch auf die anderen beiden Plattformen übertragen.

Vorbereitendes

Wie die meisten anderen Cross-Plattform-Frameworks lebt auch React Native in der Node.js-Umgebung: Der erste Schritt zu Beginn der Arbeit mit React Native besteht darin, das unter [1] bereitstehende Installationspaket herunterzuladen und wie gewohnt zu installieren. Die folgenden Schritte erfolgen auf einer 64-Bit-Workstation mit Windows 10 1703 – ältere Versionen verhalten sich im Großen und Ganzen analog. Wer nicht unter Windows entwickeln möchte, öffnet [2] und klickt auf den Tab Building Projects with native Code. Das in früheren Versionen des Frameworks erforderliche schrittweise Herunterladen von React Na­tive entfällt neuerdings ersatzlos, da das Entwicklerteam mit create-react-native-app ein fertiges Paket zur Verfügung stellt. Es lässt sich mit dem npm-Kommando PS C:\Users\tamha> npm install -g create-react-native-app installieren.

Bei der Arbeit mit React Native ist es sinnvoll, ein an Eclipse und Co. erinnerndes Arbeitsverzeichnis anzulegen. Der Autor arbeitet in den folgenden Schritten mit C:\reactplace – wechseln Sie mit der PowerShell in den betreffenden Ordner, um die Erzeugung eines neuen Projektskeletts anzustoßen:

PS C:\reactplace> create-react-native-app SUSWinProject Creating a new React Native app in C:\reactplace\SUSWinProject. . . .

Wundern Sie sich nicht, dass das Produkt im Rahmen des ersten Starts einige zusätzliche Komponenten herunterlädt: Die Wege des Node Package Managers sind stellenweise unergründlich. Nach getaner Arbeit wird der in Abbildung 1 gezeigte Text ausgegeben.

hanna_reactnative_1.tif_fmt1.jpgAbb. 1: React Native ist einsatzbereit – der Download kann schon einmal eine Stunde in Anspruch nehmen

Im nächsten Schritt muss das Windows-spezifische Plug-in heruntergeladen werden. Dieses darf – anders als die Hauptteile von React Native – nicht in den globalen Assembly-Cache der Workstation und wird stattdessen im Projektunterverzeichnis installiert:

PS C:\reactplace> cd .\SUSWinProject\ PS C:\reactplace\SUSWinProject> npm install --save-dev rnpm-plugin-windows . . .

Wundern Sie sich nicht über Warnungen in Bezug auf das Fehlen des Haupt-React-Pakets. Viel wichtiger ist es, die Kommandozeilen-Utility im nächsten Schritt zum Erweitern des Projekts mit PS C:\reactplace\SUSWinProject> react-native windows zu animieren.

Kommt es bei der Abarbeitung des Kommandos zu einem Fehler der Bauart react-native : The term 'react-native' is not recognized as the name of a cmdlet, so müssen Sie die React Native Toolchain separat mithilfe des Befehls PS C:\reactplace\SUSWinProject> npm install -g react-native-cli herunterladen. Führen Sie react-native windows danach abermals aus, um die Generierung eines für Visual Studio verwendbaren Projektskeletts abzuschließen. Das erfolgreiche Durchlaufen führt zum in Abbildung 2 dargestellten Resultat.

hanna_reactnative_2.tif_fmt1.jpgAbb. 2: Die Generierung der Projektstruktur verlief erfolgreich

Als paralleles Ärgernis präsentiert sich ein kleines Problem in der von React Native generierten Projektstruktur: Zum Zeitpunkt der Drucklegung dieses Artikels wird nur Visual Studio 2015 unterstützt [3]. Der Downloadlink für ältere Versionen der IDE ist gut versteckt: Öffnen Sie [4] und scrollen Sie nach unten, um den Downloadlink zu aktivieren. Nutzer der kostenlosen Visual Studio Dev Essentials können den Web-Installer der vergangenen Version der IDE herunterladen: Nutzen Sie die Custom-Einstellung, um eine Basisversion von Visual Studio 2015 zu installieren. Die IDE beklagt sich bei installiertem Visual Studio 2017 darüber, dass einige Module schon am Platz sind und nicht nochmals heruntergeladen werden können; ignorieren Sie diesen Fehler.

Des Pudels Kern

Nach dem erfolgreichen Abarbeiten der Vorbereitungshandlungen – je nach Workstation und Internetverbindung können hier schon mal zwei Stunden draufgehen – ist es nun an der Zeit, React Native zu beschnuppern. Klicken Sie in Visual Studio auf File | Open | Project und wählen Sie die Datei windows\SUSWinProject. sln aus. Beim erstmaligen Laden eines React-Native-Projekts fordert Visual Studio das Herunterladen eines Windows-SDKs und der Universal Windows Utilitys an; stimmen Sie beidem zu, woraufhin abermals einige Zeit ins Land geht. Nach getaner Arbeit präsentiert sich die in Abbildung 3 gezeigte Solution-Struktur.

hanna_reactnative_3.tif_fmt1.jpgAbb. 3: Ein React-Native-Projekt besteht aus einer Gruppe von Unter-Solutions

ChakraBridge enthält eine Gruppe von Bibliotheken, die als Makler zwischen C++- und C#-Teilen agieren. Die Projekte ReactNative und ReactNative.Shared dienen als Repositories für den eigentlichen Frameworkcode, während das Projekt SUSWinProject den vom Entwickler bereitgestellten Code samt dem für die Ausführung notwendigen Harnisch bereitstellt.

Hands off!

Facebook weist in der Dokumentation an mehreren Stellen darauf hin, dass die drei Nebenprojekte im Rahmen von Updates des Frameworks überschrieben werden können. Änderungen daran sollten nur gemäß der unter [5] beschriebenen Vorgehensweise erfolgen.

Von besonderem Interesse ist hier eigentlich nur die Datei Main­Page. cs, die – für Windows-Universal-Applikationen seltsam – ohne Code Behind auskommt und die in Listing 1 dargestellte Struktur aufweist.

Listing 1

class MainPage : ReactPage { public override string MainComponentName{ get{ return "SUSWinProject"; } } }

Als Erstes findet sich eine Funktion, die den Namen des als Einspru...

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

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