React & TypeScript
Schulung & Kurs

Kursinhalt:

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.

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

Ob wir es Schulung, Kurs, Workshop, Seminar oder Training nennen, wir möchten Teilnehmer/innen an ihrem Punkt abholen und mit dem nötigen praktischen Wissen ausstatten, damit sie die Technologie nach der Schulung direkt anwenden und eigenständig vertiefen können.