Dies ist der ideale Ausgangspunkt für alle, die moderne React-Grundlagen auf möglichst interaktive und praxisnahe Weise erlernen möchten.
Im Laufe dieses Kurses werden Sie über 170 interaktive Programmieraufgaben lösen und sechs spannende Projekte erstellen. Wenn Sie genug von React-Kursen haben, die Sie nur auf einen leeren Editor-Bildschirm starren lassen, sind Sie hier genau richtig! Hier werden Sie **am Ende tatsächlich React-Projekte bauen**, die Ihnen das Selbstvertrauen und die Fähigkeiten geben, reale Anwendungen in Angriff zu nehmen. Abschnitt 1: Statische Seiten (Projekt: ReactFacts-Website) In diesem einführenden Abschnitt werden Sie mit den React-Grundlagen vertraut gemacht, einschließlich Komponenten, JSX und Styling. Sie werden eine einfache ReactFacts-Website erstellen und dabei etwas über zusammensetzbaren und deklarativen Code, React-Elemente und Best Practices für die Erstellung statischer Seiten in React lernen. Behandelte Themen: - Einführung in React - Warum React? Composable & Declarative - React Elements - JSX - Erstellen von benutzerdefinierten Komponenten - Fragmente - Styling mit Klassen Abschnitt 2: Datengesteuertes React (Projekt: Travel Journal) Als Nächstes werden Sie entdecken, wie Sie Ihre React-Anwendungen dynamisch gestalten können, indem Sie wiederverwendbare Komponenten, Props und datengesteuertes Rendering einführen. In dem inspirierenden Projekt Travel Journal werden Sie Daten auf Komponenten abbilden, mit statischen Assets umgehen und Props verwenden, um das Nutzererlebnis zu personalisieren. Behandelte Themen: - Wiederverwendbare Komponenten - Props - Auswertung von JS innerhalb von JSX - Umgang mit statischen Assets - Daten auf Komponenten abbilden Abschnitt 3: React State (Projekt: Chef Claude) Dieses Modul führt Sie in die Zustandsverwaltung von React ein, die es Ihnen ermöglicht, Ereignisse zu handhaben, komplexe Zustände zu verwalten und responsive Formulare zu erstellen. Das Projekt Chef Claude wird Ihnen dabei helfen, den Unterschied zwischen Props und State zu erkennen, bedingtes Rendering zu implementieren und Komponenten basierend auf Benutzerinteraktion dynamisch zu stylen. Behandelte Themen: - Event-Listener - Props vs. State - Erstellen & Ändern von State - Komplexer State - Formulare & Formular-Aktionen - Bedingtes Rendering - Setzen von State von Kindern - Dynamische Styles Abschnitt 4: Seiteneffekte (Projekt: Meme Generator) Erforschen Sie Seiteneffekte in React mit diesem Modul über Datenabrufe, kontrollierte Komponenten und Referenzen. Im Meme-Generator-Projekt üben Sie die Verwaltung von Seiteneffekten, die Optimierung von Abhängigkeiten und die Bereinigung von Ressourcen, wodurch Sie eine solide Grundlage für den Umgang mit externen Daten und Effekten erhalten. Behandelte Themen: - Kontrollierte Komponenten/Formulare - Funktionale Programmierung in React - Abrufen von Daten - Umgang mit Seiteneffekten - Abhängigkeiten von Seiteneffekten - Bereinigung von Seiteneffekten - Referenzen Abschnitt 5: Abschlussprojekt 1: Tenzies-Spiel In diesem Abschlussprojekt müssen Sie alles, was Sie gelernt haben, in die Tat umsetzen, indem Sie ein komplettes Tenzies-Spiel erstellen. Durch Schritt-für-Schritt-Herausforderungen werden Sie Ihre Fähigkeiten verbessern, indem Sie Lazy State Initialisierung und Barrierefreiheit lernen und ein ausgefeiltes, interaktives Erlebnis schaffen. Behandelte Themen: - Serie von Herausforderungen, um das Capstone-Projekt zu erstellen - Lazy State Initialisierung - Verbesserungen der Barrierefreiheit Abschnitt 6: Capstone-Projekt 2: Assembly: Endgame In diesem abschließenden Capstone-Projekt müssen Sie eine Reihe von Herausforderungen meistern, um eine komplexe App mit mehreren Funktionen zu erstellen. Am Ende von Assembly: Endgame werden Sie praktische Erfahrungen bei der Lösung von Problemen und der Kombination aller React-Fähigkeiten gesammelt haben, die Sie im Laufe des Kurses entwickelt haben. Behandelte Themen: Eine Reihe von Herausforderungen, um das Capstone-Projekt zu erstellen Warum dieser Kurs? Dieser Kurs ist voll von Programmierherausforderungen, die Sie durch das Schreiben von React-Code direkt im Browser lösen werden! Ehe Sie sich versehen, haben Sie sechs interaktive React-Anwendungen geschrieben! Sie werden in diesem Kurs auch vom zeitlich gestaffelten Lernen und von Wiederholungen profitieren. Nehmen Sie sich Zeit (Tage/Wochen), um den Kurs zu beenden, und planen Sie viele Pausen ein. Versuchen Sie nicht, alles auf einmal zu lernen. Wenn Sie fertig sind, werden Sie sich in Ihren React-Kenntnissen sicher fühlen und bereit sein, Ihre Reise als Programmierer fortzusetzen.