Ich biete Schulungen für dich und dein Team zur Entwicklung von Frontends und Single-Page-Applications (SPAs) mit React bzw. Fullstack-Anwendungen mit React und Next.js an. (Weitere Themen auf Anfrage).
Im Vorwege legen wir gemeinsam eine für Euch individuelle Agenda fest. Dabei berücksichtigen wir, welche Vorkenntnisse vorhanden und welche Schwerpunkte gewünscht sind. Beispielhafte Inhalte einer React Schulung findest Du unten, aber natürlich helfe ich Euch bei der Erstellung der Agenda und Auswahl der Themen.
2024 wird endlich wieder ein neues React-Release erscheinen.
In einem "Update"-Workshop zeige ich euch aber nicht nur die Neuerungen, die es in React 19 gibt, wie etwa Actions und React Server Components. Wir sehen uns auch an, wie das Ökosystem um React herum auf die Neuerung reagiert und welche Änderungen und Verbesserung sich zum Beispiel beim Data-Fetching mit Suspense und TanStack Query sowie beim Routing ergeben.
Hier findest Du beispielhaft mögliche Inhalte einer React Schulung.
Die genauen Schwerpunkte und die Agenda lege ich mit euch gemeinsam im Vorweg fest, um auf eure individuellen Bedürfnisse einzugehen.
Das Herzstück jeder React Anwendung sind Komponenten. Angefangen wird mit kleinen, isolierten Komponenten, die sich gut wiederverwenden lassen. Diese Komponenten werden dann zu kompletten Anwendungen zusammengesteckt.
Komponenten werden in React ohne Templatesprache programmiert! Stattdessen kommt React mit einer JavaScript Spracherweiterung mit dem Namen JSX her, die es erlaubt, HTML-artigen Code direkt in deinen JavaScript-Code zu schreiben. Im Workshop sehen wir uns an, wie die JSX Syntax aussieht und wie du deine in JSX geschriebenen Anwendungen in gültiges, für den Browser verständliches, JavaScript compilieren kannst.
Die Hooks API wurde in React 16.8 eingeführt. Mit Hooks kannst Du Zustand in deiner Anwendung verwalten, mit dem DOM interagieren und einiges mehr. Außerdem kannst Du eigene Hooks definieren, um häufig verwendeten Code nicht doppelt schreiben zu müssen. An Hand praktischer Beispiele sehen wir uns die wichtigsten Hooks vor, diskutieren wo und wann deren Einsatz sinnvoll ist und schauen uns an, wie Du eigene Hooks für deine Anwendung bauen kannst.
Mein Artikel zum Thema: Ein Jahr React Hooks-API – eine Bilanz (heise developer)
Für vollständige Anwendungen empfiehlt das React-Team den Einsatz eines Fullstack-Frameworks wie Next.js oder Remix. Damit wird ein Teil der Logik deiner Anwendung auf den Server oder den Build-Prozess (z.B. mittels React Server Components) ausgelagert. In einer Schulung können wir uns ansehen, welche Probleme mit einem Fullstack-Framework gelöst werden sollen und wie diese funktionieren.
Wenn Du dich für Next.js interessierst, können wir auch einen Deep dive bzw. eine eigene Schulung dafür machen.
Mein Artikel zum Thema: React-Team drängt Entwickler zum Einsatz von Fullstack-Frameworks (heise online News)
In der Regel müssen Anwendungen Daten von einem Server lesen oder schreiben. React macht keine Aussage dazu, wie die Kommunikation mit einem Backend, z.B. über eine REST-Schnittstelle, aussehen muss.
Wir sehen uns an, wo und wie du die Serverzugriffe am Besten in deinen React Komponenten machst und welche Auswirkungen sich dadurch auf die Architektur der Anwendung ergeben. Auch schauen wir uns an, wie mit dem Suspense-Feature von React die Behandlung von asynchronem Code aussehen kann und wie die Anwendung mit Hilfe des React Caches optimiert werden kann.
Zur Arbeit mit serverseitigen Daten gibt es mittlerweile eine ganze Reihe von Bibliotheken, etwa TanStack Query oder Redux Toolkit Query. Auch der React Router und der TanStack Router ermöglichen es, Daten für eine Route zu laden. Diese Bibliothen können wir uns ansehen und deren jeweilige Vor- und Nachteile besprechen.
Eine mittlerweile populäre Alternative zu REST ist die Abfragesprache GraphQL, die sich sehr gut mit React verwenden lässt. Auch den Einsatz von GraphQL, etwa am Beispiel von Apollo GraphQL, kann ich bei Interesse vorstellen.
Mehr zu meinen Angeboten rund um GraphQL findest auf einer eigenen Seite.
Ein häufiger Kritikpunkt an Single-Page-Anwendungen ist, dass die vom Browser gewohnte Navigation (zum Beispiel mit Back-Button oder "Öffnen in neuem Tab") nicht so funktioniert, wie von statischen Webseiten gewohnt. Mit einem client-seitigen Router wie React Router oder TanStack Router lässt sich dieses Manko einfach beheben. Im Workshop sehen wir uns an, wie Du deine Anwendung damit so baust, dass die Navigation genauso wie in einer statischen Webseite funktioniert. Wir gucken uns außerdem an, in welchen Fällen die URL ein guter Ort sein kann, an dem Du Daten bzw. Zustand deiner Anwendung ablegen kannst.
Wenn deine React Anwendung größer wird, benötigst du eine solide Architektur um deine Anwendung verständlich und wartbar zu halten; das betrifft insbesondere die Verwaltung des Zustands.
In der Schulung diskutieren wir typische Probleme, die bei der Entwicklung von React-Anwendungen entstehen können und gucken uns mögliche Lösungen an.
Dazu gehört der React Context, der useReducer-Hook und die Bibliotheken wie Redux Toolkit und MobX, die alle Ansätze bieten, um den Zustand einer React-Anwendung zu verwalten. Wir diskutieren die Vorteile (und Nachteile) der jeweiligen Ansätze, sehen uns an was sie jeweils für deinen Code und die Entwicklung sowie das Testen bedeuten.
Mein Artikel zum Thema: The Art of State: Zustandsmanagement in React-Anwendungen (heise developer Artikel-Serie)
TypeScript bietet die Möglichkeit, getyptes JavaScript zu entwickeln. Viele potentielle Programmierfehler können dadurch bereits während der Entwicklung in der IDE oder dem Build-Prozess erkannt und vermieden werden. Gerade in Anwendungen, die von mehreren Personen gebaut und über einen längeren Zeitraum weiterentwickelt und gepflegt werden sollen, empfehle ich den Einsatz von TypeScript. In der Schulung gebe ich Euch eine Einführung in die Sprache TypeScript, wie ihr sie in Euren React-Anwendungen einsetzt und wie ihr von der Typ-Sicherheit profitieren könnt.
Mein Artikel zum Thema: Typsicher und komfortabel mit TypeScript (heise developer/ix Sonderheft)
Das Typensystem von TypeScript ist sehr ausgereift und bietet eine Menge Lösungen für komplexe Probleme, die sich durch die dynamische Natur von JavaScript ergeben können. In einem Workshop können wir uns die erweiterten Features von TypeScript ansehen und lernen, wo und wann deren Einsatz Sinn macht.
Mein Artikel zum Thema: Das Typsystem von TypeScript ausreizen - TypeScripts Metaprogrammiersprache (Entwickler Magazin)
React Anwendungen lassen sich sehr gut testen, und zwar auch ohne dass du dafür einen Browser benötigst. Ich zeige Euch, wie ihre entsprechende Tests mit der React Testing Library umsetzt.
Für Tests im Browser (End-to-End-Tests) sehen wir uns Playwright an.
Je nach Vorkenntnissen können wir in die Sprache JavaScript beschäftigen und Kenntnisse vertiefen bzw. auf den neusten Stand bringen.
Ihr habt ein bestehende Anwendung, zum Beispiel auf Java/JEE/Spring MVC-Basis oder als Fat-Client (Swing, JavaFX) und wollt nun dafür ein Frontend als Single-Page-Anwendung (SPA) oder Fullstack-Anwendung bauen?
Da ich ursprünglich auch aus der Java-Entwicklung komme, habe ich Erfahrung darin, welche Bedenken hinsichtlich der JavaScript-Entwicklung bestehen und welche Schmerzen ein Umstieg bereiten kann. Ich kann euch aber dabei helfen, die Umstellung so reibungslos wie möglich zu machen:
All das sind Themen, die wir besprechen und dafür gemeinsam praxisnahe Lösungen für Euer Produkt erarbeiten können. Bei Bedarf meldet euch gerne.
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
Single-Page-Anwendung oder HTMX für moderne Web-Frontends?
W-JAX 2024, München, 6. November 2024
React: Ein Blick zurück und nach vorne
W-JAX 2024, München, 7. November 2024
Modern React Clientside SPAs with TanStack Query and TanStack Router
iJS 2024, München, 12. November 2024
A Practical Introduction to Fullstack Applications With Next.js
iJS 2024, München, 13. November 2024
TypeScript — Advanced features of the type system
c't webdev, Köln, 14. November 2024
Vergangene Talks
Übersicht über vergangene Talks