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