React Native - Der Einstieg in die Entwicklung mobiler Apps
1,987 students enrolled
React Native - Der Einstieg in die Entwicklung mobiler Apps
Programmiere schnell native Apps in einer Code-Basis für Android und iOS in JavaScript mit React Native und Expo!
Bestseller
1,988 students enrolled
Current price: $86.99
Original price: $124.99
Discount:
30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
- 9.5 hours on-demand video
- 16 articles
- 2 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Assignments
- Certificate of Completion
Training 5 or more people?
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business
What you'll learn
- 🚀 Bringe in kurzer Zeit deine erste eigene App aufs Handy
- 💥 Entwicklung plattformübergreifender Apps für Android und iOS
- ✨ Echte native Apps mit JavaScript
- 🔥 Moderne Programmierung mit React
- 🎉 Dynamische UIs mit FlexBox
- 🌏 Umsetzung mehrerer Beispiel-Apps
Course content
Expand all
133 lectures
09:21:36
+
–
Einleitung und erste Schritte
8 lectures
15:36
iPhone: eine App mit Expo laden
01:52
Android: eine App mit Expo laden
02:18
Tipps für die Verwendung der App Expo
01:59
Zusammenfassung und nächste Schritte
01:35
Expo-App auf dem Handy installieren
00:22
Beispiel-App (Expo Snack) im Browser anpassen
00:25
+
–
Windows: Entwicklungsumgebung für React Native einrichten
7 lectures
16:59
Windows: das JavaScript-Framework NodeJS herunterladen und installieren
02:57
Windows: git sollte installiert werden
03:25
Windows: das Kommandozeilenwerkzeug expo-cli mit npm installieren
03:15
Windows: ein Projektverzeichnis für eigene React Native Apps erstellen
01:04
Windows: den Editor VSCode herunterladen und installieren
02:39
Windows (optional): Nützliche Erweiterungen und Einstellungen für VS Code
03:34
Zusammenfassung und Links zu Webseiten
00:05
+
–
Mac: Entwicklungsumgebung für React Native einrichten
6 lectures
13:36
Mac: das JavaScript-Framework NodeJS herunterladen und installieren
03:15
Mac: Installation von NodeJS testen und Problem mit PATH beheben
04:15
Mac: das Kommandozeilenwerkzeug expo-cli mit npm installieren
01:58
Mac: ein Projektverzeichnis für eigene React Native Apps erstellen
01:19
Mac: den Editor VSCode herunterladen und installieren
02:45
Zusammenfassung und Links zu Webseiten
00:04
+
–
Projekte mit React Native starten und kennenlernen
14 lectures
37:21
Gemeinsames Programmieren der App und Code auf GitHub finden
00:20
Projekt für eine neue React Native App erstellen
04:18
Windows: React Native Packager starten
03:01
Mac: React Native Packager starten
02:30
Erinnerung: Expo-App auf dem Handy installieren
00:25
App in Expo auf dem Handy laden
02:21
Aufbau des Projektverzeichnis kennenlernen
04:23
Komponenten als Klassen deklarieren
02:50
Die Komponente in App.js als Klasse deklarieren
00:30
Bestandteile einer Komponente verstehen
03:08
Komponenten durch import-Anweisungen bekannt machen
02:31
Komponente als Klasse deklarieren
05:16
Styles in einer Komponente definieren
04:22
+
–
In die Grundlagen der Programmierung mit React Native einsteigen
10 lectures
43:12
Minimale App mit einem Zitat umsetzen
01:33
Button hinzufügen
05:58
Lokale Daten in Konstante bereitstellen
01:44
Dynamische Textinhalte anzeigen
02:56
Initialen Zustand im state-Objekt festlegen
02:14
Zustand mit setState ändern
03:50
Durch alle Zitate mit Hilfe von setState blättern
05:49
1 question
Eigene Komponente schreiben und verwenden
08:05
Eigenschaften als Props an Komponente übergeben
07:02
Zustandslose Komponente als Funktion definieren
04:01
+
–
Styling: Erscheinung und Darstellung von Komponenten beeinflusen
8 lectures
35:58
Text mit inline-Styles anpassen
02:50
Komponenten mit JavaScript stylen
07:12
Styles mit der StyleSheet-API zusammenfassen
02:46
Styling für Komponenten in der Dokumentation finden
05:20
Abstände mit View als Container-Element definieren
07:20
Textdarstellung ausrichten
02:34
Button am unteren Rand positionieren
07:48
3 questions
Links zu den erwähnten Webseiten
00:08
+
–
Eingabe von Daten auf mehreren Screens mit Modal und TextInput
12 lectures
01:08:45
Button für neues Zitat hinzufügen
03:25
Komponente mit setState und props einblenden
06:43
Komponente mit Callback und Pfeilfunktion ausblenden
08:30
Modal für neues Zitat verwenden
06:11
Inhalte des Modals zentrieren
02:48
TextInputs einheitlich mit Rahmen umgeben
08:53
TextInput für mehrzeilige Zitatinhalte konfigurieren
05:56
Eingaben der TextInputs im state-Objekt ablegen
04:09
Neues Zitat der Liste hinzufügen
10:37
Inhalte der Eingabefelder zurücksetzen
06:03
iPhone-Darstellung mit Platform und SafeAreaView anpassen
05:27
Links zu erwähnten Webseiten
00:03
+
–
Daten lokal und in der Cloud speichern
19 lectures
01:54:52
Daten auf dem Handy im AsyncStorage speichern
09:30
Daten aus dem AsyncStorage laden
04:33
async/await statt then verwenden
03:05
Lebenszyklusmethoden von Komponenten verstehen
05:59
In componentDidMount die Daten laden
02:25
Buttons mit_Style als funktionale Komponente kapseln
04:25
Wechsel zum nächsten Zitat in Methode auslagern
01:49
Button zum Löschen eines Zitats hinzufügen
06:09
Komponente für leere Zitatenliste mit Fallunterscheidung darstellen
12:18
Buttons nur in passenden Situationen anzeigen
07:48
Alert-API verwenden um Löschen eines Zitats zu bestätigen
06:59
AsyncStorage mit lokaler SQLite-Datenbank ersetzen
07:04
Tabelle und Anfragen für SQLite erstellen
17:15
Cloud-Speicher mit Firebase einrichten
03:14
Firebase im Projekt installieren und konfigurieren
07:19
Daten mit Firebase in der Cloud verwalten
09:43
Beim Laden der_Daten den ActivityIndicator darstellen
03:43
Links zu den erwähnten Webseiten
00:06
+
–
FlexBox-Layout zur Anordung von Komponenten verstehen
15 lectures
50:22
Überblick und Ablauf dieses Abschnitts
03:11
Beispiel-Projekt für FlexBox erstellen und vorbereiten
02:09
Die Komponente in App.js als Klasse deklarieren
00:26
Höhe und Breite mit absoluten Werten festlegen
04:12
Höhe und Breite in Prozenten definieren
02:12
Flexible Größe mit flex bestimmen
05:38
Größenverhältnisse mit unterschiedlichen flex-Werten festlegen
04:57
FlexBox-Ausrichtung durch flexDirection ausdrücken
05:15
justifyContent bestimmt die Darstellung auf der FlexBox-Hauptachse
05:26
Weitere mögliche Werte für alignItems (baseline, stretch)
05:22
alignSelf überschreibt die Darstellung auf der Querachse
01:34
flexWrap und alignContent ermöglichen Umbrüche
02:43
Zusammenfassung und Verweis auf Dokumentation zu FlexBox
03:53
FlexBox-Layout: Referenzen und Code
00:06
+
–
Navigationstrukturen in einer App mit react-navigation realisieren
12 lectures
59:57
Neues Projekt erstellen und starten
02:48
Die Komponente in App.js als Klasse deklarieren
00:30
react-navigation für das Projekt installieren
02:24
Navigation mit unterer Tableiste einführen
05:55
Screens als eigene Komponenten in Unterordner verwalten
05:18
AppNavigator in eigener Datei deklarieren
04:23
Tableiste mit Icons und farbig gestalten
09:47
Komplexere Navigationsstruktur mit StackNavigator vorbereiten
08:42
Prinzipien der Navigation verstehen
08:55
Parameter bei Navigationsschritten übergeben
04:39
Kopfleiste für Screens anpassen
06:29
Link zum Code und den erwähnten Webseiten
00:06
Requirements
- Du solltest mindestens ein Jahr Programmiererfahrung haben
- Kenntnisse in JavaScript sind hilfreich
- Dieser Kurs kann mit Windows, Mac oder Linux durchgeführt werden
- Für die Apps benötigst du ein iPhone (mindestens iOS 10) oder ein Android-Handy (mindestens Lollipop bzw. 5.0)
Description
Du wolltest schon immer mal eine App für dein Smartphone entwickeln, wusstest aber nicht wo du anfangen solltest? Du konntest dich nicht entscheiden, ob du eine Android-App mit Java oder Kotlin programmieren sollst? Dich hat es abgeschreckt, komplexe Tools wie Android Studio oder XCode zu installieren und zu erlernen?
Dann ist dieser Kurs wie für dich gemacht!
In diesem Kurs wirst du mit React Native in kurzer Zeit in die Lage versetzt, echte native Apps sowohl für Android-Smartphones als auch für das iPhone zu entwickeln. In wenigen Minuten wirst du deine erste App auf deinem Handy testen können – ohne aufwändige Installationen. Verwende deinen gewohnten Editor, um mit JavaScript eine Code-Basis für plattformübergreifende Apps zu programmieren!
Dieser Kurs ermöglicht dir den schnellen und unkomplizierten Einstieg in die App-Entwicklung mit React Native. Wir besprechen folgende Inhalte anhand konkreter Beispiel-Apps:
Neue Features von JavaScript und die Grundlagen von React
Gestaltung von Apps mit der StyleSheet-API
Layout für verschiedene Displaygrößen mit FlexBox
Die wichtigsten Komponenten von React Native wie TextInput und Listen (FlatList, SectionList)
Lokale Datenspeicherung mit AsyncStorage und SQLite
Daten in der Cloud mit Firebase speichern
Navigation zwischen mehreren Screens mit react-navigation v3
Einbindung von Daten aus Webservices
Mit Expo Apps für das iPhone ohne Mac entwickeln
u.v.a.m.
Mit diesem Kurs wirst du schnell deine eigenen App-Ideen umsetzen können!
Who this course is for:
- Jeder, der in kurzer Zeit native Apps für Android oder iOS bauen will
- Programmierer, die mit einer Code-Basis parallel Apps für Android und iOS umsetzen wollen