React Native: Programmieren - Technik Tipps und Tricks

Das Programmieren mit React Native wird von Grund auf anhand eines Beispielprojektes “ReactNativeDemo” erklärt. Schritt für Schritt wird das Projekt modifiziert und erweitert.

Die Voraussetzung ist eine eingerichtete Entwicklungsumgebung. Eine Anleitung ist hier zu finden.

Das Beispielprojekt erstellen

In einem lokalen Ordner (z.B. ~/Development/REACT-NATIVE) den Terminal öffnen und das Projekt initialisieren:

$ npx react-native init ReactNativeDemo --template react-native-template-typescript --title "RN Demo"

Es wurde ein Projektordner ~/Development/REACT-NATIVE/ReactNativeDemo angelegt, der den Quellcode der React Native App mit TypeScript und Node Modulen enthält. Der App-Titel, der auf dem Geräte-Display erscheint, wurde auf “RN Demo” gesetzt.

Das Projekt testen

Den Emulator starten (siehe Android Virtual Device) oder ein Android-Gerät anschliessen (siehe Android Gerät als Entwicklungsplattform).

Im Terminal in den Projektordner wechseln und den Metro-Server starten.

$ cd ~/Development/REACT-NATIVE/ReactNativeDemo
$ npx react-native start

Nach der Meldung: “Loading dependency graph, done.” ein zweites Terminal-Fenster öffnen und die App erstellen und starten.

$ cd ~/Development/REACT-NATIVE/ReactNativeDemo
$ npx react-native run-android

Nach einer Weile sollte auf dem Emulator-Display die “Welcome to React“–Seite erscheinen.

AVD-Welcome_to_React [Image]

Das Beispielprojekt einrichten

Es werden noch weitere Pakete wie Internationalisierung, App-Zustandspeicherung und UI-Komponente installiert und eingerichtet. Dazu wie in Projekt einrichen beschrieben vorgehen.

Das Projekt ist jetzt für die weitere Arbeit vorbereitet. Der Projektordner kann in Visual Studio Code geöffnet werden (File → Open Folder → ReactNativeDemo).