Next:
Impressum
React Grundlagen
1
Impressum
2
Einführung in React - Was ist React und warum verwenden wir es?
2.1
Die Probleme traditioneller Frontend-Entwicklung
2.2
React’s revolutionärer Ansatz: Deklarative Programmierung
2.3
Die technischen Innovationen hinter React
2.4
JSX: Die Symbiose von Markup und Logik
2.5
Häufige Missverständnisse und ihre Auflösung
2.6
React im Kontext moderner Webentwicklung
2.7
Performance-Überlegungen von Anfang an
2.8
Die Bedeutung von TypeScript in der React-Entwicklung
2.9
Ausblick
2.10
Praktische Relevanz und Anwendung
3
Die Geschichte von React - Von FaxJS zur Compiler-Ära
3.1
Die Geburtsstunde einer Idee: Facebook 2011
3.2
Der mutige Schritt in die Öffentlichkeit: React 0.3.0
3.3
Die strategische Trennung: React 0.14
3.4
Stabilität und Reife: React 15
3.5
Die Fiber-Revolution: React 16
3.6
Die Hooks-Revolution: React 16.8
3.7
Der sanfte Übergang: React 17
3.8
Die Concurrent-Ära: React 18
3.9
Der Durchbruch zur Optimierung: React 19
3.9.1
React Compiler: Automatische Optimierung
3.9.2
Actions und Form Actions
3.9.3
Der use() Hook
3.9.4
Metadata und Document Head Management
3.9.5
Stability und Server Components
3.10
Die technologische Evolution verstehen
3.11
Der Einfluss auf das gesamte Ökosystem
3.12
Häufige Missverständnisse in der historischen Betrachtung
3.13
Lehren aus der React-Evolution
3.14
Der Blick nach vorn
4
React-Setup mit Vite – Von null zur ersten Komponente
4.1
Voraussetzungen: Node.js
4.2
Projekt erstellen: Ein Command
4.3
Dependencies installieren
4.4
Dev-Server starten
4.5
Projekt-Struktur verstehen
4.6
Die ersten Schritte
4.7
TypeScript: Warum es Standard ist
4.8
Development vs. Production
4.9
Scripts in package.json
4.10
Projekt-Organisation
4.11
Warum Vite (und nicht Create React App)?
4.12
Häufige Probleme und Lösungen
4.13
Environment Variables
4.14
Production-Deployment
4.15
Das Setup ist fertig
5
Projektstruktur und Bootstrapping mit Vite
5.1
Die Anatomie eines Vite-Projekts
5.2
Der Einstiegspunkt: index.html
5.3
Der Bootstrap-Prozess: main.tsx
5.4
Die Root-Komponente: App.tsx
5.5
Styling: index.css und App.css
5.6
Assets: public vs. src/assets
5.7
Konfiguration: vite.config.ts
5.8
TypeScript-Konfiguration: tsconfig.json
5.9
Der Unterschied zu Webpack: ESM vs. Bundle
5.10
Best Practices für Projektstruktur
5.11
Ein vollständiges Beispiel
6
Komponenten und Props – Das React-Komponentenmodell
6.1
Komponenten: UI als Funktionen
6.2
Props: Die Schnittstelle zwischen Komponenten
6.3
Prop-Typen: Mehr als Strings
6.4
Optionale Props und Defaults
6.5
Komponenten-Hierarchien und Komposition
6.6
Wiederverwendbarkeit durch Props-Design
6.7
Prop Drilling: Das Problem
6.8
Component Patterns
6.9
Ein vollständiges Beispiel: Product Card
6.10
Best Practices
7
TSX – React-Komponenten in TypeScript
7.1
Was TSX wirklich ist
7.2
Die Syntax: Ähnlich zu HTML, aber anders
7.3
Komponenten: Eigene Tags definieren
7.4
Props: Daten an Komponenten übergeben
7.5
Komplexe Props: Objekte, Arrays, Funktionen
7.6
Conditional Rendering: UI basierend auf Bedingungen
7.7
Listen rendern: map() und keys
7.8
Event Handling: Interaktivität
7.9
Komponenten verschachteln: Das Baukastensystem
7.10
Ein vollständiges Beispiel: Todo-App
7.11
TSX vs. JSX: Warum TypeScript?
7.12
Häufige Fehler und wie man sie vermeidet
8
Styling in React – Von global bis komponentenspezifisch
8.1
Das Grundproblem: CSS ist global
8.2
Ansatz 1: Globale Stylesheets
8.3
Ansatz 2: Komponenten-spezifisches CSS
8.4
Ansatz 3: CSS Modules
8.5
Ansatz 4: Inline Styles
8.6
Ansatz 5: CSS-in-JS (styled-components, Emotion)
8.7
Ansatz 6: Utility-First CSS (Tailwind)
8.8
Was wird in der Praxis verwendet?
8.9
Entscheidungshilfe
8.10
Ein vollständiges Beispiel: Button-Komponente in verschiedenen Stilen
8.11
Die ehrliche Empfehlung
9
Der Lebenszyklus von Funktionskomponenten – wie React denkt und arbeitet
9.1
Das deklarative Paradigma verstehen
9.2
Die Auslöser für Re-Renderings
9.3
Der Drei-Phasen-Zyklus: Render, Commit, Paint
9.3.1
Phase 1: Render
9.3.2
Phase 2: Commit
9.3.3
Phase 3: Paint
9.4
Zustand als Snapshot
9.5
Der Referenzvergleich und seine Konsequenzen
9.6
Flüchtigkeit und Persistenz
9.7
Die Render-Kaskade
9.8
Die Strict Mode-Warnung
9.9
Batching: Mehrere Updates, ein Rendering
10
Architektur moderner Webanwendungen – vom Server zum Client
10.1
Der Browser als Laufzeitumgebung
10.2
Die Single Page Application
10.3
Die Datenfrage: APIs als Lebensader
10.4
Die Grenzen des reinen CSR
10.5
Hybrid-Rendering: Das Beste aus beiden Welten
10.6
Die verteilte Architektur verstehen
10.7
Caching, State und Synchronisation
10.8
Die Rolle des Bundlers
10.9
Entwickler-Erfahrung und Tooling
11
Was im Browser eigentlich passiert – JavaScript, DOM und die Runtime-Architektur
11.1
Der Browser als Rendering-Maschine
11.2
Die JavaScript-Engine: Eine eigenständige Welt
11.3
Das DOM: Die Brücke zwischen zwei Welten
11.4
Die Performance-Implikationen
11.5
TypeScript: Die Entwicklungszeit-Schicht
11.6
Die Event Loop: Asynchronität koordinieren
11.7
Web APIs: Erweiterungen der Runtime
11.8
Die Entwickler-Perspektive
12
React Hooks – Die Revolution der Komponentenarchitektur
12.1
Die Ära der Klassenkomponenten: Mächtig, aber komplex
12.2
Die fundamentalen Probleme mit Klassen
12.2.1
Problem 1: Logik-Fragmentierung über Lifecycle-Methoden
12.2.2
Problem 2: Wiederverwendbarkeit und die “Wrapper Hell”
12.2.3
Problem 3: Die
this
-Problematik
12.2.4
Problem 4: Schwierige Optimierung
12.3
Der Wendepunkt: Hooks als neue Denkweise
12.4
Die Kern-Innovation: State ohne Klassen
12.5
Hooks als DAS tragende Konzept
12.6
Die neue Mental Map: Thinking in Hooks
12.7
Das Ökosystem: Alles basiert auf Hooks
12.8
Die Zukunft ist funktional
13
React Hooks – Übersicht und Zusammenhänge
13.1
Die Hook-Kategorien
13.1.1
1. State-Management: Daten verwalten
13.1.2
2. Side Effects & Lifecycle: Mit der Außenwelt interagieren
13.1.3
3. Referenzen & DOM: Persistenz ohne Reaktivität
13.1.4
4. Performance-Optimierung: Unnötige Arbeit vermeiden
13.1.5
5. Context: Globale Daten teilen
13.1.6
6. Spezielle & Fortgeschrittene Hooks
13.2
Die Hook-Landschaft: Visualisiert
13.2.1
Hierarchische Übersicht: Die Hook-Familie
13.2.2
Hook-Kombinationen: Patterns, die zusammen wirken
13.2.3
Entscheidungsbaum: Welcher Hook wann?
13.3
Häufige Hook-Kombinationen im Detail
13.3.1
Pattern 1: Async Data Loading mit Error Handling
13.3.2
Pattern 2: Global State mit Context + Reducer
13.3.3
Pattern 3: Performante Listen mit Memoization
13.3.4
Pattern 4: DOM-Manipulation mit Refs und Layout-Effects
13.4
Die Hook-Regeln: Warum sie existieren
13.5
Custom Hooks: Wiederverwendbare Hook-Logik
13.6
Die Hook-Landschaft verstehen
14
useState – Reaktiver Zustand in Funktionskomponenten
14.1
Der Kern: Ein Tupel für Zustand und Änderung
14.2
TypeScript und Typinferenz
14.3
Funktionale Updates: Der vorherige Wert als Basis
14.4
Re-Rendering: Der Zyklus verstehen
14.5
Immutabilität: Die goldene Regel
14.6
Mehrere States: Granularität vor Monolithen
14.7
Lazy Initialization: Performance bei teuren Berechnungen
14.8
Praktische Hinweise aus der Entwicklungspraxis
15
useEffect – Nebenwirkungen im Lebenszyklus einer Komponente
15.1
Das Timing verstehen
15.2
Die Anatomie eines Effects
15.3
Dependencies: Die Steuerung des Re-Run
15.4
Der Fluch der instabilen Referenzen
15.5
Cleanup: Aufräumen nach sich selbst
15.6
Asynchrone Operationen: Die Fetch-Falle
15.7
Die async/await-Einschränkung
15.8
Timer und Intervalle: Cleanup in Aktion
15.9
Mehrere Effects: Separation of Concerns
15.10
Die Endlosschleifen-Falle
15.11
Development Mode: Doppelte Effect-Ausführung
15.12
Wann useEffect nicht verwenden
16
useContext – Daten über Komponenten hinweg teilen
16.1
Das Prop Drilling Problem
16.2
Context: Ein Kommunikationskanal durch die Hierarchie
16.3
Context erstellen: Struktur und Typen
16.4
Den Provider implementieren
16.5
Context konsumieren: Der useContext-Hook
16.6
Custom Hooks: API-Design für Context
16.7
Performance: Context-Updates und Re-Renderings
16.8
Mehrere Provider: Composition
16.9
Wann Context nicht verwenden
16.10
Ein vollständiges Beispiel: Theme-Context
17
useReducer – Zustandslogik strukturieren
17.1
Das Problem: Verteilte State-Logik
17.2
Das Reducer-Pattern: Zentralisierte Logik
17.3
useReducer: Die API
17.4
TypeScript: Discriminated Unions
17.5
Die Stabilität von dispatch
17.6
State-Maschinen modellieren
17.7
Integration mit Context: Mini-Redux
17.8
Wann useState, wann useReducer?
17.9
Testing: Reducer isoliert prüfen
17.10
Praktische Patterns
18
useCallback – Funktionsreferenzen stabilisieren
18.1
Das Referenz-Problem verstehen
18.2
Die Lösung: Referenzen stabilisieren
18.3
Dependencies: Der Schlüssel zur Korrektheit
18.4
Funktionale State-Updates: Dependencies reduzieren
18.5
Die Symbiose mit React.memo
18.6
Wann useCallback sinnvoll ist
18.7
Komplexe Dependencies: Das Design-Signal
18.8
Der Unterschied zu useMemo
18.9
Performance messen, nicht raten
18.10
Praktische Patterns
19
useMemo – Rechenaufwand sparen durch gezieltes Caching
19.1
Das Konzept der Memoizierung
19.2
Wann useMemo sinnvoll ist – und wann nicht
19.3
Die Grenzen der Garantie
19.4
Dependencies: Das Herz der Memoizierung
19.5
Der Unterschied zu useCallback
19.6
Performance messen, nicht raten
19.7
Typische Fehler und ihre Vermeidung
19.8
Praktische Patterns aus dem Entwickleralltag
20
useRef – Stabile Referenzen und direkter Zugriff
20.1
Die Anatomie einer Referenz
20.2
Der erste Anwendungsfall: DOM-Zugriff
20.3
Der zweite Anwendungsfall: Persistente Werte
20.4
Das Timing von Ref-Zuweisungen
20.5
Der Unterschied zur Mutation
20.6
Callback-Refs für dynamische Szenarien
20.7
Typische Fehler und ihre Vermeidung
20.8
Praktische Patterns aus dem Entwickleralltag
21
useLayoutEffect – Reaktion auf Layout-Änderungen vor dem Paint
21.1
Das Timing verstehen: Eine kritische Millisekunde
21.2
Wann useLayoutEffect unverzichtbar ist
21.3
Die Performance-Falle
21.4
Wann useEffect ausreicht
21.5
Server-Side Rendering: Die Inkompatibilität
21.6
Praktische Patterns
21.7
Debugging: Das Timing visualisieren
21.8
Die 16ms-Regel
22
useTransition – UI-Updates priorisieren
22.1
Das Problem: Alles ist gleich dringend
22.2
Die Lösung: Priorisierung durch Transitions
22.3
Die Mechanik: isPending und startTransition
22.4
Praktische Anwendungsfälle
22.4.1
1. Live-Suche und Filterung
22.4.2
2. Tab-Navigation mit schweren Inhalten
22.4.3
3. Sortierung großer Listen
22.4.4
4. Router-Navigation
22.5
Was passiert unter der Haube?
22.6
Wann NICHT verwenden
22.7
Integration mit anderen Hooks
22.8
Performance-Monitoring
22.9
Best Practices
23
useDeferredValue – Werte verzögern, UI responsiv halten
23.1
Das Problem: Schnelle Eingabe, langsame Verarbeitung
23.2
Die Lösung: Verzögerte Werte
23.3
Die API: Einfach und deklarativ
23.4
Praktische Anwendungsfälle
23.4.1
1. Suchfeld mit großer Ergebnisliste
23.4.2
2. Live-Datenvisualisierung
23.4.3
3. Tabellen-Filterung
23.4.4
4. Responsive Text-Editor
23.5
Der Unterschied zu useTransition
23.6
Staleness Detection und UI-Feedback
23.7
Integration mit useMemo
23.8
Häufige Fehler und Fallstricke
23.9
Performance-Betrachtungen
23.10
Ein vollständiges Beispiel
23.11
Best Practices
24
useId – Stabile Identifikatoren für Accessibility
24.1
Das Hydration-Dilemma
24.2
Die Lösung: Deterministische ID-Generierung
24.3
Typische Anwendungsmuster
24.4
Wiederverwendung und Komposition
24.5
TypeScript-Integration
24.6
Was useId nicht ist
24.7
Praktische Integration in Form-Libraries
24.8
Grenzfälle und Besonderheiten
25
Custom Hooks – Wiederverwendbare State-Logik
25.1
Das Problem: Duplikation überall
25.2
Die Hook-Konvention: Mehr als nur ein Name
25.3
Regel Nummer 1: Isolation, keine gemeinsame Instanz
25.4
LocalStorage: Ein praktisches Beispiel
25.5
Data Fetching: Vom naiven Ansatz zur robusten Lösung
25.6
Window Events: Reactive Browser-APIs
25.7
Hook-Komposition: Bausteine zusammensetzen
25.8
TypeScript: Generics und Präzise Typen
25.9
Performance: Stabile Referenzen
25.10
Häufige Fehlerquellen
26
useImperativeHandle – Imperative APIs kapseln
26.1
Das Problem: Deklarativ trifft imperativ
26.2
Die Lösung: Refs mit kontrollierter API
26.3
Die Anatomie: forwardRef und useImperativeHandle
26.4
Legitime Anwendungsfälle
26.4.1
1. Fokus-Management
26.4.2
2. Media-Kontrollen
26.4.3
3. Scroll-Operationen
26.4.4
4. Animation-Trigger
26.5
Wann NICHT verwenden
26.6
Architektur-Überlegungen
26.7
Best Practices und Patterns
27
useInsertionEffect – CSS vor dem Layout-Prozess einfügen
27.1
Das Timing-Problem: Drei Effects, drei Zeitpunkte
27.2
Das CSS-in-JS-Problem
27.3
Die API: Identisch zu useEffect
27.4
Wie CSS-in-JS-Libraries es verwenden
27.5
Wann NICHT verwenden
27.6
Server-Side Rendering
27.7
Performance-Implikationen
27.8
Ein realistisches Beispiel: Minimale CSS-in-JS-Implementierung
27.9
Debugging und DevTools
27.10
Die Zukunft: CSS Modules und andere Alternativen
27.11
Fazit: Ein Hook für Library-Autoren
28
useDebugValue – Custom Hooks dokumentieren
28.1
Das Problem: Custom Hooks als Black Boxes
28.2
Die Lösung: Zustand annotieren
28.3
Die API: Einfach und fokussiert
28.4
Die Formatierungsfunktion: Performance-bewusste Annotation
28.5
Praktische Patterns
28.5.1
Pattern 1: Status-Annotation für State-Hooks
28.5.2
Pattern 2: Feature-Toggle-Hooks
28.5.3
Pattern 3: Komplexe berechnete Werte
28.5.4
Pattern 4: Authentifizierungs-Hooks
28.5.5
Pattern 5: WebSocket-Verbindungen
28.6
Wann verwenden, wann nicht
28.7
Einschränkungen und Missverständnisse
28.8
Integration mit TypeScript
28.9
Best Practices
28.10
Ein vollständiges Beispiel
29
Redux – State Management für Architektur-Puristen
29.1
Die Skepsis: Warum Redux heute oft nicht nötig ist
29.2
Wann Redux wirklich brilliert
29.3
Das Redux-Modell: Store, Actions, Reducers
29.4
Redux Toolkit: Die moderne Form
29.5
Wann Redux NICHT verwenden
29.6
Alternativen zu Redux
29.7
Entscheidungshilfe: Redux vs. Hooks vs. Alternativen
29.8
Ein ehrliches Fazit
30
Custom Hooks – Wiederverwendbare State-Logik
30.1
Das Problem: Duplikation überall
30.2
Die Hook-Konvention: Mehr als nur ein Name
30.3
Regel Nummer 1: Isolation, keine gemeinsame Instanz
30.4
LocalStorage: Ein praktisches Beispiel
30.5
Data Fetching: Vom naiven Ansatz zur robusten Lösung
30.6
Window Events: Reactive Browser-APIs
30.7
Hook-Komposition: Bausteine zusammensetzen
30.8
TypeScript: Generics und Präzise Typen
30.9
Performance: Stabile Referenzen
30.10
Häufige Fehlerquellen
31
Routing – Navigation in Single Page Applications
31.1
Die Grundarchitektur: Provider, Routes, Links
31.2
Router-Typen: Browser, Hash, Memory, Static
31.2.1
BrowserRouter: Der moderne Standard
31.2.2
HashRouter: Kompatibilität ohne Server-Konfiguration
31.2.3
MemoryRouter: Tests und Embedded-Szenarien
31.2.4
StaticRouter: Server-Side Rendering
31.3
Route-Parameter: Dynamische URLs
31.3.1
URL-Parameter: Strukturelle Identifikatoren
31.3.2
Query-Parameter: Optionale Konfiguration
31.4
Navigation und Umleitungen
31.4.1
Navigate-Komponente: Deklarative Umleitungen
31.4.2
useNavigate: Imperative Navigation
31.5
Protected Routes: Authentifizierung und Autorisierung
31.6
Server-Konfiguration und Deployment
31.7
Performance-Überlegungen
31.8
Häufige Fallstricke
32
Formular-Handling – Controlled, Uncontrolled und Validation
32.1
Das Grundproblem: Wer kontrolliert den State?
32.2
Controlled Components: React als Single Source of Truth
32.2.1
TypeScript: Event-Typisierung
32.2.2
Verschiedene Input-Typen
32.3
Uncontrolled Components: DOM als Source of Truth
32.3.1
defaultValue vs value: Der kritische Unterschied
32.4
Client-Side Validation: Verschiedene Ansätze
32.4.1
Native HTML5 Validation
32.4.2
Custom Validation mit State
32.4.3
Wiederverwendbare Validation Hook
32.5
React Hook Form: Die moderne Lösung
32.5.1
Basis-Verwendung
32.5.2
Custom Validation Logic
32.5.3
Integration mit Zod für Schema-Validation
32.6
Häufige Fehler
32.7
Performance: Optimierung großer Formulare
33
Application Layouts – Struktur statt Komponentenflut
33.1
Das Problem: Duplizierter Layout-Code
33.2
Layout-Komponenten: Die Lösung
33.3
React Router Integration: Outlet für Nested Routes
33.4
Mehrere Layouts: Auth vs. Main vs. Admin
33.5
CSS Grid vs. Flexbox: Layout-Strategien
33.5.1
Grid-Based Layout: Fixed Regions
33.5.2
Flexbox-Based Layout: Dynamic Sizing
33.6
State-Management im Layout: Sidebar Toggle
33.6.1
Context für Layout-State
33.6.2
Responsive Sidebar: Overlay auf Mobile
33.7
Navigation mit Active State
33.8
Nested Layouts: Sub-Navigation in Settings
33.9
Breadcrumbs: Hierarchie anzeigen
33.10
Protected Layouts: Auth-Check im Layout
33.11
Role-Based Layouts: Admin vs. User
33.12
Häufige Fehler
33.13
Zusammenfassung: Layout-Architektur
34
UI-Bibliotheken integrieren – Von Bootstrap bis Headless Components
34.1
Das Spektrum: CSS-Frameworks vs. Component Libraries vs. Headless
34.2
Bootstrap: Der Klassiker mit React-Bindings
34.2.1
Integration: CDN vs. npm
34.2.2
Bootstrap Theming
34.3
Material UI: Das vollständige Design-System
34.3.1
MUI Theme Customization
34.3.2
sx Prop: Inline-Styling mit Theme-Access
34.3.3
TypeScript mit MUI
34.4
PrimeReact: Enterprise-UI für Business-Apps
34.4.1
PrimeReact Theming
34.5
Chakra UI: Developer Experience im Fokus
34.5.1
Chakra Custom Theme
34.6
Headless UI: Maximale Flexibilität
34.7
Vergleich: Wann welche Library?
34.7.1
Entscheidungsbaum
34.8
Style-Kollisionen vermeiden
34.9
Performance: Bundle Size optimieren
34.9.1
Code-Splitting für Libraries
34.10
Vendor Lock-in vermeiden
34.11
TypeScript: Library-spezifische Typen
34.12
Häufige Fehler
34.13
Dark Mode mit Libraries
34.14
Migration-Strategie: Library wechseln
35
Web Workers – Nebenläufigkeit im Browser
35.1
Das Problem: Blocking Operations im Main Thread
35.2
Web Workers: Separate Threads für Heavy Tasks
35.3
Worker-Typen: Web, Shared, Service
35.3.1
Web Worker (Standard)
35.3.2
Shared Worker (selten verwendet)
35.3.3
Service Worker (separates Konzept)
35.4
TypeScript: Typsichere Worker-Kommunikation
35.5
Custom Hook: useWorker für wiederverwendbare Worker-Logic
35.6
Praxis-Beispiel 1: Large Dataset Filtering
35.7
Praxis-Beispiel 2: Image Processing
35.8
Vite-Integration: Worker als Module
35.8.1
Vite Worker Plugin (Optional)
35.9
Comlink: Abstraction über postMessage
35.10
Worker-Limitierungen: Was Workers NICHT können
35.11
Debugging: Worker-Code debuggen
35.12
Häufige Fehler
35.13
Performance-Überlegungen
35.14
WebAssembly in Workers (Ausblick)
36
WebSockets – Echtzeitdaten in React
36.1
Das Problem: Polling vs. WebSockets
36.2
Native WebSocket API: Der Grundaufbau
36.3
Custom Hook: useWebSocket für wiederverwendbare Logic
36.4
Verwendung: Chat-Komponente
36.5
TypeScript: Typsichere Messages
36.6
Reconnect-Strategien: Exponential Backoff
36.7
Heartbeat: Connection Keep-Alive
36.8
Live Dashboard: Real-time Metrics
36.9
React 18 Transitions: Smooth Updates bei vielen Messages
36.10
Socket.io: Higher-Level Alternative
36.11
Context Pattern: Global WebSocket State
36.12
Häufige Fehler
36.13
Testing: WebSocket-Komponenten testen
37
Fehlerbehandlung – Error Boundaries und Fallback-Strategien
37.1
Das Grundproblem: Fehler brechen das Rendering
37.2
Error Boundaries: Reacts Fehler-Sicherheitsnetz
37.3
Granulare Fehlerbehandlung: Mehrere Boundaries
37.4
Event-Handler: try-catch manuell
37.5
Custom Error Boundary mit Context
37.6
Suspense und Lazy Loading
37.7
Production vs. Development
37.8
Error Logging und Monitoring
37.9
Testing von Error Boundaries
37.10
Praktische Patterns
37.11
Häufige Fehler
38
Logging – Von console.log zu Production Monitoring
38.1
Das Problem mit console.log
38.2
Strukturiertes Logging mit TypeScript
38.3
Custom Logger Implementation
38.4
React-spezifische Logging-Patterns
38.4.1
Custom Hook für Component Lifecycle Logging
38.4.2
Performance Monitoring Hook
38.5
Error Boundaries mit integriertem Logging
38.6
Production Monitoring: Sentry Integration
38.7
Environment-spezifische Konfiguration
38.8
User Actions Tracking
38.9
Performance-Überlegungen
38.9.1
Lazy Evaluation
38.9.2
Batch Logging
38.9.3
Sampling für High-Frequency Logs
38.10
Häufige Fehler
38.11
Zusammenfassung: Logging-Levels und Use Cases
38.12
Setup: Installation und Basis-Konfiguration
38.13
useTranslation: Der Kern-Hook
38.14
Interpolation: Dynamische Werte in Übersetzungen
38.15
Pluralisierung: Sprachspezifische Grammatik
38.16
Namespaces: Organisation großer Übersetzungen
38.17
TypeScript: Typsichere Übersetzungen
38.18
Language Switcher: UI für Sprachwechsel
38.19
Lazy Loading: Übersetzungen on-demand laden
38.20
Trans Component: JSX in Übersetzungen
38.21
RTL-Sprachen: Right-to-Left Support
38.22
Testing: i18n in Tests
38.23
Häufige Fehler
38.24
Performance: Übersetzungen optimieren
39
Suspense und Lazy Loading – Code-Splitting für Performance
39.1
Das Problem: Bundle-Größe und Time-to-Interactive
39.2
React.lazy: Dynamischer Component Import
39.3
Suspense: Loading-Boundaries definieren
39.3.1
Mehrere Komponenten unter einer Suspense-Boundary
39.3.2
Nested Suspense: Granulare Loading-States
39.4
Route-Based Code-Splitting: Der Standard-Ansatz
39.5
TypeScript: Named Exports und Default Exports
39.6
Custom Loading Components
39.7
Error Boundaries: Lazy Loading kann fehlschlagen
39.8
Component-Based Code-Splitting: Features lazy-loaden
39.9
Preloading: Chunks vor Bedarf laden
39.10
Library Code-Splitting: Vendor-Chunks optimieren
39.11
Dynamic Imports für Non-Components
39.12
Suspense mit Data Fetching (Experimental)
39.13
Häufige Fehler
39.14
Performance-Metriken: Vorher/Nachher
39.15
Zusammenfassung: Wann was lazy-loaden?
40
APIs in React – OpenAPI, Contracts und Code-Generierung
40.1
OpenAPI: Der API-Contract als Code
40.2
Code-Generierung: Von OpenAPI zu TypeScript
40.2.1
Option 1: openapi-typescript-codegen
40.2.2
Option 2: orval (React Query Integration)
40.3
React-Integration: Generated Code verwenden
40.4
Vite Integration: Auto-Generation beim Build
40.5
DTOs vs. DAOs: Begriffe klären
40.6
Authentifizierung: Bearer Tokens in Generated Client
40.7
Error Handling: Typed API Errors
40.8
Mock Server: Development ohne Backend
40.9
Vergleich: Code-Generatoren
40.10
Watch-Mode: Auto-Regeneration bei API-Änderungen
40.11
Häufige Fehler
40.12
CI/CD Integration
41
Testing – Unit Tests und End-to-End Validierung
41.1
Die Testing-Pyramide: Theorie vs. React-Realität
41.2
Jest und React Testing Library: Das Fundament
41.2.1
Setup in Create React App und Vite
41.2.2
Der erste Component Test
41.2.3
Query-Prioritäten: Was Nutzer sehen
41.2.4
State und Re-Renders testen
41.2.5
Asynchrone Operationen: API-Calls und Loading States
41.2.6
Formulare und Validierung
41.2.7
Custom Hooks testen
41.3
End-to-End Tests: Komplette User Journeys
41.3.1
Playwright: Der moderne Standard
41.3.2
Der erste E2E Test
41.3.3
API-Mocking in E2E Tests
41.3.4
Komplexe User Journeys
41.3.5
Page Object Model
41.4
Häufige Fehler und Antipatterns
41.5
CI/CD Integration
41.6
Test-Driven Development in React
42
Deployment-Grundlagen – Von React zu Static Files
42.1
Der Build-Prozess: Von Source zu Static
42.2
Warum funktioniert das ohne Server?
42.3
Hosting-Optionen: Static File Server genügt
42.3.1
Option 1: Nginx (Production-Standard)
42.3.2
Option 2: Apache (.htaccess)
42.3.3
Option 3: Netlify (Zero-Config)
42.3.4
Option 4: Vercel (Next.js-Hersteller)
42.3.5
Option 5: AWS S3 + CloudFront
42.3.6
Option 6: GitHub Pages
42.4
Client-Side Routing: Das 404-Problem
42.5
Performance: Warum Hash-Names?
42.6
Preview: Lokales Testing des Builds
42.7
SSR vs. CSR vs. SSG: Begriffe klären
42.8
Häufige Fehler
42.9
Deployment-Checkliste
43
Build-Optimierung – Tree-Shaking, Environments und Production-Readiness
43.1
Tree-Shaking: Dead Code Elimination
43.1.1
Tree-Shaking bei Libraries
43.1.2
Bundle Analyzer: Was ist drin?
43.2
Environment-Variablen: Development vs. Production
43.2.1
TypeScript-Typen für env
43.2.2
Build mit verschiedenen Modes
43.2.3
Secrets Management: Was NICHT in .env
43.2.4
.gitignore für .env
43.3
Build-Konfiguration: Production-Optimierungen
43.3.1
Manual Chunks: Warum?
43.4
Performance-Budget: BuildFailenIf too large
43.5
Feature Flags: Conditional Code
43.6
Deployment-Environments: CI/CD Integration
44
Containerisierung – React-Apps in Docker
44.1
Das Problem: Node.js-Container sind riesig
44.2
Multi-Stage Build: Build trennen von Runtime
44.3
Nginx-Konfiguration: Client-Side Routing Support
44.4
.dockerignore: Unnötige Files nicht kopieren
44.5
Build Arguments: Environment-Variablen beim Build
44.6
Layer-Caching: Dependencies separat kopieren
44.7
Docker Compose: Multi-Container Setup
44.8
Development-Container: Hot-Reload im Docker
44.9
Production-Readiness: Health Checks
44.10
Image-Size Optimierung: Von 1GB zu 25MB
44.11
Registry: Image speichern und verteilen
44.11.1
Docker Hub
44.11.2
Private Registry (Harbor, GitLab)
44.12
CI/CD: Automated Builds
44.13
Kubernetes Deployment (Ausblick)
44.14
Security Best Practices
44.15
Häufige Fehler