Workshop: Moderne Pattern mit React 19

Vor kurzem ist die React Minor-Version 18.3 erschienen, die aber vor allem der Migration auf React 19 dient. Das letzte stabile React (18.2) Release, in dem es neue Features gab, stammt noch aus dem Jahr 2022. Trotzdem hat sich in der Zwischenzeit einiges in React getan und für 2024 ist endlich wieder eine React Major-Version angekündigt: React 19. In diesem Upgrade-Workshop lernst Du alles, was Du zu React 19 wissen musst. Über React hinaus zeige ich dir auch was es an wichtigen Neuerungen im Ökosystem, etwa beim Routing und beim Data Fetching gibt. Nach dem Workshop bist du auf dem aktuellen Stand der Technik!

Individuelle In-House-Schulung

Diesen Workshop biete ich als individuelle In-House-Schulung (online oder Vor-Ort) an. Da jedes Projekt und jedes Team andere Voraussetzungen und Bedürfnisse hat, bespreche ich mit euch im Vorweg eine für euch zugeschnitte Agenda.

Die unten genannten Themen sollen dafür eine grobe Orientierung bieten. Außerdem ist es in einem In-House-Workshop natürlich möglich, dass wir uns auch euren Code ansehen und konkret für eure Situation besprechen, was die Neuerungen und Änderungen in React und dem Ökosystem für euch bedeuten.

Neu in React?

Falls ihr noch Neu in React seid und erstmal auf der Suche nach React Grundlagen seid, habe ich dafür auch Workshops im Angebot.

Agenda

Wichtig! React 19 existiert zurzeit nur als Beta-Version. Es kann also sein, dass sich einzelne Themen noch bis zur endgültigen Erscheinen von React 19 ändern werden. Ich gehe aber nicht davon aus, dass es noch zu größeren Änderungen kommen wird.

Neuerungen in React 19

Ich zeige dir die wichtigsten Neuerungen von React, die die clientseitige Entwicklung betreffen:

  • Document Metadata zum Setzen von Daten in den head einer Anwendung/Seite
  • Asset-Handling (zum Beispiel zum Laden von externem JavaScript-Code)
  • Der use-Hook
  • Vereinfachtes Arbeiten mit dem React Context
  • Der React-Compiler soll das Arbeiten mit useMemo und useCallback überflüssig machen. (Hinweis: Der Compiler wird nicht Bestandteil von React 19 sein. Es ist aber davon auszugehen, dass dieser kurz nach React 19 noch 2024 veröffentlicht wird.)

Modernes Routing und Data-Fetching

Die Neuerungen von React haben auch Auswirkungen auf populäre Bibliotheken etwa zum Routing und Data Fetching. In diesem Workshop zeige ich dir die neuen Möglichkeiten anhand praxisnaher Beispiele.

  • Typsicheres Routing
  • URL und Search Parameter als Alternative zu React State
  • Effizientes Data-Fetching und Caching ohne useEffect
  • Data-Fetching mit Suspense
  • Validierung von Daten

Diese Themen beziehen sich in erster Linie auf die Entwicklung von Single-Page-Anwendungen mit React

Mein Artikel zum Thema: React 2024 – SPA oder Fullstack-Anwendung? (host europe blog)

Arbeiten mit Formularen

React 19 bietet zahlreiche neue Möglichkeiten, um effizient mit Formularen zu arbeiten. Die wichsten Möglichkeiten zeige ich dir im Workshop:

  • Hintergrund: Kontrollierte und unkontrollierte Komponenten
  • Client und Server Actions
  • Neue Hooks useActionState und useFormStatus
  • Bibliotheken zur Arbeit mit professionellen Formularen
  • Typsicherheit und Validierung von Formulardaten

Diese Themen beziehen sich sowohl auf die Entwicklung von Single-Page-Anwendungen als auch auf Fullstack-Anwendungen mit React

Fullstack-Anwendungen mit React

In diesem Workshop lernst Du, was Fullstack-Anwendungen sind und wie Du solche Anwendungen mit Next.jsentwickeln kannst.

  • React-Komponenten auf dem Server ausführen und rendern
  • React Server Components
  • "use server" und "use client" Direktiven
  • Actions
  • Streaming und Suspense

Diese Themen beziehen sich in erster Linie auf die Entwicklung von Fullstack-Anwendungen mit React, die auch serverseitig ausgeführt werden.

Mein Artikel zum Thema: Next Generation Webapps? Fullstack-Anwendungen mit React (informatik aktuell)

Eingesetzte Technologien und Frameworks

In diesem Workshop verwenden wir neuste React Technologien!

  • Eingesetzt wird React 19
  • Für das clientseitige Single-Page-Anwendungen verwenden wir den Vite-Stack für React
  • Zur Entwicklung einer Fullstack-Anwendungen werden wir Next.js mit dem App-Router in der neusten Version verwenden
  • Für Routing und Data-Fetching sehen wir uns TanStack Router bzw. TanStack Query und die Unterschiede zum React Router an.
  • Daten werden wir mit Zod typsicher beschreiben und validieren
  • Zum Testen kommt Vitest, die React Testing Library und Playwright zum Einsatz
  • ...und natürlich durchgängig TypeScript (Version 5.x)

Deine Lernziele

Nach dem Workshop hast Du aktuelle Kenntnisse über neuste React-Features und die wichtigsten Bibliotheken

  • Du kannst entscheiden, welche der Features für deine Anwendungen relevant sind und welche nicht
  • Du hast eine Grundlage um einzuschätzen, wie eine Migration bestehender Anwendungen aussieht
  • Du hast einen Überblick, was im React Ökosystem passiert und welche neuen Optionen es für typische Anwendungsfälle gibt
  • Du hast erste Schritte mit serverseitigem bzw. Fullstack-React gemacht und weißt, was Next.js ist

Praxis

Es gibt eine Menge neuen Stoff zu lernen. Um das Ganze so praktisch wie möglich zu vermitteln, mache ich während der Schulung sehr viel Live-Coding. Dadurch sind wir jederzeit in der Lage auch abweichend vom "offiziellen" Programm Fragen direkt am Code zu besprechen und zu lernen. Außerdem machen wir natürlich viele Übungen zwischendurch. So bekommt ihr gleich ein Gefühl dafür, wie sich das "neue" React anfühlt.

Anfrage

Wenn Du dich für einen Workshop interessierst, melde dich gerne bei mir. Dann können wir Inhalt, Umfang und Termin absprechen. Meine Kontaktdaten findet Du hier.

Mehr von mir zum Thema Frontend-Entwicklung

Cover React Buch (dpunkt-Verlag)

Neben den Schulungen habe ich ein Buch sowie mehrere Artikel rund um die Entwicklung moderner Frontends mit React geschrieben.

React - Grundlagen, fortgeschrittene Techniken und Praxistipps – mit TypeScript und Redux

2., überarbeitete und erweiterte Auflage, dpunkt-Verlag, 2019
Weitere Informationen