React Native Schulung

Lektion 1 • Entwicklerwerkzeuge und Debugging-Grundlagen

Stellt den React Native Debugger, Flipper und das In-App-Entwicklermenü vor. Gibt den Teilnehmern sofort nutzbare Feedback-Werkzeuge an die Hand, auf die sie während des gesamten Kurses zurückgreifen werden.

Lektion 2 • Was ist React Native

Behandelt die Rolle von React Native in der plattformübergreifenden mobilen Entwicklung und die Unterschiede zu React für das Web. Schafft die konzeptionelle Grundlage für alle nachfolgenden Kapitel.

Lektion 3 • Erstellen Ihres ersten Projekts

Verwendet die React Native CLI und Expo, um eine neue App zu erstellen und die generierte Dateistruktur zu erkunden. Verbindet das Tooling-Wissen mit der praktischen Projekterstellung.

Lektion 4 • Einrichtung der Entwicklungsumgebung

Installiert und konfiguriert alle erforderlichen Werkzeuge für die iOS- und Android-Entwicklung. Stellt sicher, dass jeder Teilnehmer über eine reproduzierbare, funktionierende lokale Umgebung verfügt.

Lektion 1 • Text-, View- und Image-Komponenten

Behandelt die drei grundlegendsten React Native-Komponenten und ihre wesentlichen Props. Die Teilnehmer erstellen statische Layouts durch die Kombination von Text, Containern und Bildern.

Lektion 2 • Eingabe- und Formularkomponenten

Behandelt TextInput, Switch und Picker zur Erfassung von Benutzereingaben. Schafft das erforderliche Komponentenwissen, bevor das State-Management eingeführt wird.

Lektion 3 • JSX-Grundlagen in React Native

Erläutert die JSX-Syntax, das Einbetten von Ausdrücken und wie JSX für native UI-Aufrufe kompiliert wird. Bietet die syntaktische Grundlage für alle anstehenden Komponentenarbeiten.

Lektion 4 • Touchable- und Pressable-Komponenten

Führt Komponenten zur Berührungsbehandlung und deren Feedback-Verhalten ein. Verbindet statische Layouts mit interaktiven Elementen, die den Teilnehmern in jeder App begegnen werden.

Lektion 1 • StyleSheet-API und Inline-Styles

Vergleicht StyleSheet.create mit Inline-Style-Objekten und erläutert die Auswirkungen auf die Leistung. Etabliert konsistente Styling-Muster, die im gesamten Kurs verwendet werden.

Lektion 2 • Flexbox-Layout-Modell

Erklärt, wie sich das Flexbox-Modell von React Native von CSS unterscheidet und wie die Achsenausrichtung gesteuert wird. Die Teilnehmer erwerben die zentrale Layout-Fähigkeit, die in jedem Bildschirm verwendet wird.

Lektion 3 • Theming und wiederverwendbare Style-Muster

Führt Theme-Objekte, Style-Konstanten und die komponentenbezogene Style-Kapselung ein. Bereitet die Teilnehmer darauf vor, konsistente Designsysteme in großen Apps zu pflegen.

Lektion 4 • Abstände, Rahmen und Schatten

Wendet Margin-, Padding-, Border- und Shadow-Eigenschaften an, um die visuelle Hierarchie zu verfeinern. Verbindet Layout-Wissen mit einem polierten, produktionsreifen Erscheinungsbild der Komponenten.

Lektion 1 • useState für lokalen State

Führt den useState-Hook zur Verwaltung von State auf Komponentenebene und zum Auslösen von Re-Renders ein. Ermöglicht den Teilnehmern die Erstellung interaktiver, zustandsbehafteter UI-Elemente.

Lektion 2 • useEffect und Seiteneffekte

Behandelt useEffect für das Abrufen von Daten, Abonnements und die Bereinigung beim Unmounten. Verbindet Konzepte des Komponentenlebenszyklus mit praktischen asynchronen Operationen.

Lektion 3 • Komponentenmuster und Best Practices

Behandelt Container- vs. Präsentationskomponenten, Memoisierung und die Vermeidung unnötiger Renderings. Bereitet die Teilnehmer darauf vor, leistungsfähige, wartbare Komponentenbäume zu schreiben.

Lektion 4 • Props und Komponentenkommunikation

Erklärt, wie Props Daten und Callbacks zwischen über- und untergeordneten Komponenten übergeben. Etabliert das für React Native-Apps zentrale Muster des unidirektionalen Datenflusses.

Lektion 1 • Stack Navigator für Bildschirmabläufe

Erstellt Push-and-Pop-Bildschirmabläufe mit dem Native Stack Navigator. Behandelt das häufigste Navigationsmuster in mobilen Apps.

Lektion 2 • Tab- und Drawer-Navigatoren

Fügt Bottom-Tab- und Side-Drawer-Navigatoren für App-Abschnitte auf oberster Ebene hinzu. Ermöglicht es den Teilnehmern, die primären Navigationsstrukturen zu erstellen, die in den meisten Apps verwendet werden.

Lektion 3 • Authentifizierungsabläufe und geschützte Routen

Implementiert bedingte Navigation basierend auf dem Authentifizierungsstatus durch Navigator-Switching. Bereitet die Teilnehmer auf den Aufbau einer sicheren, rollenbasierten App-Navigation vor.

Lektion 4 • React Navigation Einrichtung und Konzepte

Installiert React Navigation und erläutert das Navigator-, Screen- und Route-Modell. Bietet den Teilnehmern die konzeptionelle Übersicht, die sie benötigen, bevor sie einen Navigationsablauf erstellen.

Lektion 1 • Fetch-API und asynchrone Muster

Verwendet die integrierte Fetch-API mit async/await, um HTTP-Anfragen von React Native aus zu stellen. Etabliert das asynchrone Datenabrufmuster, das in allen nachfolgenden Abschnitten verwendet wird.

Lektion 2 • React Query für Server State

Verwendet React Query, um Serverdaten automatisch zu cachen, neu abzurufen und zu synchronisieren. Reduziert Boilerplate-Code und verbessert die Datenaktualität in der gesamten App.

Lektion 3 • Axios für HTTP-Anfragen

Führt Axios für eine sauberere Anfragesyntax, Interceptors und Basis-URL-Konfiguration ein. Bringt die Teilnehmer zu dem HTTP-Client, der in den meisten React Native-Produktions-Apps verwendet wird.

Lektion 4 • Lokale Speicherung mit AsyncStorage

Persistiert Schlüssel-Wert-Daten lokal mit AsyncStorage für Offline-First-Funktionen. Bereitet die Teilnehmer darauf vor, Tokens, Einstellungen und gecachte Antworten auf dem Gerät zu speichern.

Lektion 1 • Kamera und Bildauswahl

Erfasst Fotos und wählt Bilder aus der Galerie mit react-native-image-picker aus. Ermöglicht den Teilnehmern die Erstellung medienreicher Funktionen, die in Social- und Utility-Apps üblich sind.

Lektion 2 • Berechtigungsverwaltung

Fordert Laufzeitberechtigungen für sensible Gerätefunktionen unter iOS und Android an und prüft diese. Etabliert das Berechtigungsmuster, das vor dem Zugriff auf eine native API erforderlich ist.

Lektion 3 • Geolokalisierung und Karten

Ruft den Gerätestandort ab und rendert interaktive Karten mit react-native-maps. Verbindet Standortdaten mit visuellen Kartenerlebnissen, die die Teilnehmer in echten Apps veröffentlichen können.

Lektion 4 • Push-Benachrichtigungen

Konfiguriert lokale und Remote-Push-Benachrichtigungen mit Expo Notifications oder Firebase. Lehrt den vollständigen Benachrichtigungslebenszyklus von der Planung bis zur Benutzerinteraktion.

Lektion 1 • Unit- und Integrationstests

Schreibt Komponenten- und Hook-Tests mit Jest und React Native Testing Library. Etabliert eine Testbasis, die Regressionen vor dem Deployment erkennt.

Lektion 2 • Bauen und Veröffentlichen in App Stores

Generiert signierte Release-Builds für Android und iOS und reicht sie in den jeweiligen Stores ein. Schließt den vollständigen Entwicklungs-Produktions-Lebenszyklus für die Teilnehmer ab.

Lektion 3 • Leistungsprofilierung und -optimierung

Verwendet Flipper und den Performance Monitor, um JS-Thread- und Render-Engpässe zu identifizieren. Rüstet die Teilnehmer aus, um die häufigsten React Native-Leistungsprobleme zu diagnostizieren und zu beheben.

Lektion 4 • Ende-zu-Ende-Tests mit Detox

Automatisiert vollständige Benutzerabläufe auf Simulatoren und Geräten mit Detox. Validiert kritische Pfade wie Anmeldung und Checkout vor jeder Veröffentlichung.