Mobile Apps5 - React Native Teil 1Einstieg

Einstieg in React Native

💡

Dauer: 30 Minuten

  • Expo Snack (IDE für React Native im Browser)
  • Projekt auf dem Rechner erstellen
  • App auf dem Handy oder Simulator laden

Ziel: Das erste Projekt erstellen

Programmieren im Browser mit Expo Snack

Zunächst wird Expo Snack gezeigt. Dies ist eine ziemlich mächtige Entwicklungsumgebung für React Native im Browser. Apps können dort programmiert und nebenbei für Android, iPhone und als Webanwendung simuliert werden.

👨🏻‍💻

Live Coding

  • Aufbau und Verwendung Expo Snack
  • Kleine Änderungen: z.B. Text, Farbe
  • Code und Dateien auf Minimum reduzieren, sodass nur der Text Hello, World! erscheint

⟶ Wir werden hauptsächlich mit VS Code arbeiten.

⟶ In Expo Snack kann jedoch ebenso dem Live Coding gefolgt werden.

⟶ Der Zwischenstand des Live Codings kann für den Kurs in Expo Snack und GitHub gespeichert werden.

🚫

Die Notizen orientieren sich stark am Videokurs.

Nur die wichtigsten Aspekte werden grob erklärt, da diese ebenfalls im Videokurs behandelt werden.

Möglicherweise werden hier und im Live Coding andere Komponenten oder Konzepte gezeigt, die nicht im Videokurs vorkommen.

Projekt auf dem Rechner erstellen

⚠️

Achtung: es wird mehrmals npx verwendet (und nicht npm).

npx steht für Node Package Execute. Es ist ein Tool, das zusammen mit npm geliefert wird, um Node.js-Pakete auszuführen, insbesondere solche mit Kommandozeilen-Schnittstellen (CLI), ohne diese global installieren zu müssen.

  • VS Code starten
  • Verzeichnis für Projekte öffnen (z.B. tmp)
  • Terminal in VS Code anzeigen (View - Terminal)
  • npx create-expo-app --template blank im Terminal ausführen (Projekt erstellen)
  • Das neue, durch den vorigen Schritt erstellte Verzeichnis des Projekts in VS Code öffnen (File - Open…)
  • App.js im Editor öffnen und ggf. mit Code aus Expo Snack ersetzen (siehe „Hello, World!“ oben)
  • Terminal in VS Code anzeigen (View - Terminal)
  • npx expo im Terminal ausführen

App auf dem Handy testen

Um die App auf dem eigenen Handy zu testen, muss dort zunächst die App Expo Go installiert werden (im App Store bzw. Play Store suchen).

Im Terminal ist ein QR-Code zu sehen, mit dem die App auf dem Handy geladen werden kann. Dazu auf dem iPhone die Kamera-App verwenden, auf Android-Geräten kann der QR-Code-Scan aus Expo Go erfolgen.

⚠️

Im WLAN bzw. Netzwerk der DHBW ist eine Kommunikation von Gerät zu Gerät (client-to-client) wegen Sicherheitseinschränkungen nicht möglich.

In diesem Fall kann der Expo-Server mit der Option --tunnel gestartet werden:

npx expo --tunnel

Dann wird eine indirekte, öffentliche Netzwerk-Verbindung („Tunnel“) zwischen Rechner und Handy genutzt, siehe Tunneling in den Expo Docs.

Sollte es hierbei Probleme bei der Installation des benötigten Packages ngrok geben, dann kann die lokale Installation (npm i ohne -g) ein Workaround sein (Stand Oktober 2024).

Im „gewöhnlichen“ WLAN in Heimnetzwerken sollte es möglich sein, die App direkt auf dem Handy zu laden, solange Handy und Rechner im gleichen WLAN bzw. Netzwerk sind.

⚠️

Ist ein Android-Gerät direkt per USB-Kabel mit dem Handy verbunden, dann kann der Expo-Server mit --localhost gestartet werden:

npx expo --localhost

Durch Drücken von a im Terminal wird die App dann auf dem Android-Gerät geladen

Projektverzeichnis, Dateien und Inhalt/Aufbau von App.js kurz erklären.

💡

Vertiefendes Material

Abschnitt 3 im Videokurs

Weitere Zielplattformen von React Native: https://reactnative.dev/docs/out-of-tree-platforms

SetupTodo-App