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?

Dieser Lerninhalt wird in folgenden Lernplänen verwendet

Tags

Diese Seite weiterempfehlen