Wenn React-Anwendungen wachsen, stoßen einfache lokale States und Ad-hoc-Routing schnell an ihre Grenzen: mehrere Layouts, viele Views, Login-Bereiche, Spracheinstellungen, API-Calls und ein globaler Anwendungszustand, der überall gebraucht wird. Genau hier setzt diese Schulung an.
Sie bauen eine realistische Single-Page-Anwendung Schritt für Schritt aus:
- Zuerst strukturieren Sie den globalen State mit Redux und lernen, wie Actions, Reducer, Selectors und Middleware zusammenspielen – bevorzugt mit Redux Toolkit und modernen Patterns.
- Mit React Router realisieren Sie eine echte Mehrseiten-Navigation mit öffentlichen und geschützten Bereichen, Parametern in URLs und sinnvollen Redirects.
- Über API-Calls binden Sie Backend-Daten an, kümmern sich um Fehlerfälle, Logging und Internationalisierung (z. B. mit react-i18next) und lernen, wie Sie Ihre App mit Vite & Co. effizient bauen.
Zum Abschluss machen Sie die Anwendung mit Unit- und End-to-End-Tests robust und integrieren sie in einen Continuous-Integration-Workflow.
Use Case: Dashboard-Anwendung mit Login, Rollen & Mehrsprachigkeit
Als roter Faden begleitet Sie eine Dashboard-Anwendung für interne Business-User:
- Nutzer melden sich an und sehen je nach Rolle unterschiedliche Bereiche.
- Daten werden über eine REST-API geladen, gefiltert und in verschiedenen Views angezeigt.
- Teile der App sind nur für eingeloggte Nutzerinnen und Nutzer zugänglich (Private Routes).
Im Kurs setzen Sie u. a. um:
- Globales State Management für Authentifizierung, UI- und Fachdaten
- Routing-Struktur mit verschachtelten Routen, Parametern & Lazy Loading
- Fehlerbehandlung & Error Boundaries, Logging und ein einfaches Monitoring-Konzept
- Tests auf Component-Ebene (Jest & React Testing Library) und End-to-End-Tests mit Cypress/Puppeteer
Nach dem Seminar können Sie komplexere React-Apps planen und umsetzen, Redux bewusst einsetzen, sauberes Routing designen und mit Tests & CI die Qualität Ihrer Anwendungen nachhaltig absichern.
Zielgruppe:
Erfahrene React Entwicklerinnnen und Entwickler