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.

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