Einführung in React

Einsatz von KI in der React-Entwicklung (begleitend im Kurs)

• 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

Einführung in moderne Frontend-Architektur

• Einordnung von React im aktuellen Ökosystem
• Kurzvergleich: Angular/Vue
• Deklarative & komponentenbasierte Architektur
• Rendering-Strategien:
  • CSR (Client Side Rendering)
  • SSR (Server Side Rendering)
  • RSC (React Server Components – Überblick)

React vs. Framework: Wichtige Klarstellung

• Was liefert React selbst – was nicht?
• Warum Server Components nur mit Framework sinnvoll nutzbar sind
• Rolle von Next.js als Referenz-Implementierung
• Abgrenzung zu Vite (Client-only Setup)

Modernes JavaScript & TypeScript für React

• ES6+ Essentials:
  • Arrow Functions
  • Destructuring
  • Module (import/export)
• Funktionale Patterns:
  • Immutability
  • map / filter / reduce
• TypeScript in React:
  • Props & State typisieren
  • Interfaces vs. Type Aliases
  • Generics in Komponenten

JSX & Rendering

• JSX Deep Dive
• Bedingungen & Listen
• Event Handling
• Controlled Components (Forms)

State Management mit modernen Hooks

• useState vs. useReducer
• Strukturierung von State
• Immutability in der Praxis

Moderne Hooks im Detail

• useEffect (richtig einsetzen & typische Fehler vermeiden)
• useMemo & useCallback (Performance)
• useRef (DOM & persistente Werte)
• Einführung in moderne React Patterns (Transitions, etc.)

Custom Hooks

• Eigene Hooks entwickeln
• Logik kapseln & wiederverwenden
• Best Practices

Datenfetching – Client vs. Server

• fetch API modern einsetzen
• Einführung in TanStack Query
  • Caching
  • Synchronisation
  • Fehlerhandling

State über Komponenten hinweg

• Prop Drilling vermeiden
• Context API sinnvoll einsetzen
• Wann globaler State nötig ist – wann nicht

React Server Components (RSC) – Deep Dive

• Konzept & Motivation
• Unterschiede:
  • Client Components
  • Server Components
• Vorteile:
  • Performance
  • kleinere Bundles
  • direkte Datenzugriffe

Routing in modernen React-Anwendungen

• File-based Routing in Next.js
• Layouts & Nested Routes
• Vergleich mit React Router

Architektur & Best Practices

• Trennung von UI & Logik
• Server-first Denken (durch RSC)
• Skalierbare Projektstrukturen
• Performance-Grundlagen

Legacy-Exkurs

• Klassenkomponenten verstehen (nur Überblick)
• Lifecycle vs. Hooks
• Migration bestehender Anwendungen

Ausblick & Ecosystem

• Styling:
  • CSS Modules
  • Tailwind
• Form Libraries (z. B. React Hook Form)
• Testing (Überblick)
• Performance & Optimierung

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

• Erfahrungen in JavaScript, HTML und CSS sind wünschenswert.

• Front-End-Entwickler