React Schulung

Unsere React Schulung führt dich vom ersten Component bis zu produktionstauglichen Single-Page-Apps. Du lernst React Hooks, State & Props, Routing, Formular-Handling, API-Anbindung (REST/GraphQL), State Management (Context, Redux Toolkit, React Query), TypeScript, Testing (Jest/RTL), Performance & Accessibility sowie Next.js für SSR/SSG – alles in praxisnahen Labs mit sauberer Architektur und Best Practices.

Jetzt deinen React Kurs buchen – Hooks & TypeScript sicher beherrschen, Redux Toolkit/React Query effektiv einsetzen und mit Next.js performante, SEO-starke Frontends liefern. Praxis-Labs, Code-Reviews & Zertifikat inklusive!

React Einführung

• Überblick - Was ist React

• "Hello World" in React

• Vorteile

• Alternativen

• Projekt erstellen mit dem "Create React App"-CLI

• Projekt Ordnerstruktur

• Einführung in Komponenten

• Einführung in JSX (Javascript XML oder Javascript Syntax Extension)

Komponenten

• Funktionskomponenten erstellen

• Arbeiten mit mehreren React-Komponenten

• Ausgabe von dynamischen Inhalten

• Komponenten und "props", "children", "state"

• Komponenten und Ereignisverarbeitung

• Manipulation von Zuständen

• Verwendung des useState()-Hooks zur Zustandsmanipulation

• Zustandslose ("Stateless") versus zustandsabhängige ("Stateful") Komponenten

• Weitergabe von Methoden zwischen Komponenten

• Hinzufügen einer Zweiwegbindung ("Two Way Binding")

• Arbeiten mit Listen und Bedingungen

• Bedingtes Rendern von Inhalten

Styling von React-Komponenten

• Hinzufügen von Styling mit Stylesheets

• Arbeiten mit Inline-Stilen

• Stile und Klassen dynamisch erstellen und nutzen

• Arbeiten mit dem Paket "Emotion"

• Arbeiten mit dem Paket "Styled Components"

Komponenten im Detail

• Projektstruktur: Aufteilen einer App in Komponenten

• Vergleich zwischen zustandslosen und zustandsbehafteten React-Komponenten

• Klassenkomponenten vs. Funktionskomponenten

• Übersicht über den Lebenszyklus von Komponenten

• Verwendung von "useEffect()" in Funktionskomponenten

• Optimierung von Funktionskomponenten mit "React.memo()"

• Verwendung von "React.Fragment

• "Higher-Order-Components" (HOC) nutzen

• Verwendung der Context-API: contextType & useContext()

TypeScript

• TypeScript Grundlagen: Typendeklarationen, Funktionssignaturen, Type Aliases, Generics (jeweils nach Bedarf)

• Typisierung von Komponenten-Props und -Events mit TypeScript

• Typisierung von Event-Handlern mit TypeScript

• Typisierung verschiedener Hooks mit TypeScript

React und Http-Zugriffe

• Http-Anforderungen

• Einführung in das Paket "Axios"

• Erstellen und Verarbeiten einer Http-GET-Anfrage

• Daten an den Server "POST"en

• Senden einer DELETE-Anfrage

• Fehlerbehandlung in HTTP-Aufrufen

Routing

• Routing in "Single Page Application" (SPA)

• Arbeiten mit den Paketen "react-router", "react-router-dom"

• Einrichten des Routing im Projekt

• Navigation mit Links

• Verwendung von Router-"props"

• Absolute und Relative Pfade

• Styling der ausgewählten, aktiven Route

• Parameter an Routen übergeben und auswerten

• Navigating per Programmcode

• Verschachtelte Routen

• Umleitung von Anfragen

• Schutz von Routen mit "Guards"

• Bearbeitung des 404-Errors

• "Lazy"-Loading von Routen

React und Formulare

• Formulare und Formular-Validierung

• Formularkomponenten Verwenden

• Umgang mit Benutzereingaben

• Benutzerdefinierte Formular-Validierung hinzufügen

• Validierungs-Feedback hinzufügen

• Fehlermeldungen anzeigen

React und Redux

• Die Komplexität der Zustandsverwaltung

• Den Redux-Datenfluss verstehen

• "Reducer" und "State" einrichten

• "Dispatching"-Aktionen definieren

• "Subscriptions" hinzufügen

• Das "Immutable-Update-Pattern"

• Arbeiten mit den Paketen "Redux" und "React Redux"

• Hinzufügen von Redux "Middleware"

• Verwenden der "Redux Devtools"

• Ausführen von Asynchronem Code

• Verwenden von "Action Creators"

• Verwenden von "GetState"

React und Authentifizierung

• Authentifizierung in einer "Single Page Application" (SPA)

• Authentifizierungsformulare ertellen (Login, Sign-In, Password-Recovery)

• Authentifizierungsservice nutzen

• Ressourcen schützen und automatische Weiterleitung

React und Hooks

• Einführung in "Hooks"

• Verwenden von "useState()" für Zustandsverwaltung

• Verwenden von "useEffect()" für das Laden von Daten

• Verwenden von "useCallback()"

• Verwenden "refs" und "useRef()"

• Verwenden von "useReducer()" für HTTP-Zustände

• Verwenden von "useContext()"

• Optimierung der Leistung mit "useMemo()"

• Erstellen und Verwenden von "Custom Hooks"

React und Testing

• Einführung in das Testing von React

• Testing-Werkzeuge

• Tests schreiben

• Modul-Tests

• Komponenten-Tests

• Redux-Tests

• E2E-Tests

Bereitstellung von Anwendungen

• Übersicht

• Projekterstellung

• Beispiele

Der Kurs richtet sich an Web-Entwickler, Web-Programmierer mit Erfahrung in HTML, CSS und JavaScript, die mit React Web-Anwendungen, Apps erstellen wollen.

Für deinen Besuch des React empfehlen wir Erfahrung in HTML, CSS und JavaScript.