Advanced React Native Kurs: Techniken & Deployment

Lektion 1 • Kernarchitektur und Komponentenmodell

Untersuchen Sie die JavaScript Bridge, das native Thread-Modell und die Komponentenhierarchie. Das Verständnis dieser Architektur leitet Leistungsentscheidungen in späteren Kapiteln.

Lektion 2 • Zustandsverwaltung mit Hooks

Wenden Sie useState, useEffect und useReducer an, um den lokalen Komponentenzustand zu verwalten. Diese Muster untermauern jede zustandsbehaftete Funktion, die im gesamten Kurs erstellt wird.

Lektion 3 • Einrichten der Entwicklungsumgebung

Konfigurieren Sie Node.js, Watchman, Xcode und Android Studio für die plattformübergreifende Entwicklung. Diese Grundlage stellt sicher, dass alle nachfolgenden Übungen ohne Toolchain-Fehler ausgeführt werden.

Lektion 4 • Debugging und Entwicklertools

Verwenden Sie Flipper, React DevTools und die Metro-Bundler-Konsole, um Probleme zu diagnostizieren. Effektive Debugging-Fähigkeiten beschleunigen die Entwicklung in jedem weiteren Kapitel.

Lektion 1 • Verschachtelte und bedingte Navigation

Erstellen Sie verschachtelte Navigatoren und rendern Sie Routen bedingt basierend auf dem Authentifizierungsstatus. Dieses Muster ist wesentlich für die Trennung von authentifizierten und öffentlichen App-Bereichen.

Lektion 2 • React Navigation Kernkonzepte

Installieren und konfigurieren Sie React Navigation und erstellen Sie Stack-, Tab- und Drawer-Navigatoren. Diese Grundelemente bilden das Skelett jedes Bildschirmablaufs im Kursprojekt.

Lektion 3 • Navigationsleistungsoptimierung

Wenden Sie Lazy Loading, Entladen von Bildschirmen und Header-Memoization an, um den Navigations-Overhead zu reduzieren. Diese Optimierungen verbessern direkt die Bildraten auf Geräten mit geringer Leistung.

Lektion 1 • Server-Zustand mit React Query

Verwalten Sie das Abrufen, Caching und die Synchronisierung entfernter Daten mit React Query. Dieser Abschnitt verbindet den lokalen UI-Zustand mit den Backend-Daten, die im API-Kapitel behandelt werden.

Lektion 2 • Schlanker Zustand mit Zustand

Erstellen Sie minimale globale Stores mit Zustand und vergleichen Sie die Kompromisse mit Redux. Zustand eignet sich für kleinere Funktionsmodule, bei denen der Redux-Overhead unnötig ist.

Lektion 3 • Zustandspersistenz und Rehydration

Persistieren Sie den Zustand in AsyncStorage und MMKV und rehydrieren Sie ihn beim App-Start. Zuverlässige Persistenz ist entscheidend für offlinefähige Apps, die in späteren Kapiteln erstellt werden.

Lektion 4 • Context-API für begrenzten Zustand

Verwenden Sie den React-Context mit Memoization, um den Zustand innerhalb von Funktionsgrenzen zu teilen. Context ergänzt globale Stores, indem es Prop-Drilling in verschachtelten Komponenten vermeidet.

Lektion 1 • Vermeidung häufiger mobiler Schwachstellen

Reduzieren Sie Reverse Engineering, Screenshot-Verlust und unsichere Protokollierung in Produktions-Builds. Proaktive Härtung reduziert die Anfälligkeit für gängige mobile Sicherheitsbedrohungen.

Lektion 2 • Datenverschlüsselung und Datenschutzkontrollen

Verschlüsseln Sie lokale Datenbanken mit SQLCipher und wenden Sie Prinzipien der Datenminimierung an. Die Verschlüsselung im Ruhezustand schützt Benutzerdaten, wenn ein Gerät kompromittiert wird.

Lektion 3 • Authentifizierungsabläufe und Token-Verwaltung

Erstellen Sie Anmelde-, Registrierungs- und Token-Aktualisierungsabläufe mit OAuth2 und JWT. Eine sichere Token-Lebenszyklusverwaltung verhindert Session-Hijacking in Produktions-Apps.

Lektion 4 • Sichere Speicherung und Keychain

Speichern Sie Anmeldeinformationen und Token im iOS-Schlüsselbund und Android-Keystore mit react-native-keychain. Plattformeigene sichere Speicherung verhindert die Offenlegung von Anmeldeinformationen durch Dateisystemzugriff.

Lektion 1 • Sichere API-Kommunikation

Implementieren Sie Token-Aktualisierungsabläufe, Certificate Pinning und sichere Header-Verwaltung. Die Sicherheitshärtung hier schützt die Benutzerdaten im folgenden Authentifizierungskapitel.

Lektion 2 • Erkennung des Netzwerkstatus

Verwenden Sie NetInfo, um Konnektivitätsänderungen zu erkennen und die Benutzeroberfläche entsprechend anzupassen. Eine genaue Erkennung des Netzwerkstatus ist die Voraussetzung für die als Nächstes erstellte Offline-Warteschlange.

Lektion 3 • REST-API-Integration mit Axios

Konfigurieren Sie Axios-Instanzen, Interceptoren und Wiederholungslogik für robuste HTTP-Kommunikation. Das zentralisierte Axios-Setup verhindert doppelte Fehlerbehandlung in der Codebasis.

Lektion 4 • GraphQL mit Apollo Client

Richten Sie Apollo Client ein, schreiben Sie Queries und Mutations und verwalten Sie den normalisierten Cache. GraphQL reduziert Over-Fetching im Vergleich zu REST für komplexe Datengraphen.

Lektion 1 • Memoization und Render-Optimierung

Wenden Sie React.memo, useMemo und useCallback an, um unnötige Neu-Renderings von Komponenten zu verhindern. Diese Techniken reduzieren direkt die Arbeitslast des JS-Threads auf interaktionsintensiven Bildschirmen.

Lektion 2 • JavaScript-Bundle-Optimierung

Wenden Sie Code-Splitting, Inline-Requires und das RAM-Bundle-Format an, um die Startzeit zu reduzieren. Die Bundle-Größe wirkt sich direkt auf die Zeit bis zur Interaktivität beim ersten Start aus.

Lektion 3 • Profiling mit Flipper und Hermes

Verwenden Sie den Hermes-Profiler und das Flipper-Leistungs-Plugin, um CPU- und Speicher-Hotspots zu identifizieren. Profiling vor der Optimierung verhindert verschwendeten Aufwand für Nicht-Engpass-Code.

Lektion 4 • Bild- und Asset-Optimierung

Verwenden Sie FastImage, das WebP-Format und progressives Laden, um die Bildrenderzeit zu reduzieren. Optimierte Assets senken den Speicherdruck und verbessern die wahrgenommene Ladegeschwindigkeit.

Lektion 1 • Verständnis der Native Bridge

Verfolgen Sie, wie JavaScript-Aufrufe die Brücke zu nativem Code überqueren und asynchron zurückkehren. Dieses mentale Modell ist erforderlich, bevor natiiver Modulcode geschrieben wird.

Lektion 2 • Schreiben von nativen Android-Modulen in Kotlin

Implementieren Sie ein ReactContextBaseJavaModule in Kotlin und registrieren Sie es in einem ReactPackage. Kotlin-Module bieten Zugriff auf Android-System-APIs und Hardwarefunktionen.

Lektion 3 • Schreiben von iOS Native Modules in Swift

Erstellen Sie ein RCTBridgeModule in Swift, machen Sie Methoden verfügbar und senden Sie Ereignisse an JavaScript. Swift-Module ermöglichen den Zugriff auf iOS-exklusive APIs, die in der JavaScript-Ebene nicht verfügbar sind.

Lektion 4 • JSI und die neue Architektur

Verwenden Sie JSI, um native C++-Funktionen synchron ohne Bridge-Serialisierung aufzurufen. JSI ist die Grundlage von Fabric und TurboModules, die in der neuen Architektur eingeführt wurden.

Lektion 1 • Komponententests mit React Native Testing Library

Rendern Sie Komponenten isoliert und prüfen Sie die für den Benutzer sichtbare Ausgabe mit RNTL-Queries. Komponententests validieren das UI-Verhalten, ohne dass ein laufendes Gerät erforderlich ist.

Lektion 2 • Continuous-Integration-Pipeline-Einrichtung

Konfigurieren Sie einen CI-Dienst, um Tests, Linting und Build bei jedem Pull Request auszuführen. Automatisierte CI-Gates verhindern, dass fehlerhafter Code den Hauptzweig erreicht.

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

Schreiben Sie Detox-Tests, die einen echten Simulator durch vollständige Benutzerabläufe steuern. E2E-Tests erkennen Integrationsfehler, die für Unit- und Komponententests unsichtbar sind.

Lektion 4 • Unit- und Integrationstests mit Jest

Schreiben Sie Unit-Tests für Hooks und Hilfsprogramme sowie Integrationstests für Redux-Slices mit Jest. Eine zuverlässige Testsuite erkennt Regressionen, bevor sie die CI-Pipeline erreichen.