Seminarinformationen
Seminar - Ziel
In diesem 3-tägigen Seminar "React für Fortgeschrittene" vertiefen Sie Ihr Wissen über React und erhalten Einblicke in zahlreiche zusätzliche Libraries aus dem React-Umfeld. Der Fokus liegt auf etablierten Konzepten wie dem Erstellen von Komponenten und dem Einsatz von Hooks, ergänzt durch relevante Entwurfsmuster und weiterführende Konzepte.
Sie machen sich mit erweiterten Funktionalitäten von React vertraut, darunter Refs, Context, Portale, Error-Boundaries sowie Methoden zur Performance-Optimierung. Zudem erhalten Sie einen Überblick über populäre Werkzeuge und Libraries aus dem React-Ökosystem, wie React-Query, Next.js, Redux, verschiedene Styling-Ansätze und Test-Tools. Dieses Seminar baut auf Ihren bestehenden React-Kenntnissen auf und hilft Ihnen, React noch wirkungsvoller und effizienter in Ihren Projekten einzusetzen.
Teilnehmer - Zielgruppe
Kurs - Voraussetzungen
Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:
Seminardauer
- 3 Tage
- 09:00 Uhr bis 17:00 Uhr
Schulungsunterlagen
Seminar-Inhalt / Agenda
Einsatz von KI in der React-Entwicklung
- Einführung in den Einsatz von ChatGPT und GitHub Copilot als Entwicklungswerkzeuge
- KI als Unterstützung für:
- Generierung von Komponenten und Hooks
- Erklären von React-Konzepten
- Debugging typischer Fehler (z. B. useEffect, State)
- Grundlagen effektiven Promptings für Entwickler
- Kritische Bewertung von KI-generiertem Code:
- Erkennen von Fehlern und veralteten Patterns
- Verständnis vor Übernahme („kein Blindes Copy & Paste“)
- Best Practices für den produktiven Einsatz im Alltag
TypeScript als Grundlage moderner React-Apps
- Einsatz von TypeScript als Standard
- Typisierung von:
- Props & komplexen Komponenten
- State & Reducern
- Events & DOM-Interaktionen
- Fortgeschrittene Patterns:
- Generics für wiederverwendbare Komponenten
- Utility Types (Partial, Pick, Record)
- Typisierte Custom Hooks
Hooks Deep Dive
- Interna & Regeln von Hooks
- useEffect:
- typische Fehler (stale closures, falsche Dependencies)
- saubere Side-Effect-Trennung
- Erweiterte Hooks:
- useMemo / useCallback (gezielt einsetzen)
- useRef (persistente Werte & DOM)
Custom Hooks & saubere Architektur
- Logik aus Komponenten extrahieren
- Wiederverwendbare Hooks designen
- Testbarkeit & Separation of Concerns
Moderne Patterns statt Legacy
- Einordnung:
- Render Props
- Higher Order Components (HOC)
- Warum diese Patterns heute ersetzt wurden durch:
Context & State-Struktur
- Context API mit TypeScript sauber einsetzen
- Grenzen von Context verstehen
- Vermeidung von unnötigem globalem State
Modernes State Management (Praxisfokus)
- Einführung in leichtgewichtige State-Lösungen:
- Vergleich:
- globaler vs. lokaler State
- atom-basierter vs. store-basierter Ansatz
- Best Practices:
- wann überhaupt globaler State nötig ist
- Vermeidung von Overengineering
Server State vs. Client State
- Trennung von:
- Einsatz von TanStack Query:
- Caching & Synchronisation
- Background Updates
- Optimistic Updates
- Warum Server State ≠ globaler State
Concurrent React verstehen
- Rendering-Modell von React 19
- Scheduling & Priorisierung
- APIs:
- startTransition
- useTransition
- useDeferredValue
Server Actions & moderne Server-Integration
- Einführung in Server Actions
- Vorteile gegenüber klassischen REST-Calls
- Integration in Next.js
- Kombination mit:
- Suspense
- Server Components
Code Splitting & Lazy Loading
- Dynamische Imports
- Suspense für Ladezustände
- Bundle-Größe optimieren
Fehlerbehandlung & Stabilität
- Error Boundaries
- Fehler in asynchronen Flows
- Strict Mode verstehen
Testing & Qualitätssicherung
- Unit- & Komponententests:
- E2E-Tests:
- Komponentendemos:
Moderne Architektur & Skalierung
- Feature-basierte Projektstrukturen
- Trennung von:
- UI
- State
- Server-Kommunikation
- Skalierung von React-Anwendungen im Team
Performance-Optimierung in der Praxis
- Performance messen:
- React DevTools Profiler
- Optimierungsstrategien:
- memo gezielt einsetzen
- useCallback / useMemo richtig nutzen
- Vermeidung unnötiger Re-Renders
Styling & Ecosystem (Überblick)
- Moderne Styling-Ansätze:
- CSS Modules
- Tailwind
- Styled Components
- Kurzüberblick:
- Authentifizierung
- Internationalisierung
- PWAs
- React Native
Weitere Schulungen zu Thema React
- u.a. in Nürnberg, Berlin, Stuttgart, München, KölnIn diesem 5-tägigen Seminar "Jakarta EE – Moderne Full Stack Entwicklung mit React und MongoDB" erhalten Sie einen umfassenden Überblick über aktuelle Webtechnologien und sind danach in der Lage, ein komplettes Webprojekt mit modernen Tools umzusetzen. Der ...
- u.a. in Nürnberg, Berlin, Stuttgart, München, KölnIn diesem 5-tägigen Seminar "ASP.NET Core-Entwicklung mit React und Redux" erlernen Sie die notwendigen Fähigkeiten, um eine moderne Webanwendung zu entwickeln, die JavaScript auf der Client-Seite und ASP.NET Core im Backend nutzt. Sie erhalten grundlegende Kenntnisse in der ...
- u.a. in Hamburg, Stuttgart, Essen, Erfurt, FreiburgIn diesem 2-tägigen Seminar "Apollo für React & GraphQL" beschäftigen Sie sich intensiv mit der modernen Webentwicklung in JavaScript mithilfe des React- und GraphQL-Frameworks Apollo. Sie lernen, wie Apollo genutzt werden kann, um die Entwicklung von React- und ...
- u.a. in Paderborn, Wien, Erfurt, Kassel, NordhausenIn diesem 2-tägigen Seminar "Erstellen von Webseiten mit Gatsby" erhalten Sie einen modernen Einblick in die Entwicklung von Weblösungen, die den Wandel von einem monolithischen CMS hin zu einem Content Mesh mit einer entkoppelten Infrastruktur für Websites ...