Workshop
Produkt-Entwicklung mit React

Von und mit Christian Heyn

»Produktentwicklung - das bedeutet meist datenintensive und sehr interaktive Frontend-Entwicklung. Für diese Art von Application ist React ein hervorragendes Werkzeug!«

Bild von Christian Heyn wie er dich anlächelt.
»Hi, ich bin Christian. Ich möchte dein Team fit für die Produktentwicklung mit React machen. Schreib mir gern eine unverbindliche E-Mail und wir gehen ins Detail.«

Kurs-Benefits

  • Für React-Einsteiger geeignet
  • Praxisnah
  • Komplexe Themen verständlich erklärt
  • Individuelle Kursinhalte
  • Digitaler Unterricht
  • Qualitätssicherung mit Testdriven Development
  • React-unabhängige Themen für noch mehr Entwicklungsperformance
  • Zugang des erstellten Prototyps für das gesamte Team
  • Auf Wunsch mit Abschlussprüfung
  • 1:1 Entwicklergespräch (optional)

In diesem Workshop lernen wir Herangehensweisen, die vor allem zu Beginn eines Projektes die Skalierbarkeit der entstehenden Anwendung sicherstellen.

Es geht hier nicht um Grundeinrichtungen wie das Konfigurieren von Webpack oder die Wahl der CSS Technologie. Wir wenden unsere Aufmerksamkeit vielmehr auf den allgemeinen Datenflow, die Testgetriebene Entwicklung (TDD) und die Wiederverwendbarkeit von Komponenten. Auch ein paar React-unspezifische Dinge sind Teil der Reise.

Wir sprechen aber nicht nur über all diese Themen, sondern erarbeiten in mehreren Sessions alle Ideen direkt im Code. Zusammen entwickeln wir den Prototypen einer Anwendung, der das Gelernte zusammenfasst. Ziel ist es, allen Beteiligten die wichtigsten Muster und Herangehensweisen an einem realistischen Beispiel aufzuzeigen.

Für wen ist dieser Kurs geeignet?

Der Kurs eignet sich sowohl für den Ersteinstieg in die React-Entwicklung als auch für Entwicklerteams, die noch kein großes Projekt mit React umgesetzt haben sowie Teams, deren erstes Projekt mit React schmerzlicher war als erwartet.

Auch wenn der Einstieg in die UI-Entwicklung mit React zu Beginn leicht von der Hand geht, so stellt der komplexer werdende Datenflow viele Teams vor Herausforderungen.

Häufige Fragen, die ich von Entwickler:innen höre, sind:

  • Wie kann ich datenintensive Komponenten so schreiben, dass man sie wiederverwenden kann?
  • Wie kann ich eine Komponente testen, wenn sie mehrere API-Endpunkte anfragt?
  • Wie kann ich Businesslogik von React trennen und wiederverwenden?

All diese Fragen besprechen wir in den gemeinsamen Sessions und skizzieren mögliche Lösungen im Code.

Workshop Sessions

Das richtige Mindset

React mit JSX wirkt zu Beginn wie Magie. Deshalb fangen wir ganz von Vorn an und beschäftigen uns mit der Funktionsweise von React und JSX.

  • JSX verstehen
  • Was macht React da eigentlich?
  • Mit Props denken
  • React entzaubern
  • Komponentenfamilie

Hooks

React Hooks haben das State-Handling deutlich vereinfacht. Wir schauen uns die klassischen Hooks an, die React schon mitbringt. Dann erarbeiten wir unsere eigenen projektbezogenen Helfer.

  • useState
  • useReducer
  • useEffect
  • Custom Hooks
  • Komponenten aus Hooks

Abstecher ins FP-Universum

React ist auch nur JavaScript. Und deshalb schweifen wir kurz ab und schauen uns wichtige Konzepte der Funktionalen Programmierung an. Um sie dann im React-Kontext anzuwenden.

  • currying
  • Higher-Order-Functions
  • Higher-Order-Components
  • Komposition
  • HOC Anwendungsbeispiele

Daten via API

Zusammen sorgen wir dafür, dass echte Daten in unsere Komponenten einfließen und auch wieder an eine API gesendet werden.

  • useSWR
  • Mehrere API-Abfragen für eine Komponente
  • Daten an API senden
  • Fehlerbehandlung

Datenintensive Features

Komplexe Features transformieren oft komplexe Daten. Wir lernen, wie die Umwandlung von Datensätzen testgetrieben erarbeitet werden kann.

  • Aus React ausbrechen
  • Das Feature als Reducer
  • Das Gelernte zusammenführen

Individuelle Kursinhalte

Fragen rund um euren Anwendungsfall können wir im Team besprechen und ggf. Lösungsansätze im Code festhalten.

Wie genau läuft das ab?

Schreib mir eine E-Mail und gehe gern schon etwas ins Detail. Wie groß ist dein Team? Wie erfahren ist dein Team mit React? Was habt ihr vor?

Danach können wir telefonisch alle weiteren Fragen und Wünsche klären. Die Übersicht der hier aufgeführten Workshop-Sessions ist nur eine grobe Richtung, die angepasst werden kann.

Zusammen planen wir dann, an welchen Tagen der Workshop stattfinden wird.

Dein Team bekommt vorab den Zugang zum Grundgerüst unseres Prototypen.

Ich freue mich auf euch!



FAQs

Kannst du den Workshop bei uns im Büro halten?
Was ist mit TypeScript?
Ist Redux kein Thema in deinem Workshop?
Was ist die maximale Anzahl der Teilnehmer für diesen Workshop?
Können wir auf konkrete Projektideen eingehen?
Über welche API bekommt unser Prototyp seine Daten?
Was ist mit CSS und dem "Look and Feel" eines React-Produkts?

Du benötigst einen Entwickler, der dein Team verstärkt? Schreib mir gern eine E-Mail an christian-dev@mailbox.org. Schildere mir dein Projekt und lass uns schauen wie ich unterstützen/beraten kann.