React Native: Programmieren




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 ReactSeite 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).

Hier geht es weiter!


Anzeige

War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?

Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.