React Native: Learn & Practice

Lerne React Native anhand kurzer Erklärungen, praktischer Codebeispiele und kleiner Übungen. Entdecke 148 Lektionen in 10 Modulen, öffne ein Beispiel im Coding Playground und passe es an, um die Funktionsweise der Benutzeroberfläche zu verstehen.

Ein klarer Weg von den Grundlagen zur Praxis

Beginne mit Text, Ansichten, Variablen, Komponenten, Bildern und Stilen. Weiter geht es mit Flexbox-Layouts, Formularen, Texteingabe, Schaltflächen, Touch-Interaktionen, Scrollen und Listen. Spätere Module führen in Hooks, wiederverwendbare Komponenten, Zustandsverwaltung, Performance-Konzepte, responsive Layouts und Übungsprojekte ein.

Erst verstehen, dann bearbeiten

Jede Lektion vereint ein Lernziel, eine leicht verständliche Übersicht, die wichtigsten Konzepte, Code, praktische Tipps, eine kleine Übung und Fragen zur Selbstkontrolle. Sieh dir das Beispiel zusammen mit der Erklärung an und öffne dann die bearbeitbare Version, wenn du bereit bist, zu experimentieren. Die Kennzeichnungen „Anfänger“, „Fortgeschrittene“ und „Übung“ helfen dir, den jeweiligen Kursinhalt zu verstehen.

Probiere deine eigenen Änderungen aus

Nutze den integrierten JavaScript- und JSX-Editor, um Text, Werte, Stile und das Verhalten von Komponenten anzupassen. Syntaxhervorhebung und Zeilennummern erleichtern das Nachvollziehen der Beispiele. Mit „Rückgängig“ und „Wiederherstellen“ können Sie Änderungen erkunden, während „Code zurücksetzen“ das ursprüngliche Beispiel wiederherstellt. Tippen Sie auf „App ausführen“, um die In-App-Vorschau zu öffnen, und kehren Sie dann zur Bearbeitung zurück, um es erneut zu versuchen.

Nützliche Muster entdecken

Studieren Sie kontrollierte Eingabefelder, Formularvalidierung, Passwort-Sichtbarkeit, Zeichenzähler, Listenfilter, auswählbare Elemente und leere Zustände. Üben Sie mit Zählern, Timern, einer Live-Uhr, einem Temperaturrechner, einem Trinkgeldrechner, Karten, einem Akkordeon, einfachen Tabs und einer Mini-To-Do-Liste. Diese Lernbeispiele zeigen Ihnen, wie kleine Elemente einer Benutzeroberfläche zusammenwirken.

Die passende Lektion finden

Suchen Sie nach Lektionstiteln oder filtern Sie die Bibliothek nach Modulen. Wechseln Sie zwischen allen Lektionen, laufenden Lektionen, gespeicherten Favoriten und abgeschlossenen Lektionen. Verwenden Sie die Steuerelemente „Zurück“ und „Weiter“ oder wischen Sie zwischen den Lektionen. Wenn Sie eine Lektion aus einer gefilterten Bibliothek öffnen, folgt die Navigation dieser Auswahl, sodass Sie bei den von Ihnen gewählten Themen bleiben.

Den Lernfortschritt im Blick behalten

Speichern Sie Lektionen als Lesezeichen zum Wiederholen und markieren Sie sie als abgeschlossen, wenn Sie bereit sind. Der Startbildschirm zeigt Ihren Kursfortschritt, die Anzahl der abgeschlossenen und gespeicherten Lektionen sowie Ihre Lernserie an. Setzen Sie die letzte Lektion fort oder fahren Sie mit dem nächsten unfertigen Thema fort. Fortschritt und Lesezeichen werden lokal auf Ihrem Gerät gespeichert.

Zurück zu Ihren Experimenten

Wenn Sie ein Beispiel ausführen, wird dessen Code als lokaler Entwurf für diese Lektion gespeichert. Öffnen Sie die Playground-Umgebung erneut, um den Entwurf wiederherzustellen, oder setzen Sie ihn zurück, um zum ursprünglichen Code zurückzukehren. So können Sie nach einer Pause leichter zu einem Thema zurückkehren, ohne das Ausgangsmaterial neu erstellen zu müssen.

Wählen Sie eine angenehme Darstellung

Wählen Sie den hellen Modus, den dunklen Modus oder das Systemdesign für die Lernoberfläche. Lesen Sie ein Konzept, untersuchen Sie den zugehörigen Code, nehmen Sie eine gezielte Änderung vor und üben Sie die Anwendung anhand der Übung.

Diese App richtet sich an Schüler, Anfänger mit Interesse am Programmieren und Entwickler, die Konzepte für mobile Benutzeroberflächen wiederholen. Die Beispiele werden in einer webbasierten Vorschau ausgeführt; plattformspezifische APIs und Verhaltensweisen können von einer nativen App abweichen. Die App enthält Werbung. Unabhängige Lern-App; steht in keiner Verbindung zum React Native-Projekt und wird von diesem nicht unterstützt.