React für Fortgeschrittene

Einsatz von KI in der React-Entwicklung

• Einführung in den Einsatz von ChatGPT und GitHub Copilot als Entwicklungswerkzeuge
• KI als Unterstützung für:
  • Generierung von Komponenten und Hooks
  • Erklären von React-Konzepten
  • Debugging typischer Fehler (z. B. useEffect, State)
• Grundlagen effektiven Promptings für Entwickler
• Kritische Bewertung von KI-generiertem Code:
  • Erkennen von Fehlern und veralteten Patterns
  • Verständnis vor Übernahme („kein Blindes Copy & Paste”)
• Best Practices für den produktiven Einsatz im Alltag

TypeScript als Grundlage moderner React-Apps

• Einsatz von TypeScript als Standard
• Typisierung von:
  • Props & komplexen Komponenten
  • State & Reducern
  • Events & DOM-Interaktionen
• Fortgeschrittene Patterns:
  • Generics für wiederverwendbare Komponenten
  • Utility Types (Partial, Pick, Record)
  • Typisierte Custom Hooks

Hooks Deep Dive

• Interna & Regeln von Hooks
• useEffect:
  • typische Fehler (stale closures, falsche Dependencies)
  • saubere Side-Effect-Trennung
• Erweiterte Hooks:
  • useMemo / useCallback (gezielt einsetzen)
  • useRef (persistente Werte & DOM)

Custom Hooks & saubere Architektur

• Logik aus Komponenten extrahieren
• Wiederverwendbare Hooks designen
• Testbarkeit & Separation of Concerns

Moderne Patterns statt Legacy

• Einordnung:
  • Render Props
  • Higher Order Components (HOC)
• Warum diese Patterns heute ersetzt wurden durch:
  • Hooks
  • Composition

Context & State-Struktur

• Context API mit TypeScript sauber einsetzen
• Grenzen von Context verstehen
• Vermeidung von unnötigem globalem State

Modernes State Management (Praxisfokus)

• Einführung in leichtgewichtige State-Lösungen:
  • Zustand
  • Jotai
• Vergleich:
  • globaler vs. lokaler State
  • atom-basierter vs. store-basierter Ansatz
• Best Practices:
  • wann überhaupt globaler State nötig ist
  • Vermeidung von Overengineering

Server State vs. Client State

• Trennung von:
  • UI State
  • Server State
• Einsatz von TanStack Query:
  • Caching & Synchronisation
  • Background Updates
  • Optimistic Updates
• Warum Server State ≠ globaler State

Concurrent React verstehen

• Rendering-Modell von React 19
• Scheduling & Priorisierung
• APIs:
  • startTransition
  • useTransition
  • useDeferredValue

Server Actions & moderne Server-Integration

• Einführung in Server Actions
• Vorteile gegenüber klassischen REST-Calls
• Integration in Next.js
• Kombination mit:
  • Suspense
  • Server Components

Code Splitting & Lazy Loading

• Dynamische Imports
• Suspense für Ladezustände
• Bundle-Größe optimieren

Fehlerbehandlung & Stabilität

• Error Boundaries
• Fehler in asynchronen Flows
• Strict Mode verstehen

Testing & Qualitätssicherung

• Unit- & Komponententests:
  • React Testing Library
• E2E-Tests:
  • Cypress
• Komponentendemos:
  • Storybook

Moderne Architektur & Skalierung

• Feature-basierte Projektstrukturen
• Trennung von:
  • UI
  • State
  • Server-Kommunikation
• Skalierung von React-Anwendungen im Team

Performance-Optimierung in der Praxis

• Performance messen:
  • React DevTools Profiler
  • Optimierungsstrategien:
  • memo gezielt einsetzen
  • useCallback / useMemo richtig nutzen
  • Vermeidung unnötiger Re-Renders

Styling & Ecosystem (Überblick)

• Moderne Styling-Ansätze:
  • CSS Modules
  • Tailwind
  • Styled Components
• Kurzüberblick:
  • Authentifizierung
  • Internationalisierung
  • PWAs
  • React Native

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Besuch des Kurses Einführung in React oder vergleichbare Kenntnisse

• Entwickler