React Workshops und Trainings

Ich biete individuelle In-House-Workshops und Trainings rund um das Thema React an, um dich und dein Team beim Einstieg und der Arbeit mit React zu unterstützen. Falls ihr schon React ein Einsatz habt, führe ich auch Code-Reviews mit Euch durch (auch remote) oder berate Euch bei konkreten Fragestellungen, zum Beispiel zur Architektur oder Technologieauswahl.

Mögliche Inhalte einer Schulung

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.

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.

  • Deklarativ Komponenten beschreiben
  • Komponenten als ES6 Klassen und Funktionen
  • Interaktionen mit dem Benutzer
  • Zustand und Eigenschaften von Komponenten
  • Lebenszyklus von Komponenten
  • Hooks

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. 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.

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. 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.

Arbeiten mit Hooks

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.

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 der Schulung schauen wir uns dazu die Bibliothek Redux an, die mittlerweile im React-Umfeld etabliert ist. 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 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.

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.

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.

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 was natürlich auch bedeutet, dass der Back-Button zuverlässig funktioniert und dass man Links auf einzelne Seiten oder Bereiche der Anwendung verschicken oder speichern kann.

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

Mögliche weitere Themen

  • Fortgeschrittene Techniken wie konkurrierendes Rendering, die Context API oder Patterns wie Higher-Order-Components (HOCs) oder Render Properties
  • ECMAScript 2015ff - Einführung und Vertiefung in die Sprache JavaScript
  • Universal Webanwendungen mit React entwickeln - Webanwendungen, die auf dem Server gerendert werden
  • Einbinden von Dritt-Bibliotheken, z.B. jQuery oder d3.js

Kontakt

Nils Hartmann

Buckhorn 41b

22359 Hamburg

Tel: 0173 / 286 30 76