React und Redux (mit TypeScript)

Einführung & Überblick

• Vergleich moderner Frameworks: React, Vue, Angular

• Konzepte von komponentenbasiertem, deklarativem Rendering

• Projektstart mit create-react-app

JavaScript-Grundlagen für React

• Nutzung von Node.js und npm

• Moderne JS-Features: ES6+ (z. B. Module, Arrow Functions)

• Funktionale Programmierung in der Praxis

TypeScript für React

• Unterschiede: statische vs. dynamische Typisierung

• Typisierung für Variablen, Funktionen, Arrays, Objekte

• Einsatz von Interfaces und Typen in React-Komponenten

State Management mit Hooks

• State-Verwaltung mit useState

• Formularzustände erfassen

• Dynamische Darstellung via deklarativem Rendering

JSX & Templatesprache

• Einführung in JSX

• Binding von Inhalten und Props

• Eventhandling, Wiederholungen, Bedingte Darstellung

• Styling: Klassen, Inline-Stile

Komponentenentwicklung

• Einbindung externer Komponenten & Libraries

• Eigene Komponenten erstellen & typisieren (Props, Events, State)

• Analyse mit React Developer Tools

• Datenfluss zwischen Komponenten steuern

API-Anbindung

• HTTP-Requests mit fetch

• Nutzung von useEffect für asynchrone Datenabfragen

Klassenkomponenten (optional)

• Aufbau als Klasse vs. Funktion

• Umgang mit this

• State & Props in Klassen

React Tools & Erweiterungen

• Routing mit React Router

• Kontext-API zur globalen Zustandsverteilung

• Eigene und externe Hooks (z. B. react-query)

• Styling- und Formularbibliotheken

State Management mit Reducer & Redux

• Einführung in useReducer

• Architektur von Redux: Store, Actions, Reducer

• Setup mit Redux Toolkit

• Verwendung von Redux DevTools

• Integration in React (Hooks & Container-Komponenten)

• Aufteilen & Kombinieren von Reducern

• Async-Logik mit Thunk

• Typisierung mit TypeScript

• Redux-Hilfen: createSlice, createAction, createReducer

• Middleware & Selektoren

Testen & Demos

• Komponenten-Dokumentation mit Storybook

• Unit-Tests mit Jest

• Komponenten-Tests mit react-testing-library

• Snapshot-Tests

App-Entwicklung & Optimierung

• Progressive Web Apps (PWA) mit React

• Einstieg in React Native

• Performance-Tuning: Profiler, React.memo, useMemo, useCallback

• Code Splitting & Lazy Loading

• Server-Side Rendering (SSR) & Static Site Generators