React & TypeScript

Inhalt

Wir entwickeln gemeinsam inkrementell eine moderne React-Applikation mit TypeScript und durchlaufen dabei die wichtigsten Konzepte und Best Practices der aktuellen React-Entwicklung:

Positionierung und Setup:

– Positionierung von React im modernen Frontend Framework Dschungel – Setup von Single-Page-Applikation Projekten:

• Moderne Toolchain mit Vite
• TypeScript-Konfiguration und Best Practices
• Projektstruktur und Build-Prozess

React Komponenten und Grundkonzepte:

– Erstellen von React Komponenten:

• Function Components und JSX
• Props und Component Composition
• Event-Handling und Formulare – Hooks und State-Management:
• useState, useEffect, useContext
• useReducer, useMemo, useCallback
• Custom Hooks und Hook-Patterns – Rendering-Verhalten und Lifecycle:
• Component Lifecycle und Side Effects
• Rendering-Optimierung
• Error Boundaries und Suspense

Architektur von Client-seitigen React Applikationen:

– Client-seitiges Routing:

• React Router und Navigation
• Route-Parameter und Nested Routes
• Protected Routes und Navigation Guards – Backend-Zugriff und Datenmanagement:
• Fetch API und HTTP-Kommunikation
• Datenmanagement mit TanStack Query (React Query)
• Caching und Synchronisation – State-Management-Strategien:
• Lokaler vs. globaler State
• Context API für geteilten State
• State-Management-Patterns

Advanced Topics:

– Fortgeschrittene Hook-Patterns:

• useRef und DOM-Manipulation
• useImperativeHandle und forwardRef
• Custom Hook-Bibliotheken – Composition und Code-Organisation:
• Higher-Order Components
• Render Props Pattern
• Compound Components

Performance-Optimierung:

– Performance-Techniken:

• Memoization mit React.memo
• Performance-Hooks (useMemo, useCallback)
• Code-Splitting und Lazy Loading – Profiling und Debugging:
• React DevTools
• Performance-Profiling
• Debugging-Strategien

Ausblick auf Full-Stack React:

– Modern Full-Stack Frameworks:

• Next.js für Server-Side Rendering und Static Site Generation
• React Router mit Loader/Action Pattern
• TanStack Start als moderne Alternative
• Deployment und Production Best Practices

Du lernst diese Konzepte nicht nur kennen, sondern setzt sie auch praktisch um.

Der effektive Kursinhalt kann, abhängig von Trainer, Durchführung, Dauer und Konstellation der Teilnehmer:innen, von obigen Angaben abweichen.