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 Concurrent-Ä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
Die technologische Evolution verstehen
3.10
Der Einfluss auf das gesamte Ökosystem
3.11
Häufige Missverständnisse in der historischen Betrachtung
3.12
Lehren aus der React-Evolution
4
React-Setup: Von null auf produktiv in 10 Minuten
4.1
Die vier Schritte zum modernen React-Setup
4.2
Warum Vite die Entwicklung revolutioniert hat
4.3
TypeScript: Die wichtigste Setup-Entscheidung
4.4
Code-Qualität durch automatisierte Standards
4.5
Projektorganisation für nachhaltiges Wachstum
4.6
Development vs Production: Zwei Welten, ein Codebase
4.7
Troubleshooting
4.8
Performance von Anfang an
4.9
Setup-Empfehlungen nach Projekttyp
4.10
Der Weg nach vorn
5
Grundlagen von React-Komponenten
5.1
Was ist eine React-Komponente?
5.2
Die Anatomie einer Komponente
5.3
JSX – Mehr als nur HTML
5.4
Komponenten-Komposition
5.5
Warum Komponenten so mächtig sind
5.6
Praktische Organisationstipps
5.7
Häufige Einstiegsfehler vermeiden
6
Props - Datenübertragung zwischen Komponenten
6.1
Das Konzept verstehen: Props als Funktionsparameter
6.2
Props-Syntax und Datentypen
6.3
TypeScript-Interfaces für Props
6.4
Props Destructuring: Elegantere Syntax
6.5
Optionale Props und Standardwerte
6.6
Der unidirektionale Datenfluss
6.7
Props-Validierung und Fehlerbehandlung
6.8
Komplexe Props: Objekte und Arrays
6.9
Performance-Überlegungen
6.10
Troubleshooting
6.11
Props in der Praxis: Ein vollständiges Beispiel
6.12
Der Weg zu interaktiven Komponenten
7
JSX - Die Template-Sprache von React
7.1
Was ist JSX und warum verwenden wir es?
7.2
Die Grundlagen der JSX-Syntax
7.3
JavaScript-Expressions in JSX
7.4
Conditional Rendering - Bedingte Anzeige von Inhalten
7.5
Listen und das map()-Pattern
7.6
Event Handling in JSX
7.7
JSX Fragments - Mehrere Elemente ohne Wrapper
7.8
Troubleshooting
7.9
Performance-Überlegungen
7.10
Der Weg nach vorn
8
TSX - TypeScript + JSX für typsichere React-Entwicklung
8.1
Von JSX zu TSX - Eine logische Weiterentwicklung
8.2
Props-Typisierung - Die Grundlage typsicherer Komponenten
8.3
Event-Handler-Typisierung - Sichere Interaktionsbehandlung
8.4
State-Typisierung mit useState - Lokalen Zustand sicher verwalten
8.5
Ref-Typisierung für DOM-Zugriffe
8.6
Generic Components - Wiederverwendbare typisierte Komponenten
8.7
Union Types und Optional Props - Flexible und sichere APIs
8.8
Children-Typisierung - Wrapper-Komponenten richtig typisieren
8.9
Häufige Stolpersteine und deren Vermeidung
8.10
TSX-Entwicklung
8.11
Performance-Überlegungen bei TSX
8.12
Der Weg zu fortgeschrittenen React-Patterns
9
Einführung in React Hooks
9.1
Die Motivation hinter Hooks
9.2
Was sind Hooks?
9.3
Die fundamentalen Hook-Regeln
9.3.1
Regel 1: Hooks nur auf oberster Ebene aufrufen
9.3.2
Regel 2: Hooks nur in React-Funktionen verwenden
9.4
Hook-Kategorien und ihre Anwendungsbereiche
9.4.1
State Hooks
9.4.2
Effect Hooks
9.4.3
Context Hooks
9.4.4
Performance Hooks
9.5
Häufige Stolpersteine und deren Vermeidung
9.6
Performance-Überlegungen bei Hooks
9.7
Der Weg voraus
10
React State mit useState
10.1
Was ist State und warum benötigen wir ihn?
10.2
Der useState Hook
10.3
Das Re-Rendering-Konzept verstehen
10.4
State richtig aktualisieren
10.5
Funktionale State-Updates
10.6
Troubleshooting
10.7
Performance-Überlegungen
10.8
Integration mit Event-Handling
10.9
Weitere State-Konzepte
10.10
Wann State verwenden?
11
useEffect - Side Effects und Komponenten-Lebenszyklus
11.1
Das Konzept der Side Effects verstehen
11.2
Die Grundlagen von useEffect
11.3
Dependencies richtig verstehen und verwenden
11.4
Cleanup-Funktionen für saubere Ressourcenverwaltung
11.5
Häufige Patterns
11.6
Performance-Überlegungen und Optimierungen
11.7
Debugging
12
Context und useContext Hook
12.1
Das Prop Drilling Problem
12.2
Die Context-Lösung verstehen
12.3
Context erstellen und typisieren
12.4
Provider-Komponenten implementieren
12.5
Custom Hooks für Context-Zugriff
12.6
Context in Komponenten verwenden
12.7
Komplexere Context-Strukturen
12.8
Context Composition und Provider-Hierarchien
12.9
Performance-Überlegungen bei Context
12.10
Häufige Fehler und deren Vermeidung
12.11
Integration mit bestehenden State Management Lösungen
12.12
Debugging und Entwicklungstools
13
useReducer - State-Management für komplexe Logik
13.1
Das Reducer-Pattern verstehen
13.2
Von useState zu useReducer
13.3
TypeScript und useReducer
13.4
Performance-Überlegungen
13.5
Troubleshooting
13.6
Wann useReducer die richtige Wahl ist
13.7
Integration mit anderen Hooks
13.8
Debugging und Testing
14
useCallback - Funktionen memoizieren für bessere Performance
14.1
Das fundamentale Problem mit Funktions-Erstellung
14.2
Die Lösung: Memoization verstehen
14.3
Das Dependency Array meistern
14.4
Die Symbiose mit React.memo()
14.5
Performance-Überlegungen und Messbarkeit
14.6
Troubleshooting
14.7
Patterns
14.8
Integration mit anderen Hooks
15
useMemo - Werte memoizieren für Performance-Optimierung
15.1
Das Grundprinzip von useMemo
15.2
Wann useMemo verwenden?
15.3
Unterschiede zu useCallback
15.4
Das Dependency-Array verstehen
15.5
Troubleshooting
15.6
Performance-Überlegungen und Messungen
15.7
Integration in größere Anwendungsarchitekturen
15.8
Debugging und Entwicklungstools
16
useRef - Referenzen und imperative Zugriffe
16.1
Das Konzept der Referenzen verstehen
16.2
DOM-Zugriff - Der klassische Anwendungsfall
16.3
Persistente Werte - Der weniger bekannte Anwendungsfall
16.4
Der Unterschied zwischen useState und useRef
16.5
Troubleshooting
16.6
Integration mit anderen Hooks
16.7
Performance-Überlegungen
16.8
Erweiterte Patterns
17
useLayoutEffect - Synchrone DOM-Manipulationen
17.1
Das Timing-Problem verstehen
17.2
Praktische Anwendungsfälle
17.3
Die Syntax und Verwendung
17.4
Performance-Überlegungen und häufige Fehler
17.5
Debugging und Entwicklungstools
17.6
Server-Side Rendering Überlegungen
17.7
Richtlinien
17.8
Zusammenspiel mit anderen Hooks
17.9
Fortgeschrittene Patterns
18
useTransition - Nicht-dringende Updates für bessere Performance
18.1
Das Problem verstehen: Blockierende Updates
18.2
Die Lösung: Prioritäten für Updates
18.3
Die Funktionsweise von useTransition
18.4
Praktische Anwendungsszenarien
18.5
Troubleshooting
18.6
Die Beziehung zu anderen Hooks
18.7
Performance-Überlegungen
18.8
Debugging und Entwicklung
18.9
Grenzen und Alternativen
19
useDeferredValue - Performance durch intelligente Verzögerung
19.1
Das Problem der blockierenden Updates
19.2
Das Konzept der verzögerten Werte
19.3
Intelligente Priorisierung durch React
19.4
Praktische Anwendungsszenarien
19.5
Der Unterschied zu useTransition
19.6
Erkennung von Staleness
19.7
Häufige Implementierungsfehler
19.8
Integration mit useMemo und useCallback
19.9
Performance-Messungen und Monitoring
19.10
Grenzen und Überlegungen
20
useId - Eindeutige IDs für Accessibility
20.1
Das Problem mit manuell generierten IDs
20.2
Der useId Hook als Lösung
20.3
Anwendungsfälle
20.4
Performance-Überlegungen und Optimierungen
20.5
Häufige Fehlerquellen und deren Vermeidung
20.6
Integration mit modernen Form-Bibliotheken
21
useSyncExternalStore - Externe Stores sicher integrieren
21.1
Das Problem mit externen Datenquellen
21.2
Die Anatomie von useSyncExternalStore
21.3
Praktische Implementierung und bewährte Patterns
21.4
Integration mit bestehenden Systemen
21.5
Performance-Überlegungen und Optimierungen
21.6
Troubleshooting
22
useImperativeHandle - Der Escape Hatch aus React’s deklarativer Welt
22.1
Die philosophische Frage: Deklarativ versus Imperativ
22.2
Warum überhaupt imperativ werden?
22.3
Die Anatomie von useImperativeHandle
22.4
Die Psychologie des imperativen Denkens
22.5
Typische Anwendungsfälle und ihre Berechtigung
22.6
Die Grenzen und Gefahren
22.7
Integration mit modernen React-Patterns
22.8
Refactoring-Strategien: Wege zurück zur Deklarativität
22.9
Performance
23
useInsertionEffect - Das Timing-Puzzle des modernen React
23.1
Die Entstehungsgeschichte: Warum brauchte React einen dritten Effect-Hook?
23.2
Die Geburt von useInsertionEffect: Ein Hook für die Lücke
23.3
Die Anatomie des Timings: Die drei Effect-Geschwister verstehen
23.4
CSS-in-JS: Der Hauptanwendungsfall verstehen
23.5
Die Grenzen und Gefahren: Wann Sie useInsertionEffect NICHT verwenden sollten
23.6
Performance-Implikationen: Das große Bild verstehen
23.7
Server-Side Rendering: Die Realitäten verstehen
23.8
Die Evolution der CSS-in-JS: Wohin führt die Reise?
23.9
Praktische Weisheit: Was Sie als Entwickler wissen müssen
23.10
Debugging und Entwicklertools: useInsertionEffect im Kontext
23.11
Die philosophische Dimension: Spezialisierung vs. Einfachheit
24
Redux - Vorhersagbare State-Verwaltung für React-Anwendungen
24.1
Die drei Grundprinzipien von Redux
24.2
Action Types - Die Grundlage typsicherer Redux-Entwicklung
24.3
Actions und Action Creators - Die API des State-Changes
24.4
Reducers - Pure Functions für vorhersagbare State-Updates
24.5
combineReducers - Modulare State-Struktur
24.6
Selectors - Intelligenter State-Zugriff
24.7
Redux DevTools - Debugging auf einem neuen Level
24.8
Integration mit React - Der Brückenschlag
24.9
Troubleshooting
24.10
Performance-Überlegungen
25
Custom Hooks - Die Kunst der wiederverwendbaren State-Logik
25.1
Die Motivation hinter Custom Hooks
25.2
Die Anatomie eines Custom Hooks
25.3
Die Regeln der Custom Hooks
25.4
Praktische Anwendungsfälle
25.5
Die Kunst der Hook-Komposition
25.6
Performance-Überlegungen
25.7
TypeScript und Custom Hooks
25.8
Testing von Custom Hooks
25.9
Troubleshooting
26
Redux Thunk - Asynchrone Actions in Redux
26.1
Das Problem mit asynchronen Operationen in Redux
26.2
Was ist ein Thunk?
26.3
Wie funktioniert Redux Thunk Middleware?
26.4
Praktische Anwendungsmuster
26.4.1
Loading States und Fehlerbehandlung
26.4.2
Bedingte Dispatches
26.4.3
Verkettung von Actions
26.5
TypeScript und Redux Thunk
26.6
Common Patterns
26.6.1
Fehlerbehandlung standardisieren
26.6.2
Abbruchbare Requests
26.7
Häufige Fehlerquellen und deren Vermeidung
26.8
Performance-Überlegungen
27
Redux Toolkit - Modernes Redux mit asynchronem State
27.1
Die Evolution von Redux
27.2
createAsyncThunk - Der moderne Weg für API-Integration
27.3
createSlice - Reducer-Definition ohne Boilerplate
27.4
Async State Management Patterns
27.5
Performance-Optimierungen
27.6
TypeScript-Integration
27.7
Häufige Antipatterns vermeiden
27.8
Migration von klassischem Redux
27.9
RTK Query - Der nächste Evolutionsschritt
28
Immutable State mit Immer
28.1
Das Problem komplexer immutable Updates
28.2
Immer als elegante Lösung
28.3
Technische Funktionsweise und Proxy-Magie
28.4
Integration mit React State Management
28.5
Performance-Überlegungen und Optimierungen
28.6
Troubleshooting
28.7
Produktionseinsatz
28.8
Zusammenspiel mit anderen Tools
29
Eigene Redux Middleware
29.1
Das Konzept der Middleware
29.2
Middleware-Komposition und Ausführungsreihenfolge
29.3
API Storage Zentralisierung
29.4
Loading State Management
29.5
Fehlerbehandlung und Resilience
29.6
Performance-Überlegungen
29.7
TypeScript-Integration
29.8
Testing-Strategien
29.9
Troubleshooting
29.10
Erweiterte Patterns
29.11
Debugging und Monitoring
30
mapStateToProps und connect - Das klassische Redux Pattern
30.1
Das Grundprinzip von connect()
30.2
mapStateToProps - Zugriff auf Store-Daten
30.3
mapDispatchToProps - Action-Dispatching
30.4
TypeScript-Integration und Typsicherheit
30.5
Performance-Überlegungen
30.6
Häufige Antipatterns und Fehlerquellen
30.7
Der Übergang zu React Hooks
30.8
Migration von connect() zu Hooks
30.9
Wann connect() noch relevant ist
30.10
Debugging und Entwicklungstools
31
Routing mit React Router
31.1
Das Problem ohne Routing
31.2
Grundlegende Architektur
31.3
Installation und Grundkonfiguration
31.4
Kernkomponenten im Detail
31.4.1
BrowserRouter
31.4.2
Routes und Route
31.4.3
Link-Komponenten
31.5
Troubleshooting
31.6
Performance-Überlegungen
31.7
Browser-Kompatibilität und Fallbacks
31.8
Debugging und Entwicklungstools
32
Routing-Möglichkeiten (BrowserRouter & Co)
32.1
BrowserRouter - Der moderne Standard
32.2
HashRouter - Die kompatible Alternative
32.3
MemoryRouter - Für spezielle Anwendungsfälle
32.4
StaticRouter - Für Server-Side Rendering
32.5
Technische Implementierungsdetails
32.6
Migrationspfade und Kompatibilität
32.7
Deployment-Überlegungen
32.8
Debugging und Entwicklungstools
33
Private Routen
33.1
Grundlegende Konzepte der Zugriffskontrolle
33.2
Implementierungsstrategien
33.2.1
Higher-Order Component Pattern
33.2.2
Wrapper-Komponenten-Ansatz
33.2.3
Custom Hook Pattern
33.3
Context API für Authentication State
33.4
Navigation und User Experience
33.5
Token-basierte Authentifizierung
33.6
Granulare Berechtigungen und Rollen
33.7
Sicherheitsüberlegungen
33.8
Performance und Optimierung
33.9
Testing-Strategien
33.10
Error Handling und Edge Cases
33.11
Accessibility und Benutzererfahrung
33.12
Integration mit modernen Auth-Providern
34
Umleitungen (Redirects) und Switch
34.1
Von Switch zu Routes: Eine notwendige Evolution
34.2
Die Navigate-Komponente: Moderne Umleitungen
34.3
Bedingte Umleitungen und geschützte Routen
34.4
Programmatische Navigation mit useNavigate
34.5
Troubleshooting
34.6
Performance-Überlegungen bei Umleitungen
34.7
Integration in komplexere Routing-Szenarien
35
Parameter für Routen
35.1
URL-Parameter: Strukturierte Datenübertragung
35.2
Query-Parameter: Flexible Zustandsübertragung
35.3
Parameter-Validierung und Fehlerbehandlung
35.4
Performance-Überlegungen
35.5
Häufige Fehler und deren Vermeidung
35.6
Integration mit Datenladestratgeien
36
Das exact-Keyword - Präzise Route-Definitionen
36.1
Das Problem des unpräzisen Route-Matchings
36.2
Die Mechanik des Präfix-Matchings
36.3
Das exact-Keyword als Lösung
36.4
Die Rolle der Switch-Komponente
36.5
Ausnahmen und bewusster Verzicht auf exact
36.6
Häufige Fehlerquellen und deren Vermeidung
36.7
Performance-Überlegungen
36.8
Die Evolution zu React Router v6
36.9
Migration von v5 zu v6
36.10
Moderne React-Anwendungen
36.11
Debugging von Route-Problemen
37
Code-Splitting und Bundle-Optimierung
37.1
Das Problem monolithischer Bundles
37.2
Die Grundlagen des Code-Splittings
37.3
Route-basiertes Code-Splitting
37.4
Komponenten-basiertes Code-Splitting
37.5
Suspense und Loading-States
37.6
Preloading-Strategien
37.7
Error Handling und Robustheit
37.8
Bundle-Analyse und Monitoring
37.9
Performance-Auswirkungen und Metriken
37.10
Integration mit modernen Build-Tools
37.11
Troubleshooting
37.12
Testing von Code-Splitting
38
Error Boundaries und Fehlermanagement in React
38.1
Das Konzept der Error Boundaries
38.2
Die Lifecycle-Methoden im Detail
38.3
Grenzen und Einschränkungen
38.4
Strategische Platzierung von Error Boundaries
38.5
Fallback-UI Design und Benutzererfahrung
38.6
Error-Logging und Monitoring
38.7
Häufige Implementierungsfehler
38.8
Performance-Überlegungen
38.9
Integration mit modernen React-Patterns
39
Logging in React Anwendungen
39.1
Die Evolution des Loggings in React
39.2
Die Browser Console API verstehen
39.3
Strukturiertes Logging implementieren
39.4
Logger-Klassen und -Konfiguration
39.5
Performance-Logging in React
39.6
Error Boundaries und automatisches Error-Logging
39.7
Umgebungsspezifische Logging-Strategien
39.8
Integration mit externen Monitoring-Services
39.9
Häufige Logging-Antipatterns vermeiden
39.10
Testing und Logging
39.11
Performance-Überlegungen beim Logging
40
Internationalisierung und Mehrsprachigkeit mit react-i18next
40.1
Das Fundament verstehen: i18next als Basis
40.2
Installation und grundlegende Konfiguration
40.3
Der useTranslation Hook: Das Herzstück der Integration
40.4
Interpolation: Dynamische Inhalte in Übersetzungen
40.5
Pluralisierung: Grammatikalisch korrekte Mehrsprachigkeit
40.6
Namespaces: Organisation bei komplexen Anwendungen
40.7
Right-to-Left Sprachen: Bidirektionale Unterstützung
40.8
Performance-Optimierungen bei umfangreichen Übersetzungen
40.9
TypeScript-Integration für typsichere Übersetzungen
40.10
Testing von internationalisierten Komponenten
40.11
Häufige Fehlerquellen und deren Vermeidung
40.12
Integration mit modernen React-Patterns
40.13
Deployment und Produktionsüberlegungen
41
Anbindung an APIs
41.1
Das Zusammenspiel von React und APIs
41.2
Die Fetch API als Grundlage
41.3
TypeScript-Integration für API-Responses
41.4
State-Management für API-Daten
41.5
useEffect für automatische API-Aufrufe
41.6
Error-Handling
41.7
Custom Hooks für wiederverwendbare API-Logik
41.8
Performance-Überlegungen und Race Conditions
41.9
Caching und Optimierung
41.10
Troubleshooting
42
Anbindung an APIs
42.1
Das Zusammenspiel von React und APIs
42.2
Die Fetch API als Grundlage
42.3
TypeScript-Integration für API-Responses
42.4
State-Management für API-Daten
42.5
useEffect für automatische API-Aufrufe
42.6
Error-Handling
42.7
Custom Hooks für wiederverwendbare API-Logik
42.8
Performance-Überlegungen und Race Conditions
42.9
Caching und Optimierung
43
CRACO - Ein Lehrbeispiel für Legacy-Technologien
43.1
Was ist CRACO?
43.2
Warum CRACO problematisch wurde
43.3
Die Realität von Legacy-Projekten
43.4
Moderne Alternativen und Migration
43.5
Performance und Entwickler-Experience
43.6
Lessons Learned für moderne Entwicklung
43.7
Legacy als Anti-Pattern
44
UI-Bibliotheken für React
44.1
Was sind UI-Bibliotheken und warum brauchen wir sie?
44.2
Material-UI (MUI) - Der Marktführer
44.3
Ant Design - Enterprise-fokussierte Eleganz
44.4
Chakra UI - Moderne Einfachheit
44.5
Mantine - Das Schweizer Taschenmesser
44.6
React Bootstrap - Vertrautes Territory
44.7
Entscheidungskriterien für die Bibliothekswahl
44.8
Integration und Migration
44.9
Häufige Stolpersteine und deren Vermeidung
44.10
Performance-Überlegungen
45
Unit Tests mit Jest und der React Testing Library
45.1
Das Fundament des Testens
45.2
Jest als Test-Framework
45.3
React Testing Library: Die Benutzer-zentrierte Philosophie
45.4
Anatomy eines React-Tests
45.5
Testen von Props und Komponenten-Komposition
45.6
State-Management und Asynchronität
45.7
Event-Handling und User Interactions
45.8
Formular-Testing und Validierung
45.9
Mocking-Strategien und Grenzen
45.10
Performance-Überlegungen beim Testen
45.11
Accessibility und Testing
45.12
Integrationstests und Testing-Pyramide
45.13
Troubleshooting
45.14
Test-Driven Development mit React
45.15
Wartung und Entwicklung von Tests
46
End-to-End Testing mit Cypress und Puppeteer
46.1
Die Bedeutung von E2E-Tests in React-Anwendungen
46.2
Cypress: Der entwicklerfreundliche Test-Runner
46.3
Puppeteer: Programmatische Browser-Kontrolle
46.4
Strategien für robuste E2E-Tests
46.5
Performance-Überlegungen und CI/CD-Integration
46.6
Debugging und Fehlerdiagnose
46.7
Integration in moderne React-Entwicklungsworkflows
47
Continuous Integration mit React Anwendungen
47.1
Die Grundlagen einer React-CI-Pipeline
47.2
Code-Qualität als Grundpfeiler
47.3
Automatisierte Tests als Sicherheitsnetz
47.4
Der Build-Prozess im Detail
47.5
Deployment-Strategien für React-Anwendungen
47.6
Monitoring und Fehlerbehandlung
47.7
Sicherheitsaspekte in der CI/CD-Pipeline
47.8
Optimierung der Pipeline-Performance
47.9
Erweiterte CI/CD-Konzepte
47.10
Troubleshooting
47.11
Performance-Optimierungen für große Teams