React Native Tutorial

In diesem React Native Tutorial zeige ich was man alles benötigt um mit JavaScript und dem React Native Framework eine Android App zu bauen. Mit diesem Ansatz erstellt man eine App einmal unabhängig der Plattform und kompiliert diese in native Android bzw. iOS Apps.

React Native Tutorial

In den letzten Wochen habe ich mich intensiv mit der Frontend Entwicklung mit JavaScript beschäftigt und mir dabei besonders React vorgenommen. Das Framework ist sehr einfach zu erlernen und bietet alles um professionelle Webseiten und SPAs (Single Page Application) zu erstellen. Ganz nebenbei gibt es mit React Native noch eine Möglichkeit, das einmal erlernte React Wissen auch dafür einzusetzen, um mobile Android oder iOS Apps mit JavaScript zu entwickeln. Ich zeige in diesem Tutorial was man alles braucht und wie das funktioniert.

Vorbereitung

Die folgende Aufzählung der Vorarbeiten sind auf der React Native Homepage nachzulesen. In meinem Fall hat genau dieser Ablauf funktioniert:

1. IDE installieren
   Für React Native benötigt man keine spezielle IDE, ich verwende für das Tutorial Visual Studio Code. Der Editor ist frei verfügbar und auf allen Systemen (Windows, Linux und MacOS) verfügbar.
2. Android Studio installieren
   Das um und auf bei der Android Programmierung ist das Android Studio. Dieses ist auf der Webseite als Download frei verfügbar. Die IDE selber benötigen wir für React Native nicht, die IDE kommt aber mit allen für uns nötigen Tools. Wir benötigen die SDKs und die VMs um die App zu testen. Später kann man mit dem Android Studio die App in den Android Store bringen. Mein Tipp: Nach der Installation die IDE einmal starten und ein neues Java Projekt anlegen. Viele Komponenten werden erst dann nachinstalliert.
3. Umgebungsvariablen setzen
   Für die Entwicklung sind einige Umgebungsvariablen  zu setzen. Unter Windows findet man den Dialog am einfachsten über die Suche (Screenshot von Windows 11):
   Die erste Variable heißt ANDROID_HOME und zeigt in den SDK Ordner im Benutzerverzeichnis von Windows. Der Name meines Benutzers ist bei dem folgenden Screenshot verpixelt, dort den eigenen lokalen Benutzer einsetzen.
   Als nächstes muss die Pfad Variable um die Platform Tools von Android erweitert werden. Siehe dazu die letzte Zeile des „Umgebungsvariable bearbeiten“ Dialogs.
   
   Die Änderungen greifen erst nach einem Neustart des Prozesses. Ob die Änderungen greifen kann man deshalb recht einfach in einem neu geöffneten PowerShell Terminal mit dem Befehl

   Get-ChildItem -Path Env:\

   prüfen.

4. SDK installieren
   Android Studio bietet die Möglichkeit SDKs nachzuinstallieren. Über den SDK Manager findet man alle aktuell auf dem System installierte SDKs und es lassen sich alle anderen SDKs auch installieren. Die SDKs benötigen einiges an Speicher, es ist zu empfehlen eine 1-2 Generationen ältere Version für das Entwickeln zu installieren. Erst für das Testen benötigt man mehr, das übernimmt dann aber hoffentlich ein Tester…
5. Test Android VM erstellen
   Im Tools Menü findet man mit dem AVD Manager ein Tool in dem man virtuelle Testgeräte erstellen kann. Diese VMs stellen ein beliebiges Android Gerät dar. Es gibt vorgefertigte Presets von Google Geräten (Pixel und Nexus), es lassen sich aber jegliche Konfigurationen von Hardware und Software erstellen. Da eine VM um einen GB Speicher benötigt reicht für den Entwickler meist ein repräsentatives Gerät, der Tester erstellt sich eine Reihe von Konfigurationen. Alternativ kann man auch ein physisches Gerät an den Rechner anschließen.
6. aktuelle Version von Node JS installieren
   Für die Installation von NPM Paketen verwenden wir die Node.js Tools. Ein JavaScript entwickler hat Node.js üblicherweise bereits installiert. Falls nicht gibt es auf der Node.js Download Seite die aktuelle Version. Auch für jedes erdenkbare Betriebssystem.

Projekt vorbereiten

1. Entwicklungsumgebung starten (optional)
   Ich lege mir für ein neues Projekt einen Ordner im Dateisystem aus und wähle direkt von dort aus dem Kontextmenü die Option
2. React-native-cli installieren
   React-native-cli ist ein hilfreiches Tool um die Entwicklung einer React Native App effizienter voranzutreiben. Ich installiere das Paket mit folgendem Befehl:

   npm i -g react-native-cli

   Öffne dazu ein Terminal (CMD, PowerShell oder Windows Terminal) und gibt das NPM Kommando ein. Dabei wird das react-native-cli Paket global (-g) installiert und ist ab sofort über Node.js von der Konsole aufrufbar. Ich verwende für die Kommandos das in Visual Studio Code integrierte PowerShell Terminal. Dann brauche ich die IDE für diese Arbeiten nicht verlassen.

3. ein neues Projekt erstellen
   Mit folgendem Befehl wird ein Template Projekt angelegt. Ein Blueprint von dem man weg arbeiten kann. Dieses ist sehr umfangreich und bietet eventuell auch Dinge die man nicht braucht.

   react-native init project

   Als Anfänger sollte man sich von der großen Anzahl an Konfigurationsdateien und Source Code Dateien erschrecken lassen.

Implementieren und testen

Die erste Beispiel-App ist nun bereits fertig. Keine einzige Zeile Code musste bisher geschrieben werden. Zeit die App zu testen. Doch wie? Man benötigt nun das zuvor in Android Studio angelegten virtuelle Android Gerät. Sofern noch nicht konfiguriert ist nun die richtige Zeit. Ich habe mir ein Pixel 4 mit einem aktuellen Android 11 erstellt. Über den Play Button lässt sich diese virtuelle Gerät starten. Android Studio kann nun geschlossen werden, der Emulator läuft weiter…

Zeit die App auszuprobieren. Der Befehl

react-native run-android

startet aus der IDE nun den build Prozess. Danach wird die App automatisch auf das verfügbare Gerät deployed (physisches Gerät oder wie hier der Emulator) und dort gestartet. Bei mir sieht das nach einigen Sekunden Wartezeit so aus:

Los gehts! Nun kann man programmieren. Die ersten Schritte werden von der Beispiel-App auch bereits vorgeschlagen. Am besten die App.js Datei öffnen, einen der Strings dort ändern, speichern und im Emulator 2 Mal „r“ auf der Tastatur drücken. Schon ist die Änderung sichtbar. Sollte ein Fehler passieren, dann wird dieser mit genauer Beschreibung auf dem Emulator ausgegeben.

Probleme und Lösungen

Beim ersten Testlauf meines Projekts bin ich in einen nicht dokumentierten Fehler gelaufen. Beim Start des Emulators bricht der Vorgang mit der Fehlermeldung:

ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.

ab. Was tun?

Die Konsole gibt gleich die Lösung mit an, man muss die JAVA_HOME Umgebungsvariable setzen. Nur auf welchen Pfad? Hat man Android Studio mit den Standardeinstellungen installiert, dann findet man im Instalationspfad auch die Java Runtime:

C:\ProgramFiles\Android\Android Studio\jre

Nach einem Neustart des Terminals (bzw. von Visual Studio) ist diese Variable bekannt und die App kann im Emulator ausgeführt werden.

Fazit

Mit React.js und Android Erfahrung ist der erste Kontakt mit React Native sehr intuitiv. Nach einigen Codezeilen ist man drin und möchte sofort probieren was alles möglich ist. Für mich ist React Native der bisher einfachste Einstieg um schnell eine App zu schreiben. Neben der kurzen Eingewöhnung ist der größte Benefit, dass bereits per default sowohl Android als auch iOS unterstützt werden. Man hat sofort und ohne weiteres Wissen auf der jeweils anderen Plattform eine fertige App. Im besten Fall muss man nur noch Details anpassen.