React Native Kurs für Android- und iOS-Apps

Lektion 1 • Erstellung Ihres ersten Projekts

Verwendet die React Native CLI und Expo CLI, um Projektvorlagen zu generieren, und vergleicht ihre Vor- und Nachteile. Die Teilnehmer führen eine Hello-World-App sowohl auf Android- als auch auf iOS-Simulatoren aus.

Lektion 2 • Die React Native-Architektur verstehen

Behandelt die JavaScript-Bridge, native Module und den neuen Fabric-Renderer. Vermittelt das mentale Modell, das für das Debugging und die Optimierung im gesamten Kurs benötigt wird.

Lektion 3 • Debugging und Entwicklerwerkzeuge

Stellt Flipper, React DevTools und das In-App-Entwicklermenü zur Untersuchung von Zuständen und Netzwerkaufrufen vor. Die hier erworbenen Debugging-Fähigkeiten gelten für alle folgenden Kapitel.

Lektion 1 • Funktionale Komponenten und JSX

Wiederholt die JSX-Syntax, Komponentenkomposition und Prop-Übergabe in einem React Native-Kontext. Entwickelt die komponentengetriebene Denkweise, die für alle weiteren UI-Arbeiten erforderlich ist.

Lektion 2 • Zustandsverwaltung mit Hooks

Behandelt useState, useReducer und useRef für die Verwaltung des lokalen Komponentenzustands und von Seiteneffekten. Diese Hooks steuern die interaktiven Funktionen, die im gesamten Kurs erstellt werden.

Lektion 3 • Context-API für gemeinsam genutzten Zustand

Implementiert React Context mit useContext, um Theme- und Authentifizierungszustand komponentenübergreifend zu teilen. Bietet eine leichtgewichtige globale Zustandslösung, bevor Redux eingeführt wird.

Lektion 4 • Seiteneffekte und Lebenszyklus mit useEffect

Erklärt das Abhängigkeits-Array von useEffect, Bereinigungsfunktionen und häufige Fallstricke wie veraltete Closures. Die korrekte Verwendung von Effekten ist entscheidend für die Datenabfrage, die in späteren Kapiteln behandelt wird.

Lektion 1 • Das Flexbox-Layout-System

Erklärt flexDirection, justifyContent, alignItems und die Flex-Größenanpassung, wie sie in React Native angewendet werden. Die Beherrschung dieser Grundlagen ermöglicht konsistente plattformübergreifende Layouts in allen Projektarbeiten.

Lektion 2 • Responsive Design-Techniken

Verwendet die Dimensions-API, den useWindowDimensions-Hook und prozentuale Größenanpassung für adaptive Layouts. Stellt sicher, dass Benutzeroberflächen auf Telefonen und Tablets mit unterschiedlichen Bildschirmgrößen korrekt aussehen.

Lektion 3 • StyleSheet-API und Theming

Vermittelt StyleSheet.create, Inline-Styles und dynamische Stilkomposition. Die Teilnehmer erstellen ein wiederverwendbares Theme-Objekt, das im gesamten Kursprojekt verwendet wird.

Lektion 1 • Tab- und Drawer-Navigation

Implementiert Bottom-Tab- und Side-Drawer-Navigatoren mit Symbolen und Badge-Unterstützung. Diese Muster bilden die oberste App-Struktur, die im Kursprojekt verwendet wird.

Lektion 2 • Deep Linking und URL-Verarbeitung

Konfiguriert URL-Schemas und Universal Links, um bestimmte Bildschirme von externen Quellen aus zu öffnen. Deep Linking wird für die später behandelte Navigation von Push-Benachrichtigungen benötigt.

Lektion 3 • React Navigation Einrichtung und Konzepte

Installiert die React Navigation-Abhängigkeiten und erklärt die Hierarchie von Navigator, Screen und Route. Diese Grundlage ist erforderlich, bevor ein Navigationsmuster umgesetzt werden kann.

Lektion 4 • Muster für Authentifizierungsabläufe

Implementiert bedingte Navigations-Stacks, die je nach Token-Status zwischen Authentifizierungs- und Haupt-App-Bildschirmen wechseln. Dieses Muster wird im vollständigen Kursprojekt wiederverwendet.

Lektion 1 • Datenabruf mit der Fetch-API

Verwendet die Fetch-API und Axios, um GET-, POST-, PUT- und DELETE-Anfragen mit ordnungsgemäßer Fehlerbehandlung durchzuführen. Netzwerkaufrufe steuern die dynamischen Inhalte im Kursprojekt.

Lektion 2 • SQLite und strukturierte lokale Daten

Integriert eine SQLite-Bibliothek, um Tabellen zu erstellen, Abfragen auszuführen und relationale Daten auf dem Gerät zu verwalten. Strukturierte Speicherung wird für die Offline-First-Funktion im Projekt benötigt.

Lektion 3 • Caching und Offline-Strategien

Implementiert Stale-while-Revalidate-Caching und Netzwerkstatuserkennung für die Offline-UX. Diese Strategien stellen sicher, dass die App auch ohne Netzwerkverbindung nutzbar bleibt.

Lektion 4 • Async/Await und Promise-Muster

Wendet die async/await-Syntax, Promise.all und Abbruchmuster an, um gleichzeitige Anfragen zu verwalten. Sauberer asynchroner Code verhindert Race Conditions in datenintensiven Bildschirmen.

Lektion 1 • Geolokalisierung und Kartenintegration

Ruft den Gerätestandort mit der Geolocation-API ab und rendert Karten mit react-native-maps. Die Standortfunktionen unterstützen den Kartenbildschirm im Kursprojekt.

Lektion 2 • Zugriff auf Kamera und Medienbibliothek

Integriert react-native-vision-camera und die Medienbibliotheks-API zur Fotoerfassung und -auswahl. Kamerafunktionen werden in den Profil- und Inhalts-Upload-Bildschirmen des Projekts verwendet.

Lektion 3 • Einrichtung von Push-Benachrichtigungen

Konfiguriert Firebase Cloud Messaging für Android und APNs für iOS, um Push-Benachrichtigungen zuzustellen. Die Benachrichtigungsverarbeitung knüpft an die Deep-Linking-Muster aus Kapitel 4 an.

Lektion 4 • Sensoren, Biometrie und Haptik

Greift auf Beschleunigungsmesser, biometrische Authentifizierung und haptische Feedback-APIs für eine verbesserte UX zu. Diese Funktionen unterscheiden native mobile Apps von webbasierten Alternativen.

Lektion 1 • React Query für Server-Zustand

Verwendet die useQuery- und useMutation-Hooks von React Query, um den Server-Zustand vom UI-Zustand zu trennen. Dieser Ansatz vereinfacht die Datensynchronisierung im Vergleich zu manuellen Redux Thunks.

Lektion 2 • Async Thunks und RTK Query

Behandelt den asynchronen Datenabruf mit createAsyncThunk und der Datenabrufschicht von RTK Query. RTK Query ersetzt die manuelle Fetch-Logik und das Caching aus Kapitel 5.

Lektion 3 • Zustand für leichtgewichtigen globalen Zustand

Implementiert Zustand-Stores für UI-Zustand, der nicht in Server-Zustandsbibliotheken gehört. Zustands minimalistische API ergänzt React Query perfekt in einer modernen Zustandsarchitektur.

Lektion 4 • Grundlagen von Redux Toolkit

Erstellt Slices, Reducers und Actions mit den createSlice- und configureStore-APIs von Redux Toolkit. RTK eliminiert Boilerplate und ist der branchenübliche Redux-Ansatz.

Lektion 1 • Leistungsprofilierung und -optimierung

Verwendet die Hermes-Engine, das Leistungspanel von Flipper und Re-Rendering-Tracing, um Engpässe zu identifizieren. Die hier vorgestellten Optimierungstechniken gelten für alle im Kursprojekt erstellten Bildschirme.

Lektion 2 • Unit- und Integrationstests

Schreibt Komponententests mit Jest und React Native Testing Library sowie Integrationstests für Navigationsabläufe. Eine getestete Codebasis reduziert das Regressionsrisiko während der Deployment-Phase.

Lektion 3 • End-to-End-Tests mit Detox

Automatisiert vollständige Benutzerabläufe auf echten Simulatoren mit Detox für eine zuverlässige E2E-Abdeckung. E2E-Tests erkennen Integrationsprobleme, die Unit-Tests nicht finden können.

Lektion 4 • Animationen mit der Animated API und Reanimated

Erstellt flüssige UI-Animationen mit der Animated API und React Native Reanimated 3 auf dem UI-Thread. Flüssige Animationen sind ein entscheidendes Unterscheidungsmerkmal hochwertiger mobiler Apps.