React Native: Wetter-App
In diesem Crashkurs entsteht dieselbe Wetter-App wie in der Android-Lektion und der Flutter-Lektion, diesmal mit React Native, Expo und TypeScript: Eine Liste von Städten, und nach Antippen einer Stadt deren aktuelles Wetter. Zuerst mit Fake-Daten, am Ende mit echten Daten von Open-Meteo , angebunden mit einem Coding Agent.
Die Schritte orientieren sich an der Android- und der Flutter-App. So lassen sich die Konzepte direkt vergleichen.
Der Code liegt auf GitHub:
behrends/WeatherReactNativeTIF24 .
Jeder Schritt hat einen eigenen Tag (schritt-00 bis schritt-11).
Mit git checkout schritt-05 lässt sich jeder Zwischenstand ansehen,
der Link „Änderungen“ auf den folgenden Seiten zeigt den Diff eines Schritts.
Nach dem Klonen einmal npm install ausführen.
Expo erscheint etwa dreimal im Jahr in einer neuen SDK-Version, React Native noch häufiger. Im Live-Coding kann deshalb etwas anders aussehen oder nicht klappen. Bei Tutorials und Videos auf das Datum und die SDK-Version achten!
Zum Weiterlernen:
- React Native: Einstieg und Kernkomponenten
- Expo-Tutorial : eine App mit Expo Router Schritt für Schritt
- React lernen : Komponenten, State und Hooks, unabhängig von React Native
- TypeScript für JavaScript-Programmierer
- Expo Snack : React Native im Browser ausprobieren
- React Native Directory : Bibliotheken mit Angaben zu Plattformen und Expo-Unterstützung
Ausblick:
- UI-Bibliotheken mit fertigen Komponenten: React Native Paper , gluestack , React Native Elements
- Projektvorlagen, die mehr mitbringen als die Vorlage von Expo: create-expo-stack , Ignite , expo-app-template
- Radon IDE : Extension für VS Code mit Emulator im Editor, Inspektor für Komponenten und Debugger
- Weitere Plattformen : React Native auch für Windows, macOS und TV