React lernen: Comprehensive Guide
React ist die beliebteste JavaScript-UI-Bibliothek. Diese Seite führt dich komplett von Anfänger zum Profi.
Was ist React?
React ist eine JavaScript-Bibliothek für Benutzeroberflächen. Sie ermöglicht:
- Komponenten-basiert: Modular bauen
- Deklarativ: Beschreibe, was angezeigt werden soll
- Effizient: Virtual DOM für Performance
- Flexibel: Passt zu allen Projektgrößen
Warum React lernen?
- ~70% der Frontend-Jobs
- Großes Ökosystem
- Gutes Gehalt
- Viele Learning-Resources
- Aktive Community
Voraussetzungen
- JavaScript-Grundlagen (wichtig!)
- HTML/CSS Basis
- Browser APIs Verständnis
JavaScript für Anfänger - falls nötig
React Learning Path
Phase 1: JSX und Komponenten (1–2 Wochen)
- JSX Syntax verstehen
- Funktionskomponenten
- Props verwenden
- Komponenten-Struktur
- Return/Rendering
- Conditions in JSX
Phase 2: State und Hooks (2 Wochen)
- useState Hook verstehen
- useEffect Hook verstehen
- Side Effects
- Dependency Arrays
- Hook Rules
Phase 3: Event Handling und Formulare (1 Woche)
- Event Handlers
- Form Handling
- Controlled Components
- Input Validation
Phase 4: Erweiterte Hooks (2 Wochen)
- useContext
- useReducer
- Custom Hooks
- useCallback, useMemo
- useRef
Phase 5: Routing und Navigation (1 Woche)
- React Router
- Seiten-Navigation
- URL Parameters
- Navigation Guards
- Nested Routes
Phase 6: State Management (2–3 Wochen)
- Context API
- OR: Redux/Redux Toolkit
- OR: Zustand/Jotai (moderne Alternativen)
- State Design Patterns
Phase 7: Performance und Testing (2 Wochen)
- Code Splitting
- Lazy Loading
- Memoization
- Unit Tests mit Jest/Vitest
- Component Tests mit React Testing Library
- E2E Tests
Phase 8: Capstone Projekt (2–4 Wochen)
Große React-App:
- Mehrere Seiten
- API Integration
- State Management
- Testing
- Deployment
Häufige Anfängerfehler
- ✗ Direkt State mutieren (immer neue Objekte)
- ✗ Zu viel State (viel in einem Component)
- ✗ Props Drilling (Context/State Management nutzen)
- ✗ Infinite Loops in useEffect (dependency array vergessen)
- ✗ Keine Keys in Listen
- ✗ Business Logic in Components (Custom Hooks machen)
Next.js nach React
Nachdem React solide sitzt: Next.js lernen für Full-Stack Entwicklung.
TypeScript mit React
Optional aber empfohlen: