React Workshop

Workshops rund um React

Wir (Oliver Zeigermann, Nils Hartmann) möchten dir beim Einstieg und der Arbeit mit React helfen und bieten dazu Workshops, Schulungen und Beratung an. Wenn du Interesse oder Fragen dazu hast, melde dich einfach bei uns per E-Mail: autoren@reactbuch.de, dann können wir alles weitere gemeinsam besprechen. Übliche Inhalte einer Schulung findest Du weiter unten.

Individuelle Beratung und Coaching

Neben Workshops zum Einstieg in React bieten wir auch individuelle Beratung und Coaching an. Wir können dir zum Beispiel vor Ort helfen, dein React-Projekt aufzusetzen, eine Migrationsstrategie erarbeiten oder eine Architektur für deine Anwendung entwickeln. Dabei haben wir nicht nur die eigentliche React-Anwendung im Blick, sondern können auch helfen, wenn Du beispielsweise eine große Anwendung im mehrere kleine aufteilen möchtes ("MicroFrontends") um diese schneller unabhängig voneinander entwickeln zu können.

Mögliche Inhalte einer Schulung

Im folgenden stellen wir dir mögliche Inhalte vor, die wir für ein individuelles In-House-Training anbieten können, um genau auf die Bedürfnisse deines Teams einzugehen. Wenn etwas in der Liste fehlt, sprich uns einfach an.

Wiederverwendbare Komponenten mit React antwickeln

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.

In unserer Schulung schauen wir uns an, wie Komponenten mit React entwickelt werden. Dazu gehören zum Beispiel die folgenden Themen:

Die JavaScript Spracherweiterung JSX

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. Wir zeigen dir, 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.

Typsichere React Anwendungen mit TypeScript

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. Außerdem hilft TypeScript durch besseres Tooling, wie etwa Code-Completion oder auch beim Refactoring. Gerade in Anwendungen, die von mehreren Personen gebaut und über einen längeren Zeitraum weiterentwickelt und gepflegt werden sollen, bietet TypeScript gegenüber reinem JavaScript einige Vorteile. In der Schulung schauen wir uns die Syntax von TypeScript an, wie man es in eigene Projekte einbindet und wie React-Anwendungen von der Typ-Sicherheit profitieren können.

Arbeiten mit Hooks

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. Wir stellen dir 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.

Fortgeschrittene Techniken

Konkurrierendes Rendering, Daten laden mit Suspense, Zustandsverwaltung mit Context, Code-Organisation mit Higher-Order-Components (HOCs) oder Hooks - all das sind fortgeschrittene Themen, über die wir dir einen Überblick verschaffen oder bei Bedarf auch im Detail ansehen können.

Das Flux Architekturmodell - am Beispiel von Redux

Wenn deine React Anwendung größer wird, benötigst du eine solide Architektur um deine Anwendung verständlich und wartbar zu halten. Mit Flux hat Facebook ein Architekturmodell vorgestellt, das typische Probleme von (React-basierten) Webanwendungen lösen soll.

In unserer Schulung stellen wir dir zunächst die grundlegenden Ideen von Flux vor und zeigen dir, welche Probleme sich damit lösen lassen.

Konkret schauen wir uns dann die Bibliothek Redux an, die sich mittlerweile im React-Umfeld etabliert hat auch wenn Redux an einigen Stellen vom "vanilla" Flux abweicht und eigene Akzente setzt. Wir schauen uns an, wie du mit Redux den kompletten Zustand deiner Anwendung aus deinen Komponenten herausziehen und zentral verwalten kann. Wir diskutieren die Vorteile (und Nachteile) dieser Idee, sehen uns an was das für deinen Code und die Entwicklung sowie das Testen bedeutet.

Serverzugriffe

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 stellen dir Wege vor, die Browser-übergreifend funktionieren. Dabei werden wir uns ansehen, wo du die Serverzugriffe 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.

React Anwendungen testen (mit und ohne Browser)

React Anwendungen lassen sich sehr gut testen, und zwar auch ohne, dass du dafür einen Browser benötigst. Wir werden uns unterschiedliche Ansätze ansehen und bewerten und dir einen Überblick in konkrete Testframeworks für React geben.

Arbeiten mit dem React Router und der History

Ein häufige Anforderung an Single Page Anwendungen ist es, dass man darin über URLs bzw die History-Funktion des Browsers genauso gut navigieren kann, wie "klassische" Webanwendungen.

Dazu gibt es mit dem React Router Projekt eine Lösung für React-basierte Anwendungen, die wir dir vorstellen. du lernst, wie du URLs auf Komponenten mappen kannst, wie du auf URL-Parameter zugreifen und über die History navigieren kannst.

Universal Webanwendungen mit React entwickeln

Als "universal webapps" werden Webanwendungen bezeichnet, die einerseits auf dem Client aber auch auf dem Server gerendert werden können. Das kann zum Beispiel interessant sein, um sehr schnell eine erste Seite der Anwendung anzeigen zu können oder auch für Suchmaschinen Optimierung.

Wir besprechen welche technischen Voraussetzungen erfüllt sein müssen, damit sich eine Anwendung überhaupt serverseitig rendern lässt und welche Anforderungen an die Anwendungsarchitektur sich ergeben.

Hintergrund: ECMAScript 2015ff - alles, was du für React benötigst

React Anwendungen werden üblicherweise mindestens mit ECMAScript 2015 (ES6) oder neu gebaut. Während des Workshops zeigen wir dir die relevanten Sprachfeatures, so dass du an dem Workshop auch teilnehmen kannst, wenn du bislang mit älteren JavaScript Versionen gearbeitet hast.

Mögliche weitere Themen

Voraussetzungen

Zur erfolgreichen Teilnahme an unseren Workshops solltest du über JavaScript Kentnisse verfügen. Es reichen ES5 Kentnisse, wir werden dir in dem Workshop die relevanten Neuerungen aus ECMAScript 2015 (ES6) zeigen.

Trainer

Nils Hartmann ist freiberuflicher Software-Enwickler und -Architekt aus Hamburg. Nils hat langjährige Erfahrung mit der Entwicklung von großen Java-Anwendungen. Mittlerweile beschäftigt er sich neben der Java-Entwicklung auch mit dem server- und clientseitigen Einsatz von JavaScript.
Kontakt: https://nilshartmann.net (@nilshartmann)

Oliver Zeigermann ist Entwickler, Architekt, Berater und Coach. Oliver wendet seine Erfahrungen aus dem Java-Umfeld auch auf die Softwareentwicklung und Architektur mit JavaScript an.
Kontakt: http://zeigermann.eu (@djcordhose)

Kontakt

Wenn du Interesse an einem Workshop hast, schicke uns doch einfach eine E-Mail an die Adresse autoren@reactbuch.de. Wir melden uns dann umgehend bei dir, um mit dir die Details zu besprechen.

Das React Buch

Wir haben auch ein Buch über React geschrieben, das im Juni 2016 im dpunkt-Verlag erschienen ist. Es bietet unter anderem eine Einführung in React, React Router und Redux.

Weitere Informationen zu dem Buch erhälst du hier: