Einleitung und erste Schritte
- Überblick der behandelten Themen
- React Native Apps im Browser mit Expo Snack entwickeln
- iPhone: eine App mit Expo laden
- Android: eine App mit Expo laden
- Tipps für die Verwendung der App Expo
- Zusammenfassung und nächste Schritte
- Expo-App auf dem Handy installieren
- Beispiel-App (Expo Snack) im Browser anpassen
Windows: Entwicklungsumgebung für React Native einrichten
- Windows: das JavaScript-Framework NodeJS herunterladen und installieren
- Windows: git sollte installiert werden
- Windows: das Kommandozeilenwerkzeug expo-cli mit npm installieren
- Windows: ein Projektverzeichnis für eigene React Native Apps erstellen
- Windows: den Editor VSCode herunterladen und installieren
- Windows (optional): Nützliche Erweiterungen und Einstellungen für VS Code
- Zusammenfassung und Links zu Webseiten
Mac: Entwicklungsumgebung für React Native einrichten
- Mac: das JavaScript-Framework NodeJS herunterladen und installieren
- Mac: Installation von NodeJS testen und Problem mit PATH beheben
- Mac: das Kommandozeilenwerkzeug expo-cli mit npm installieren
- Mac: ein Projektverzeichnis für eigene React Native Apps erstellen
- Mac: den Editor VSCode herunterladen und installieren
- Zusammenfassung und Links zu Webseiten
Projekte mit React Native starten und kennenlernen
- Eine Beispiel-App für Zitate entwickeln
- Gemeinsames Programmieren der App und Code auf GitHub finden
- Projekt für eine neue React Native App erstellen
- Windows: React Native Packager starten
- Mac: React Native Packager starten
- Erinnerung: Expo-App auf dem Handy installieren
- App in Expo auf dem Handy laden
- Aufbau des Projektverzeichnis kennenlernen
- Komponenten als Klassen deklarieren
- Die Komponente in App.js als Klasse deklarieren
- Bestandteile einer Komponente verstehen
- Komponente als Klasse deklarieren
- Styles in einer Komponente definieren
In die Grundlagen der Programmierung mit React Native einsteigen
- Minimale App mit einem Zitat umsetzen
- Button hinzufügen
- Lokale Daten in Konstante bereitstellen
- Dynamische Textinhalte anzeigen
- Initialen Zustand im state-Objekt festlegen
- Zustand mit setState ändern
- Durch alle Zitate mit Hilfe von setState blättern
- Button zum Zurückblättern
- Eigene Komponente schreiben und verwenden
- Eigenschaften als Props an Komponente übergeben
- Zustandslose Komponente als Funktion definieren
Styling: Erscheinung und Darstellung von Komponenten beeinflusen
- Text mit inline-Styles anpassen
- Komponenten mit JavaScript stylen
- Styles mit der StyleSheet-API zusammenfassen
- Styling für Komponenten in der Dokumentation finden
- Abstände mit View als Container-Element definieren
- Textdarstellung ausrichten
- Button am unteren Rand positionieren
- Zitate in einer Art schwebenden Karte anzeigen
- Links zu den erwähnten Webseiten
Eingabe von Daten auf mehreren Screens mit Modal und TextInput
- Button für neues Zitat hinzufügen
- Komponente mit setState und props einblenden
- Komponente mit Callback und Pfeilfunktion ausblenden
- Modal für neues Zitat verwenden
- Inhalte des Modals zentrieren
- TextInputs einheitlich mit Rahmen umgeben
- TextInput für mehrzeilige Zitatinhalte konfigurieren
- Eingaben der TextInputs im state-Objekt ablegen
- Neues Zitat der Liste hinzufügen
- Inhalte der Eingabefelder zurücksetzen
- iPhone-Darstellung mit Platform und SafeAreaView anpassen
- Links zu erwähnten Webseiten
Daten lokal und in der Cloud speichern
- Daten auf dem Handy im AsyncStorage speichern
- Daten aus dem AsyncStorage laden
- async/await statt then verwenden
- Lebenszyklusmethoden von Komponenten verstehen
- In componentDidMount die Daten laden
- Buttons mit_Style als funktionale Komponente kapseln
- Wechsel zum nächsten Zitat in Methode auslagern
- Neues Zitat direkt nach seiner Erstellung anzeigen
- Button zum Löschen eines Zitats hinzufügen
- Komponente für leere Zitatenliste mit Fallunterscheidung darstellen
- Buttons nur in passenden Situationen anzeigen
- Alert-API verwenden um Löschen eines Zitats zu bestätigen
- AsyncStorage mit lokaler SQLite-Datenbank ersetzen
- Tabelle und Anfragen für SQLite erstellen
- Cloud-Speicher mit Firebase einrichten
- Firebase im Projekt installieren und konfigurieren
- Daten mit Firebase in der Cloud verwalten
- Beim Laden der_Daten den ActivityIndicator darstellen
- Links zu den erwähnten Webseiten
FlexBox-Layout zur Anordung von Komponenten verstehen
- Überblick und Ablauf dieses Abschnitts
- Beispiel-Projekt für FlexBox erstellen und vorbereiten
- Die Komponente in App.js als Klasse deklarieren
- Höhe und Breite mit absoluten Werten festlegen
- Höhe und Breite in Prozenten definieren
- Flexible Größe mit flex bestimmen
