React

React Einführung

• Überblick – Was ist React
• “Hello World” in React
• Vorteile
• Alternativen
• Projekt erstellen mit dem “Create React App”-CLI
• Projekt Ordnerstruktur
• Einführung in Komponenten
• Einführung in JSX (Javascript XML oder Javascript Syntax Extension)

Komponenten

• Funktionskomponenten erstellen
• Arbeiten mit mehreren React-Komponenten
• Ausgabe von dynamischen Inhalten
• Komponenten und “props”, “children”, “state”
• 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”

Komponenten im Detail

• Projektstruktur: Aufteilen einer App in Komponenten
• Vergleich zwischen zustandslosen und zustandsbehafteten React-Komponenten
• Klassenkomponenten vs. Funktionskomponenten
• Übersicht über den Lebenszyklus von 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()

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
• 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

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

Bereitstellung von Anwendungen

• Übersicht
• Projekterstellung
• Beispiele