React Native App-Entwicklung - Intensivkurs
Classroom Schulung | Deutsch | Anspruch
Schulungsdauer: 4 Tage
Ziele
React Native wird weltweit von Unternehmen eingesetzt, um plattformübergreifende Apps mit einer einzigen Codebasis zu erstellen. Sie entwickeln mit JavaScript und React-Technologien und können Ihre Apps im Apple AppStore oder im Google Play Store bereitstellen. Keine Sorge, im Seminar fangen Sie bei Null an und bauen eine umfassende App auf, die moderne Techniken und Best Practices verwendet. Lernen Sie, wie Sie mit React Native schnell und einfach plattformübergreifende native Apps erstellen können.
Zielgruppe
Entwickler
Voraussetzungen
- Alle Teilnehmer müssen ein sehr gutes Verständnis für React, Redux und fortgeschrittenem JavaScript haben
Agenda
Einführung:
- Was ist React Native?
- Was tut es für uns? Warum wählen wir es?
- Vor- und Nachteile von React Native
- React Native - Architektur
- Gemeinsame Nutzung mit Web-Projekten
- Wie sieht der React Native Code aus?
- Nutzung des Wissens über React
React- und Redux-Einführung:
- Redux-Architektur
- Reducer, Actions, State, Store und Middleware
- React im Überblick
- SFCs versus klassenbasierte Komponenten
- Komposition von Komponenten
- JSX-Struktur und Regeln
- Props
- State
- Kontrollierte und unkontrollierte Komponenten
- Virtuelles DOM vs. reales DOM
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
Single-Value-Kontrollen:
- 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"
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
Ajax in React Native:
- Warum es auf einem Gerät anders sein muss
- Die Fetch-API
- Ladeindikator anzeigen
- Anfragen stellen und Antworten verarbeiten
- Sicherheit in einer nativen Umgebung
Listen-Komponenten:
- Überprüfung der Komponenten
- Picker
- FlatList
- Sektionsliste
Touchables und Buttons:
- Die Button-API
- Button Events und Props
- Warum Touchables?
- TouchableWithoutFeedback
- TouchableNativeFeedback
- TouchableOpacity
- TouchableHighlight
- Wie deaktiviert man einen Touchable?
Ziele
React Native wird weltweit von Unternehmen eingesetzt, um plattformübergreifende Apps mit einer einzigen Codebasis zu erstellen. Sie entwickeln mit JavaScript und React-Technologien und können Ihre Apps im Apple AppStore oder im Google Play Store bereitstellen. Keine Sorge, im Seminar fangen Sie bei Null an und bauen eine umfassende App auf, die moderne Techniken und Best Practices verwendet. Lernen Sie, wie Sie mit React Native schnell und einfach plattformübergreifende native Apps erstellen können.
Zielgruppe
Entwickler
Voraussetzungen
- Alle Teilnehmer müssen ein sehr gutes Verständnis für React, Redux und fortgeschrittenem JavaScript haben
Agenda
Einführung:
- Was ist React Native?
- Was tut es für uns? Warum wählen wir es?
- Vor- und Nachteile von React Native
- React Native - Architektur
- Gemeinsame Nutzung mit Web-Projekten
- Wie sieht der React Native Code aus?
- Nutzung des Wissens über React
React- und Redux-Einführung:
- Redux-Architektur
- Reducer, Actions, State, Store und Middleware
- React im Überblick
- SFCs versus klassenbasierte Komponenten
- Komposition von Komponenten
- JSX-Struktur und Regeln
- Props
- State
- Kontrollierte und unkontrollierte Komponenten
- Virtuelles DOM vs. reales DOM
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
Single-Value-Kontrollen:
- 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"
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
Ajax in React Native:
- Warum es auf einem Gerät anders sein muss
- Die Fetch-API
- Ladeindikator anzeigen
- Anfragen stellen und Antworten verarbeiten
- Sicherheit in einer nativen Umgebung
Listen-Komponenten:
- Überprüfung der Komponenten
- Picker
- FlatList
- Sektionsliste
Touchables und Buttons:
- Die Button-API
- Button Events und Props
- Warum Touchables?
- TouchableWithoutFeedback
- TouchableNativeFeedback
- TouchableOpacity
- TouchableHighlight
- Wie deaktiviert man einen Touchable?