Zurück zur Liste

React und Redux – Hands-on Workshop für Web Development

Kategorien Hands-on Workshops

Allgemeine Informationen
Code
RRW
Dauer
2 Tage

React ist eines der beliebtesten und meist genutzten Frontend-Frameworks. Entwickelt und selbst eingesetzt von Facebook, ist es ein zuverlässiges und mächtiges Werkzeug zur Entwicklung von Web-Applikationen. Egal ob kleine Single Page App (SPA) oder komplexes soziales Netzwerk – React skaliert mit der Komplexität Ihrer Anwendung.

React ist modular aufgebaut und konzentriert sich in seinem Kern auf das Wesentliche: das Verwalten des Applikationszustands und das performante Rendern von Komponenten in den DOM. Für nahezu alle weiteren Problemstellungen finden sich mit React kompatible Pakete, beispielsweise für Routing. So stellen Sie sich eine maßgeschneiderte Lösung zusammen, die perfekt zu Ihren Anforderungen passt.

Eine dieser Zusatzkomponenten ist Redux, eine State-Management-Bibliothek. Sie lässt sich alternativ oder ergänzend zum React-eigenen State Management benutzen. Die hinter Redux liegende Architektur ist simpel und effektiv zugleich, so dass sie nicht nur in React, sondern auch in anderen Frontend-Frameworks zum Einsatz kommt. Ein Blick lohnt sich also auf jeden Fall.

Auch beim Thema Styling mit CSS stehen verschiedene Ansätze zur Verfügung. Angefangen bei CSS-Präprozessoren wie LESS und SCSS, über CSS-Frameworks wie Bootstrap oder Material Design, bis zu Design Systems wie Storybook haben Sie die Qual der Wahl. Wir geben einen Überblick und betrachten die jeweiligen Vor- und Nachteile.

Die Schulung erfolgt sehr praxisorientiert. Mehr als die Hälfte des Workshops besteht aus angewandten Übungen zu einem durchgängigen Thema. Sie erarbeiten alle Aspekte von React und Redux anhand konkreter Aufgaben selbst. Zur Qualitätssicherung betrachten wir sowohl Unit- als auch Integrationstests mit den Test-Frameworks Jest und Testing Library. Die Trainer stehen Ihnen während der Bearbeitung der Aufgaben zur Seite. Ihr Team ist nach dem Workshop in der Lage, die erlernten Techniken direkt in der täglichen Arbeit umzusetzen.

Inhalt

React

  • Welches Konzept verfolgt React?
  • Was ist JSX und wie werden damit DOM-Elemente erzeugt?
  • Wie werden klassenbasierte und funktionale Komponenten implementiert?
  • Wie unterscheiden sich Props und State von Komponenten?
  • Welche Lifecycle-Methoden gibt es und wofür setzt man sie ein?
  • Warum sind Hooks eine funktionale Alternative zu Lifecycle-Methoden?
  • Wie gehe ich mit Events um?
  • Was sind etablierte Patterns und welche typischen Fehler gilt es zu vermeiden?

Testing

  • Wie unterscheiden sich Unit- und Integrationstests?
  • Welche Features bietet mir Jest als Test-Runner und -Framework?
  • Wie schreibe ich parametrisierte Tests?
  • Was sind Matcher und wofür setze ich sie ein?
  • Welche Philosophie steckt hinter Testing Library?
  • Wie rendere ich React-Komponenten in Test-Cases?
  • Welche Queries gibt es und wie nutze ich diese, um den DOM zu testen?
  • Wie helfen mir Tests bei der Entwicklung einer barrierefreien Anwendung (Accessibility)?
  • Wie simuliere ich Benutzereingaben (Events)?

Redux

  • Wie sieht das hinter Redux stehende Architektur-Pattern aus und welche Vorteile bietet es?
  • Was sind Store, Actions, Dispatcher und Reducer?
  • Wie integriere ich Redux in eine React-App?
  • Welche Möglichkeiten bietet das Redux Toolkit?
  • Wie kann ich mit Redux Thunk Seiteneffekte wie Benutzerinteraktionen oder Netzwerkkommunikation implementieren?
  • Wie teste ich mein State Management?

Styling (CSS)

  • Welche Ansätze zum Styling meiner Anwendung gibt es?
  • Was sind typische Probleme mit CSS und welche Lösungen bieten sich dafür an?
  • Was sind verbreitete CSS-Frameworks?
  • Wie hilft ein komponentenbasierter Ansatz bei größeren Webapplikationen den Überblick zu behalten?
  • Wann lohnen sich fortgeschrittenere Ansätze wie Micro-Frontends und Design-Systeme?
Zielgruppe
  • Software-Entwickler
Voraussetzungen
  • Kenntnisse in Software-Entwicklung, Grundkenntnisse JavaScript/TypeScript, HTML und CSS
Weitere Informationen
  • Nach dem Workshop können Sie optional einen oder mehrere nachgelagerte Coaching-Tage buchen. Der Trainer widmet sich hier den konkreten Herausforderungen, die Ihnen bei der Umsetzung der Seminarinhalte im Alltag begegnen. Zudem besteht die Möglichkeit einzelne Inhalte gezielt zu vertiefen.

Haben Sie Fragen?

Wollen Sie sich zu unserem Themen-Portfolio beraten lassen?

Contact card open Contact card close