- React Einführung
- Überblick - Was ist React
- "Hello World" in React
- Vorteile von React
- React Alternativen
- Projekt erstellen mit dem "Create React App"-CLI
- Projekt Ordnerstruktur
- Einführung in React-Komponenten
- Einführung in JSX (Javascript XML oder Javascript Syntax Extension)
- React-Komponenten
- Funktionskomponenten erstellen
- Arbeiten mit mehreren React-Komponenten
- Ausgabe von dynamischen Inhalten
- React-Komponenten und "props", "children", "state"
- React-Komponenten und Ereignisverarbeitung
- Manipulation von Zuständen
- Verwendung des useState()-Hooks zur Zustandsmanipulation
- Zustandslose ("Stateless") versus zustandsabhängige ("Stateful") Komponenten
- Weitergabe von Methoden zwischen Komponenten
- Hinzufügen einer Zweiwegbindung ("Two Way Binding")
- Arbeiten mit Listen und Bedingungen
- Bedingtes Rendern von Inhalten
- Styling von React-Komponenten
- Hinzufügen von Styling mit Stylesheets
- Arbeiten mit Inline-Stilen
- Stile und Klassen dynamisch erstellen und nutzen
- Arbeiten mit dem Paket "Emotion"
- Arbeiten mit dem Paket "Styled Components"
- React-Komponenten im Detail
- Projektstruktur: Aufteilen einer App in React-Komponenten
- Vergleich zwischen zustandslosen und zustandsbehafteten React-Komponenten
- Klassenkomponenten vs. Funktionskomponenten
- Übersicht über den Lebenszyklus von React-Komponenten
- Verwendung von "useEffect()" in Funktionskomponenten
- Optimierung von Funktionskomponenten mit "React.memo()"
- Verwendung von "React.Fragment
- "Higher-Order-Components" (HOC) nutzen
- Verwendung der Context-API: contextType & useContext()
- React mit TypeScript
- TypeScript Grundlagen: Typendeklarationen, Funktionssignaturen, Type Aliases, Generics (jeweils nach Bedarf)
- Typisierung von Komponenten-Props und -Events mit TypeScript
- Typisierung von Event-Handlern mit TypeScript
- Typisierung verschiedener Hooks mit TypeScript
- React und Http-Zugriffe
- Http-Anforderungen in React
- Einführung in das Paket "Axios"
- Erstellen und Verarbeiten einer Http-GET-Anfrage
- Daten an den Server "POST"en
- Senden einer DELETE-Anfrage
- Fehlerbehandlung in HTTP-Aufrufen
- React und Routing
- Routing in "Single Page Application" (SPA)
- Arbeiten mit den Paketen "react-router", "react-router-dom"
- Einrichten des Routing im Projekt
- Navigation mit Links
- Verwendung von Router-"props"
- Absolute und Relative Pfade
- Styling der ausgewählten, aktiven Route
- Parameter an Routen übergeben und auswerten
- Navigating per Programmcode
- Verschachtelte Routen
- Umleitung von Anfragen
- Schutz von Routen mit "Guards"
- Bearbeitung des 404-Errors
- "Lazy"-Loading von Routen
- React und Formulare
- Formulare und Formular-Validierung
- Formularkomponenten Verwenden
- Umgang mit Benutzereingaben
- Benutzerdefinierte Formular-Validierung hinzufügen
- Validierungs-Feedback hinzufügen
- Fehlermeldungen anzeigen
- React und Redux
- Die Komplexität der Zustandsverwaltung
- Den Redux-Datenfluss verstehen
- "Reducer" und "State" einrichten
- "Dispatching"-Aktionen definieren
- "Subscriptions" hinzufügen
- Das "Immutable-Update-Pattern"
- Arbeiten mit den Paketen "Redux" und "React Redux"
- Hinzufügen von Redux "Middleware"
- Verwenden der "Redux Devtools"
- Ausführen von Asynchronem Code
- Verwenden von "Action Creators"
- Verwenden von "GetState"
- React und Authentifizierung
- Authentifizierung in einer "Single Page Application" (SPA)
- Authentifizierungsformulare ertellen (Login, Sign-In, Password-Recovery)
- Authentifizierungsservice nutzen
- Ressourcen schützen und automatische Weiterleitung
- React und Hooks
- Einführung in "Hooks"
- Verwenden von "useState()" für Zustandsverwaltung
- Verwenden von "useEffect()" für das Laden von Daten
- Verwenden von "useCallback()"
- Verwenden "refs" und "useRef()"
- Verwenden von "useReducer()" für HTTP-Zustände
- Verwenden von "useContext()"
- Optimierung der Leistung mit "useMemo()"
- Erstellen und Verwenden von "Custom Hooks"
- React und Testing
- Einführung in das Testing von React
- Testing-Werkzeuge
- Tests schreiben
- Modul-Tests
- Komponenten-Tests
- Redux-Tests
- E2E-Tests
- React und Bereitstellung von Anwendungen
- Übersicht
- Projekterstellung
- Beispiele
LernzieleNach dem Seminarbesuch kennen Sie die Grundlagen von React, Hooks, Redux, React Routing und vieles mehr und können eigene Anwendungen mit Hilfe des React Frameworks erstellen.
ZielgruppenWeb-Entwickler, Web-Programmierer mit Erfahrung in HTML, CSS und JavaScript, die mit React Web-Anwendungen, Apps erstellen wollen.
