React Native Kompaktkurs

In dieser 4-tägigen Schulung "React Native Kompaktkurs" lernen Sie, wie Sie plattformübergreifende native Apps mit React Native erstellen können. Sie werden mit JavaScript und React-Technologien arbeiten und erfahren, wie Sie Apps für den Apple App Store und den Google Play Store entwickeln können. Der Kurs ist für Anfänger geeignet, da er Sie von den Grundlagen bis hin zur Umsetzung moderner Techniken und Best Practices begleitet. Tauchen Sie ein in die Welt von React Native und entdecken Sie, wie Sie schnell und effizient plattformübergreifende native Apps entwickeln können.

Zum Seminar: React Native Kompaktkurs

Einführung

• Was ist React Native?
• Was tut es für uns? Warum wählen wir es?
• Expo vs. React Native CLI
• React Native - Architektur
• React Native Web
• Universelle Codebasis - Einmal schreiben überall anwenden: Web, Mobile, Desktop

React Basics

• JSX-Struktur und Regeln
• Props
• State
• JSX & Functional Components
• SFCs versus klassenbasierte Komponenten
• Kontrollierte und unkontrollierte Komponenten
• Virtuelles DOM vs. reales DOM

State Management

• Hooks
• useState
• useReducer, useEffect
• Redux-Architektur
• Reducer, Actions, State, Store und Middleware
• useState vs Redux vs zustand

Der Entwicklungsprozess

• Wo soll ich überhaupt anfangen?
• React-Native vs. Create-React-Native-app
• Was ist besser für gegebene Situationen
• Was ist die Expo?
• Erstellung einer neuen React Native-Anwendung
• Wie man es auf einem angeschlossenen Gerät betreibt
• Wie man es auf einem drahtlosen Gerät betreibt
• Wie man es in einem Android-Emulator ausführt
• Wie man es auf einem iOS-Simulator laufen lässt
• Debugging in einem Browser-Fenster
• Logging, Breakpoints, Einzelschritt
• Die YellowBoxes und RedBoxes ein-/ausschalten

Komponenten in React Native

• Komponenten-Übersicht
• Kategorien von Komponenten
• Text
• Text-Eigenschaften und Ereignisse
• Texteingabe
• Eigenschaften, Ereignisse und das Eventobjekt
• Bilder
• Unterschiede zwischen HTML- und React Native-Bilder
• Bildausgabebereich reservieren
• Lokale Bilder versus Remote Bilder
• Der "resizeMode"
• Buttons
• Pressable
• TouchableWithoutFeedback
• TouchableNativeFeedback
• TouchableOpacity
• TouchableHighlight

Plattformspezifische Entwicklung

• Wie können wir uns auf den verschiedenen Plattformen unterschiedlich entwickeln?
• Warum sollten wir das jemals tun?
• Technische Hemmnisse
• Der DatePicker - iOS gegen Android
• Verwendung des Plattformmoduls

Layout-Komponenten

• Überprüfung der Komponenten
• View
• SafeAreaView
• Bildlaufansicht
• Pinch-to-zoom
• KeyboardAvoidingView
• Modale Ansichten erstellen
• Steuerung der Statusleiste

Flexbox für Native Layouts

• Warum Flexbox?
• Wo sie herkommt
• Flexbox im Web ist NICHT Flexbox auf Native
• Container und Items
• flexDirection
• flexBasis gegen Breite/Höhe
• flexShrink, flexGrow
• Die flex Shorthand
• justifyContent und alignContent
• flexWrap

Styling von React Native Apps

• Wie sich die React Native Styles von CSS unterscheiden
• Wie man Styles anwendet
• Wie man die Vererbung von Stilen steuert
• Style-Arrays
• Vier Methoden zur Definition von Styles
• Gemeinsame Eigenschaften
• Plattformübergreifende Fonts
• Bedingte und programmatische Styles

Navigation

• Was ist Navigation wirklich?
• Wie man zur React-Navigation gelangt
• Die drei Arten von Navigatoren
• StackNavigator
• Routing-Objekt
• Konfiguration der Navigation
• Wie man beim Navigieren Params überwindet.
• TabNavigators
• Drei Arten von TabNavigators
• Icons setzen
• DrawerNavigator
• Beispiele und Demos

APIs, Daten & native Funktionen

• Warum es auf einem Gerät anders sein muss
• Die Fetch-API
• Fetch / Axios verwenden
• Error Handling & Loading States
• Ladeindikator anzeigen
• Einführung in AsyncStorage
• Daten persistieren
• Anfragen stellen und Antworten verarbeiten
• Sicherheit in einer nativen Umgebung

Listen-Komponenten

• Überprüfung der Komponenten
• Picker
• FlatList
• ScrollView
• Sektionsliste

Native Komponenten

• Kamera, Standort, Media Picker
• Push Notifications (Grundlagen)