React für Fortgeschrittene

Ziele der Schulung

In dieser 3-tägigen Schulung "React für Fortgeschrittene" lernen Sie eine vertiefte Behandlung von React und erhalten Einblicke in viele zusätzliche Libraries aus dem React-Umfeld. Der Kurs konzentriert sich auf bekannte Konzepte wie das Schreiben von Komponenten und die Verwendung von Hooks, während zugehörige Entwurfsmuster und Konzepte vorgestellt werden.

Sie werden erweiterte Funktionalitäten von React kennenlernen, wie z.B. Refs, Context, Portale, Error-Boundaries und Techniken zur Performance-Optimierung. Außerdem werden Sie einen Überblick über beliebte Werkzeuge und Libraries aus dem React-Universum erhalten, darunter React-Query, Next.js, Redux, Styling- und Test-Tools. Dieser Kurs baut auf Ihren vorhandenen React-Kenntnissen auf und ermöglicht es Ihnen, React effektiver und effizienter in Ihren Projekten einzusetzen.

Zielgruppe Seminar

• Entwickler

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Besuch des Kurses "Einführung in React" oder vergleichbare Kenntnisse

Seminarinhalt

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:
  • Hooks
  • Composition

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:
  • Zustand
  • Jotai
• 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:
  • UI State
  • Server State
• 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:
  • React Testing Library
• E2E-Tests:
  • Cypress
• Komponentendemos:
  • Storybook

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

Open Badge für dieses Seminar - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erhalten Sie zusätzlich zu Ihrem Teilnehmerzertifikat ein digitales Open Badge (Zertifikat) – Ihren modernen Nachweis für erworbene Kompetenzen.

Ihr Open Badge ist jederzeit in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com-Konto verfügbar. Mit wenigen Klicks können Sie diesen digitalen Nachweis in sozialen Netzwerken teilen, um Ihre Expertise sichtbar zu machen und Ihr berufliches Profil gezielt zu stärken.

Übersicht: React Schulungen Portfolio

Mehr zu den Vorteilen von Badges

Kundenbewertungen

Seminare kurz vor der Durchführung