+49 911 65008-222 info@it-seminare.de

Einführung in React

Seminardauer: 3 Tage

Seminarinformationen

Seminar - Ziel

In diesem 3-tägigen Seminar "Einführung in React" erfahren Sie, wie Sie die React.js-Bibliothek sowie JSX einsetzen, um einfache, datenbasierte Benutzeroberflächen (UIs) zu entwickeln. Dabei erhalten Sie einen Überblick über die wesentlichen JavaScript-Konzepte, die für die Arbeit mit React notwendig sind.

Das Seminar behandelt zentrale Konzepte, Komponenten, Architekturen und die Syntax, die bei der Entwicklung mit React zum Einsatz kommen. Sie erhalten dabei einen fundierten Einstieg in die Grundlagen von React, um effizient mit dieser Bibliothek arbeiten zu können.

Nach Abschluss des Seminars verfügen Sie über ein solides Verständnis von React und sind in der Lage, eigene UIs mit React zu entwerfen und umzusetzen.

Teilnehmer - Zielgruppe

  • Front-End-Entwickler

Kurs - Voraussetzungen

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

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

Seminardauer

  • 3 Tage
  • 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

  • nach Absprache

Seminar-Inhalt / Agenda

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

Weitere Schulungen zu Thema React

Jakarta EE - Moderne Full Stack Entwicklung mit React und MongoDB

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In 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 ...

ASP.NET Core-Entwicklung mit React und Redux

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In 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 ...

React und GraphQL (mit TypeScript)

- u.a. in Bremen, Hannover, Zürich, Düsseldorf, Erfurt

In diesem 4-tägigen Seminar "React und GraphQL (mit TypeScript)" erhalten Sie einen umfassenden Einblick in die Kombination von React und GraphQL, um komplexe Frontend-Oberflächen zu gestalten und Daten effizient von APIs abzurufen. Beide Technologien stammen von Facebook und ...

React Native Kompaktkurs

- u.a. in Paderborn, Essen, Koblenz, Mannheim, Erfurt

In diesem 4-tägigen Seminar "React Native Kompaktkurs" erhalten Sie eine Einführung in die Entwicklung plattformübergreifender nativer Apps mit React Native. Sie arbeiten dabei mit JavaScript und React-Technologien und lernen, wie Sie Anwendungen für den Apple App ...