Einführung in React

Ziele der Schulung

In dieser 3-tägigen Schulung "Einführung in React" lernen Sie, wie Sie die React.js-Bibliothek und JSX verwenden, um einfache datengesteuerte Benutzeroberflächen (UIs) zu erstellen. Sie erhalten einen Überblick über die notwendigen JavaScript-Konzepte, die für die Arbeit mit React erforderlich sind.

Der Kurs deckt die wichtigsten Konzepte, Komponenten, Architekturen und die Syntax ab, die bei der Entwicklung mit React verwendet werden. Hierbei werden Sie einen umfassenden Einblick in die Grundlagen von React gewinnen, um effektiv mit dieser Bibliothek zu arbeiten.

Am Ende des Kurses werden Sie ein solides Verständnis für React haben und in der Lage sein, eigene UIs mit React zu erstellen und zu gestalten.

Zielgruppe Seminar

• Front-End-Entwickler

Voraussetzungen

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

• Erfahrungen in JavaScript, HTML und CSS sind wünschenswert.

Seminarinhalt

Einsatz von KI in der React-Entwicklung (begleitend im Kurs)

• 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

Einführung in moderne Frontend-Architektur

• Einordnung von React im aktuellen Ökosystem
• Kurzvergleich: Angular/Vue
• Deklarative & komponentenbasierte Architektur
• Rendering-Strategien:
  • CSR (Client Side Rendering)
  • SSR (Server Side Rendering)
  • RSC (React Server Components – Überblick)

React vs. Framework: Wichtige Klarstellung

• Was liefert React selbst – was nicht?
• Warum Server Components nur mit Framework sinnvoll nutzbar sind
• Rolle von Next.js als Referenz-Implementierung
• Abgrenzung zu Vite (Client-only Setup)

Modernes JavaScript & TypeScript für React

• ES6+ Essentials:
  • Arrow Functions
  • Destructuring
  • Module (import/export)
• Funktionale Patterns:
  • Immutability
  • map / filter / reduce
• TypeScript in React:
  • Props & State typisieren
  • Interfaces vs. Type Aliases
  • Generics in Komponenten

JSX & Rendering

• JSX Deep Dive
• Bedingungen & Listen
• Event Handling
• Controlled Components (Forms)

State Management mit modernen Hooks

• useState vs. useReducer
• Strukturierung von State
• Immutability in der Praxis

Moderne Hooks im Detail

• useEffect (richtig einsetzen & typische Fehler vermeiden)
• useMemo & useCallback (Performance)
• useRef (DOM & persistente Werte)
• Einführung in moderne React Patterns (Transitions, etc.)

Custom Hooks

• Eigene Hooks entwickeln
• Logik kapseln & wiederverwenden
• Best Practices

Datenfetching – Client vs. Server

• fetch API modern einsetzen
• Einführung in TanStack Query
  • Caching
  • Synchronisation
  • Fehlerhandling

State über Komponenten hinweg

• Prop Drilling vermeiden
• Context API sinnvoll einsetzen
• Wann globaler State nötig ist – wann nicht

React Server Components (RSC) – Deep Dive

• Konzept & Motivation
• Unterschiede:
  • Client Components
  • Server Components
• Vorteile:
  • Performance
  • kleinere Bundles
  • direkte Datenzugriffe

Routing in modernen React-Anwendungen

• File-based Routing in Next.js
• Layouts & Nested Routes
• Vergleich mit React Router

Architektur & Best Practices

• Trennung von UI & Logik
• Server-first Denken (durch RSC)
• Skalierbare Projektstrukturen
• Performance-Grundlagen

Legacy-Exkurs

• Klassenkomponenten verstehen (nur Überblick)
• Lifecycle vs. Hooks
• Migration bestehender Anwendungen

Ausblick & Ecosystem

• Styling:
  • CSS Modules
  • Tailwind
• Form Libraries (z. B. React Hook Form)
• Testing (Überblick)
• Performance & Optimierung

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