React-Native Getting Started

Ich möchte eine React-Native Reihe starten. Letztlich getrieben, dass die meisten Artikel dich ich gefunden habe einfach nicht mehr dem aktuellem Stand entsprechen. Daher wollte ihr hier eine aktuellere ins Leben rufen. Letztlich bietet React Native vielerlei Möglichkeiten eine native App zu schreiben. Im ersten Teil möchte ich eingehen, wie man am besten seine Umgebung einrichtet.

Node.js und npm einrichten

Node.js stellt eine Umgebung dar, in der JavaScript lauffähig gemacht wird. npm wiederum ist der dazugehörige Paketmanager. Unter Windows könnt ihr euch die Executable auf dessen Homepage besorgen. In Linux und WSL könnt ihr dies mittels euren Paketmanager der Wahl. In Ubuntu befindet sich jedoch nur die Version 10 im Repo: 

apt install nodejs

Wenn jedoch eine neuere Version installiert werden soll folgt dieser Anleitung.

Überprüfen, ob die Installation sauber erfolgt ist könnt ihr mittels dieser Kommandos:

node --version
npm --version

Android Emulator einrichten

Die Installationsdateien findet ihr hier. Wichtig ist lediglich, dass ihr die gewünschte SDK installiert für die ihr entwickeln möchtet. Das ist aber auch noch im Nachhinein möglich unter Configure -> SDK Manager. Als nächstes müsstet ihr noch die Umgebunsvariablen setzen.

WSL:

• SDK installieren Diese sind hier erhältlich. Unter Command line tools -> Linux
• Entpacken und den Ordner tools nach ~/Android/SDK/tools ablegen. Falls der Pfad noch nicht existiert muss der abgelegt werden.
• sudo apt install openjdk-8-jdk 
• In der .bashrc folgende Zeilen ergänzen

export ANDROID_HOME=/home/your-name/Android/SDK
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

• Bash neustarten und mittels Command sdkmanager "platform-tools" die Tools nachinstallieren

Unter Windows ohne WSL

• Windows+R drücken
• sysdm.cpl eingeben
• Im Register Erweitert den Punkt Umgebunsvariablen auswählen
• Unter Systemvariablen mit Neu ANDROID_HOME anlegen mit dem Pfad zum SDK Ordner.
  Default ist C:\Users\{User}\AppData\Local\Android\Sdk 
• Die bestehende Systemvariable Path editieren und die Pfade zu platform-tools und tools\bin ergänzen.
  Default: 

C:\Users\{User}\AppData\Local\Android\Sdk\platform-tools
C:\Users\{User}\AppData\Local\Android\Sdk\tools\bin

Unter Linux

• In der .bashrc folgendes ergänzen

export ANDROID_HOME=/home/{User}/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

Projekt anlegen

Mit dem Befehl könnt ihr ein React-Native-Projekt anlegen

npx react-native init <Projektname>

Sollte ein TypeScript-Projekt benötigt werden kann das Template entsprechend ergänzt werden:

npx react-native init <Projektname> --template react-native-template-typescript

Testumgebung

Um nun zu schauen, wie das Ganze ausschaut, müsst ihr lediglich den Emulator starten.
Zuerst muss der Metro-Server gestartet werden, von dem die Javascripte auf den Emulator geladen werden können. Das ermöglicht ein Live-Debugging, da Änderungen direkt übernommen werden können.

npm start

Nächster Step ist die apk für den Emulator zu generieren und zu starten, dazu folgenden Command ausführen:

npm run android

Dann bleibt nur noch zu sagen viel Spaß beim Entwickeln. Ich werde in Zukunft noch einzelne React-Native Module vorstellen.