Kurs React Native mit Hooks

Lektion 1 • JSX und das virtuelle DOM

Erläutert die JSX-Kompilierung, den Abgleich von Key-Props und wie der Diffing-Algorithmus von React native Aktualisierungen minimiert. Verbindet das Verhalten des virtuellen DOM mit der Leistung.

Lektion 2 • Vertiefung funktionaler Komponenten

Stellt Klassenkomponenten funktionalen Komponenten gegenüber und erklärt, warum Hooks funktionale Komponenten erfordern. Etabliert das mentale Modell für zustandslose UI-Funktionen.

Lektion 3 • Überblick über die moderne JavaScript-Syntax

Behandelt Destrukturierung, Spread/Rest, Pfeilfunktionen und async/await, wie sie in React-Native-Codebasen verwendet werden. Reduziert Syntaxverwirrung in späteren Hook-Beispielen.

Lektion 1 • Was ist React Native

Erklärt die Bridge-Architektur, den JavaScript-Thread und das native Modulsystem. Positioniert React Native im Verhältnis zu Web-React und nativer Entwicklung.

Lektion 2 • Erstellen Ihres ersten Projekts

Verwendet die React Native CLI, um ein Projekt zu erstellen, und erklärt die generierte Dateistruktur. Verbindet die Ordnerstruktur mit der Build-Pipeline.

Lektion 3 • Kernkomponenten (Built-In)

Stellt View, Text, Image, ScrollView und TextInput als primitive UI-Bausteine vor. Demonstriert, wie jede Komponente auf ein natives Widget abgebildet wird.

Lektion 4 • Einrichten der Entwicklungsumgebung

Installiert Node, Watchman, Xcode und Android Studio mit den korrekten SDK-Versionen. Validiert die Toolchain durch Ausführen eines leeren Projekts auf beiden Plattformen.

Lektion 1 • Zustandsverwaltung mit useState

Führt die Signatur von useState, die Zustandsinitialisierung und Muster für Updater-Funktionen ein. Behandelt häufige Fallstricke wie veraltete Closures und Batch-Updates.

Lektion 2 • Erstellen einer Zähler- und Timer-App

Wendet useState und useEffect gemeinsam in einem praktischen Zähler und Countdown-Timer an. Vertieft Zustandsaktualisierungen, Intervalle und Bereinigung in einer echten Komponente.

Lektion 3 • Nebeneffekte mit useEffect

Erklärt das Abhängigkeitsarray, Bereinigungsfunktionen und den Ausführungszeitpunkt im Verhältnis zum Rendern. Ersetzt alle drei Klassenlebenszyklusmethoden durch einen einzigen Hook.

Lektion 4 • Abrufen von Remote-Daten mit Hooks

Erstellt ein Datenabrufmuster mit useState für Daten/Lade-/Fehlerzustände und useEffect für den Fetch-Aufruf. Führt die UI-Zustände für Laden und Fehler ein.

Lektion 1 • Leistungs-Hooks: useMemo und useCallback

Memoisiert teure Berechnungen mit useMemo und stabilisiert Funktionsreferenzen mit useCallback, um unnötige erneute Renderings von Kindkomponenten zu verhindern.

Lektion 2 • Imperative APIs mit useImperativeHandle

Macht eine kontrollierte imperative API von einer Kindkomponente über useImperativeHandle und forwardRef für eine Eltern-Ref zugänglich. Nützlich für benutzerdefinierte Eingabekomponenten.

Lektion 3 • Referenzieren von Werten mit useRef

Verwendet useRef, um veränderliche Werte über Renderings hinweg zu speichern, ohne erneutes Rendern auszulösen, und um auf native Komponenteninstanzen zuzugreifen. Abgrenzung zu useState für Nicht-UI-Daten.

Lektion 4 • Komplexer Zustand mit useReducer

Implementiert eine Reducer-Funktion und ein Dispatch-Muster für Zustandsautomaten mit mehreren Aktionen. Vergleicht useReducer mit useState für Formular- und Warenkorbszenarien.

Lektion 1 • useForm: Hook für die Formularzustandsverwaltung

Erstellt einen useForm-Hook, der Feldwerte, Validierungsfehler und den Übermittlungsstatus verwaltet. Ersetzt sich wiederholende Formularlogik über mehrere Bildschirme hinweg.

Lektion 2 • Testen von benutzerdefinierten Hooks

Verwendet die React Native Testing Library und renderHook, um benutzerdefinierte Hooks isoliert zu testen. Behandelt act, async act und das Mocken externer Abhängigkeiten.

Lektion 3 • useFetch: Hook zum Abrufen von Daten

Extrahiert das Fetch-Lade-Fehler-Muster in einen wiederverwendbaren useFetch-Hook mit konfigurierbarer URL und Optionen. Demonstriert, wie benutzerdefinierte Hooks Komponenten-Boilerplate reduzieren.

Lektion 4 • useLocalStorage und useAsyncStorage

Umschließt AsyncStorage in einem Hook, der die useState-API für persistente Schlüssel-Wert-Daten nachahmt. Behandelt Serialisierung, Deserialisierung und Fehlerfälle.

Lektion 1 • Muster für Stack-Navigator

Erstellt einen nativen Stack-Navigator mit Push-, Pop- und Replace-Übergängen. Übergibt Parameter zwischen Bildschirmen und liest sie mit useRoute.

Lektion 2 • Tab- und Drawer-Navigatoren

Fügt Bottom-Tab- und Drawer-Navigatoren hinzu und verschachtelt sie im Stack. Passt Tab-Symbole und Drawer-Inhalte mit Hook-gesteuertem Zustand an.

Lektion 3 • Authentifizierungsablauf mit Navigation

Implementiert einen bedingten Navigator, der basierend auf dem im Context gespeicherten Token-Status zwischen Auth- und App-Stack wechselt. Demonstriert praxisnahes geschütztes Routing.

Lektion 4 • Navigations-Hooks im Detail

Verwendet useNavigation, useRoute, useFocusEffect und useIsFocused, um das Navigationsverhalten von innerhalb der Komponenten aus zu steuern. Ersetzt Prop-Drilling von Navigationsobjekten.

Lektion 1 • Server-Zustand mit React Query

Verwendet die Hooks useQuery und useMutation von React Query, um Server-Zustand, Caching und Hintergrundaktualisierungen zu verwalten. Eliminiert die manuelle Verwaltung von Lade-/Fehlerzuständen.

Lektion 2 • Integration des Redux Toolkit

Konfiguriert einen Redux-Store mit createSlice, RTK Query für den Datenabruf und der Provider-Umhüllung. Verbindet Komponenten mit useSelector und useDispatch.

Lektion 3 • Context-API-Muster im großen Maßstab

Teilt Context in Zustands- und Dispatch-Provider auf, um unnötige erneute Renderings in großen Komponentenbäumen zu verhindern. Kombiniert useReducer mit Context für ein Redux-ähnliches Muster.

Lektion 4 • Globaler Zustand mit Zustand

Erstellt einen Zustand-Store mit Aktionen und Selektoren und konsumiert ihn mit einem einzigen Hook-Aufruf. Vergleicht die minimale API von Zustand mit Context-Boilerplate.

Lektion 1 • Profilerstellung und Diagnose der Leistung

Verwendet Flipper, den React DevTools Profiler und den Performance Monitor, um langsame Renderings und JS-Thread-Probleme zu identifizieren. Etabliert einen Optimierungsworkflow, bei dem zuerst gemessen wird.

Lektion 2 • Optimieren von Listen und Bildern

Wendet FlatList-Optimierungs-Props, Bild-Caching und Lazy Loading an, um Scroll-Probleme zu beseitigen. Behandelt windowSize, initialNumToRender und getItemLayout.

Lektion 3 • Testen von Komponenten und Hooks

Schreibt Unit- und Integrationstests mit Jest und React Native Testing Library, die Benutzerinteraktionen und asynchrones Verhalten abdecken. Erzielt aussagekräftige Abdeckung, ohne Implementierungsdetails zu testen.

Lektion 4 • Animationen mit Animated und Reanimated

Erstellt flüssige Animationen mit der Animated API und rüstet für UI-Thread-Animationen auf Reanimated 2 auf. Behandelt Spring-, Timing- und gestengesteuerte Bewegungen.