React - Power Workshop

Seminarziel

Nach 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.

Inhalt

• 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