Schulung · Workshop · Coaching · Beratung

React Entwurfsmuster Schulung: Compound Components und Hooks

React-Entwurfsmuster: Komposition, Custom Hooks und Compound Components

Dauer: ab 1 Tag | Preis: ab 900 EUR (Netto) | Termin: Ganztägig + halbtägig

Sie bauen React-Komponenten, die sich zusammenstecken statt konfigurieren lassen: mit Komposition, Compound Components, eigenen Hooks und einer klaren Entscheidung zwischen Controlled und Uncontrolled – und Sie modernisieren HOCs und Render Props im Bestand.

Wann wird aus einer Komponente mit zwanzig Props ein Baukasten aus kleinen Teilen?

React-Entwurfsmuster beantworten eine Frage, die sich in jedem wachsenden Projekt stellt: Wie bleibt eine einzelne Komponente verständlich, wenn immer neue Varianten dazukommen? Komposition über children, Compound Components mit gemeinsamem Context, eigene Hooks für wiederkehrende Logik und eine bewusste Wahl zwischen kontrollierten und unkontrollierten Eingaben ersetzen Bool-Props wie showHeader oder isCompact, die sich gegenseitig ausschließen. Higher-Order Components und Render Props stammen aus der Zeit vor den Hooks, stecken aber in vielen Codebasen und Bibliotheken weiterhin – deshalb lesen und modernisieren wir sie, statt sie zu ignorieren.

Der Schwerpunkt liegt auf der Komponentenebene. Wir beginnen mit Layout-Komponenten wie Split-Screen, Listen und Dialogen, trennen Datenbeschaffung von Darstellung und vergleichen dabei den klassischen Container mit einem Loader-Hook und mit Server Components. Danach folgen Formulare mit Controlled und Uncontrolled Components einschließlich der Formular-Actions aus React 19, Compound Components wie Tabs oder Akkordeon, die Ablösung von HOCs und Render Props sowie Regeln für gut geschnittene Custom Hooks. Den Abschluss bilden rekursive Komponenten und funktionale Prinzipien wie reine Funktionen und unveränderliche Daten. Wie Sie Modulgrenzen, Monorepo und Zustandsarchitektur für ein ganzes Produkt festlegen, behandelt das Seminar React Enterprise-Architektur; die Grundlagen von useState, useEffect und Co. vertieft das Seminar React Hooks.

Muster sind für Coding-Agenten ein zweischneidiges Thema. Ein Agent erfindet ohne Vorgabe gern eine weitere Prop oder einen neuen Wrapper, statt die vorhandene Compound Component zu verwenden. Mit JetBrains AI in WebStorm üben wir, dem Agenten einen kurzen Musterkatalog des Projekts mitzugeben, ihn eine HOC-Kette Schritt für Schritt in einen Hook überführen zu lassen und das Verhalten vorher mit Tests der React Testing Library festzuhalten. Die Regeln aus eslint-plugin-react-hooks laufen nach jeder Änderung und fangen Verstöße gegen die Hook-Regeln ab, bevor ein Mensch den Diff liest.

Die Beispiele entstehen in TypeScript, weil sich viele Muster erst über die Typen sauber ausdrücken lassen – etwa diskriminierte Unions für Varianten oder generische Listen-Komponenten. Bringen Sie gern eine Komponente aus Ihrem Projekt mit, die über die Jahre zu viele Props gesammelt hat; an ihr probieren wir die Muster gemeinsam aus.

Unwartbare React-Komponenten sind in meinen Code-Reviews selten schlecht programmiert, sondern schlecht geschnitten. Sie haben mit drei Props angefangen und sind bei dreißig angekommen, weil jede neue Anforderung einen weiteren Schalter bekam. Komposition schlägt Konfiguration: Eine Tab-Leiste aus Tabs, Tab und Panel lässt sich erweitern, ohne dass jemand die Ursprungskomponente anfassen muss. Diese Entscheidung früh zu treffen spart mehr Zeit als jede Optimierung später.
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

React-Entwurfsmuster: Komposition, Custom Hooks und Compound Components

Muster auf Komponentenebene einordnen
  • Wozu React-Entwurfsmuster dienen: Erweiterbarkeit, Lesbarkeit, Testbarkeit
  • Komposition statt Vererbung: children, Slots und Props für Elemente
  • Warnzeichen erkennen: Bool-Props, Prop-Drilling, Komponenten mit Doppelrolle
  • Abgrenzung zur Gesamtarchitektur: was Muster lösen und was Modulgrenzen lösen
Layout-Komponenten – Struktur für die Oberfläche
  • Layout-Komponenten, die nur anordnen und keine Daten kennen
  • Split-Screen-Layout mit benannten Slots statt positionaler Kinder
  • Generische Listen- und Item-Komponenten mit TypeScript-Generics
  • Modale Dialoge mit <dialog>, Portalen und Fokusführung
  • Polymorphe Komponenten mit as-Prop und korrekter Typisierung
Container, Loader und Darstellung trennen
  • Container- und Präsentationskomponenten: Idee, Nutzen und Grenzen heute
  • Datenbeschaffung im Container: Laden, Fehler- und Ladezustand
  • Vom CurrentUserLoader und ResourceLoader zum generischen DataLoader
  • Container ersetzen durch Loader-Hook, TanStack Query oder Server Component
  • Suspense und Error Boundaries als deklarative Lade- und Fehlergrenzen
Controlled und Uncontrolled Components
  • Unterschiede, Vor- und Nachteile: wer hält den Wert, wer reagiert auf Änderungen
  • Uncontrolled Forms mit FormData, defaultValue und Refs
  • Controlled Forms mit Validierung während der Eingabe
  • Formular-Actions in React 19: action-Prop, useActionState, useFormStatus
  • Komponenten, die beides können: value/defaultValue-Paar und onChange
  • Modale Dialoge und Onboarding-Flows mit kontrolliertem Schrittzustand
Compound Components und Context
  • Compound Components: Tabs, Akkordeon und Menü aus zusammengehörigen Teilen
  • Gemeinsamen Zustand über einen privaten Context bereitstellen
  • Fehlbenutzung abfangen: Hook, der außerhalb des Providers eine Meldung wirft
  • Headless-Komponenten: Verhalten und Barrierefreiheit ohne vorgegebenes Aussehen
Higher-Order Components und Render Props im Bestand
  • Grundprinzip von HOCs: Funktion, die eine Komponente nimmt und erweitert
  • Props-Manipulation und Datenladen per HOC lesen und typisieren
  • JSX-Erweiterung mit HOCs und Render Props; Probleme bei verschachtelten Wrappern
  • Schrittweise Ablösung: HOC und Render Prop in Custom Hook überführen
  • Wo HOCs noch sinnvoll sind: Querschnitt wie Feature-Flags, Bibliotheks-APIs
Custom Hooks als Entwurfsmuster
  • Eigene Hooks schneiden: eine Aufgabe, klare Rückgabe, keine versteckten Effekte
  • Von useCurrentUser über useUser und useResource zu useDataSource
  • Best Practices für Hook-Design: Benennung, Objekt- oder Tupel-Rückgabe, Optionen
  • Hooks testen mit renderHook aus der React Testing Library
  • Hook-Grundlagen und Abhängigkeitslisten vertiefen: Verweis auf React Hooks
Funktionale Muster in React
  • Grundlagen der funktionalen Programmierung: reine Funktionen, Unveränderlichkeit
  • Warum React Komponenten als reine Funktionen des Zustands erwartet
  • Rekursive Komponenten für Bäume, Kommentare und verschachtelte Menüs
  • Komposition von Komponenten und Funktionen: Partial Application, compose
  • Was der React Compiler bei reinen Komponenten automatisch memoisiert
Muster-Refactoring mit einem Coding-Agenten
  • Katalog der React-Entwurfsmuster im Projekt als Agenten-Kontext: vorhandene Compound Components
  • Verhalten mit Testing-Library-Tests festhalten, bevor der Agent eine HOC-Kette auflöst
  • Agent schlägt den Schnitt einer Prop-überladenen Komponente vor, das Team entscheidet
  • Hook-Regeln per ESLint und Typprüfung als Pflichtlauf nach jedem Umbauschritt
  • Diffs auf neu erfundene Props und unnötige Wrapper-Komponenten durchsehen
Praxisprojekt: Komponentenbaukasten für ein Kundenportal
  • Prop-überladene Kartenkomponente in Compound Components zerlegen
  • Datenladen aus einem Container in einen typisierten Loader-Hook verschieben
  • Mehrstufiges Registrierungsformular mit Formular-Actions und Validierung
  • Rekursiven Kategoriebaum mit Ein- und Ausklappen bauen und testen
Lernziele
  • Sie erkennen überladene Komponenten und zerlegen sie mit Komposition und Compound Components
  • Sie trennen Datenbeschaffung von Darstellung und wählen zwischen Container, Loader-Hook und Server Component
  • Sie entscheiden begründet zwischen Controlled und Uncontrolled Components und nutzen Formular-Actions
  • Sie lesen Higher-Order Components und Render Props und überführen sie schrittweise in Custom Hooks
  • Sie entwerfen eigene Hooks mit klarer Schnittstelle und testen sie isoliert
  • Sie setzen rekursive Komponenten und funktionale Prinzipien für saubere Komposition ein
Zielgruppe
  • Fortgeschrittene React-Entwickler:innen mit sicheren Grundkenntnissen in Komponenten und Hooks
  • Frontend-Teams in Agenturen und Produktteams, die eine gemeinsame Komponentenbibliothek pflegen
  • Entwickler:innen, die Bestandscode mit HOCs und Render Props modernisieren

*) Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet.

Ein Symbol für einen Kalender.

Offene Termine

Kostenlose Reservierung
Ein Symbol für Angebot erhalten.

Unser Angebot

Sind Sie auf der Suche nach einer Veranstaltung, die genau Ihrem Bedarf entspricht? Einer Veranstaltung, welche nur Inhalte vermittelt, die Sie selbst gewählt haben und speziell auf Ihr Unternehmen zugeschnitten ist? Dann sind Sie bei uns richtig!

Dauer

Ein Symbol für Dauer.
ab 1 Tag (8 UE)

Die Dauer richtet sich nach Ihren Vorstellungen und inhaltlichen Wünschen. Sie bekommen genau das, was Sie brauchen.

Preis

Ein Symbol für Preis.
ab 900 EUR (Nettopreis)
ab 1.071 EUR (Bruttopreis)

Die Preise verstehen sich bei Unternehmern gemäß § 14 BGB zzgl. MwSt. Der dargestellte Ab-Preis gilt für firmeninterne Veranstaltungen und entspricht dem niedrigsten Gesamtpreis für Veranstaltungen mit bis zu drei (3) Teilnehmenden.

Termin

Ein Symbol für einen Kalender.
Ganztägig + halbtägig
nach Vereinbarung

Ihr Wunschtermin wird bei der Planung berücksichtigt. Die Veranstaltung findet ganztägig + halbtägig zu flexiblen Zeiten statt.

Ihre Vorteile

Ein Symbol für ein Vorgespräch durchführen.
Persönliches Vorgespräch
Ein Symbol für die individuelle Vorbereitung.
Individuelle Vorbereitung
Ein Symbol für Experten aus der Praxis.
Experten aus der Praxis
Ein Symbol für ein Zertifikat.
Inklusive Zertifikat

Unsere Garantien

1. Relevanz-Garantie

Wir passen den Inhalt spezifisch an die Bedürfnisse jedes Teilnehmers an. Irrelevante Themen werden ausgespart, um den größtmöglichen Nutzen zu garantieren.

2. Qualitäts-Garantie

Durch regelmäßiges Feedback optimieren wir unsere Schulungen kontinuierlich und garantieren Ihnen ein Lernerlebnis der Extraklasse.

3. Zufriedenheits-Garantie

Unsere Zufriedenheitsgarantie spricht für sich – bei Unzufriedenheit entstehen Ihnen keine Kosten.

Wir helfen gerne weiter!

Rufen Sie uns an, schreiben eine E-Mail oder nutzen das Kontaktformular.

Jetzt anfragen
Einige Unternehmen, für die wir tätig waren

VTA Verfahrenstechnik und Automatisierung GmbH

Brunel GmbH

LVR-InfoKom

Teilnehmer

Feedback

Herr Hecker ist sehr gut auf individuelle Wünsche, Fragen und Anregungen eingegangen. Eine sehr informative, interessante und gelungene Veranstaltung.
Teilnehmer

Feedback

Herr Hecker hat das Thema sehr anschaulich dargestellt und ist auf alle Fragen eingegangen. Ich fühle mich jetzt gut vorbereitet, um durchzustarten.
Teilnehmer

Feedback

Die gelassene, professionelle Art hat mir gut gefallen. Kompetent, engagiert, professionell. Gute Beispiele, sympathisches Auftreten. Eigene Themenideen wurden aufgegriffen.
Unser Angebot für Ihre firmeninterne Beratung, Coaching, Workshop, Training und Weiterbildung

Lösungen für Ihren Bedarf an Coaching, Workshop, Training, Schulung und Weiterbildung

Profitieren Sie von unserer langjährigen Expertise in der beruflichen Weiterbildung, modernen Lernmethoden und einem Portfolio von über 600 IT-, Online- und Digital-Beratungsleistungen.
Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Weiterbildung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

✓
Ein Symbol für eine einzelne Person.

Für eine Person

Training & Coaching für Einzelpersonen

  • Passgenaue Inhalte auf den einzelnen Teilnehmer zugeschnitten
  • Ein sehr effektives Format, das schnell Ergebnisse bringt
  • Individuelles Training und Coaching motivieren und wirken
Jetzt anfragen
✓
Ein Symbol für eine Gruppe von Personen.

Für eine Gruppe

Training & Workshops für Teams und Abteilungen

  • Bedarfsgerechte Inhalte auf die Herausforderung der Praxis zugeschnitten
  • Konsequente Praxisorientierung, modernste Techniken und Tools
  • Neue Fähigkeiten und Kenntnisse nachhaltig in den Arbeitsalltag integrieren
Jetzt anfragen
✓
Ein Symbol für ein Unternehmen.

Für eine Firma

Training-Komplett-Lösungen für Ihr Unternehmen‍

  • Ganzheitliche Konzepte für Ihre Mitarbeiterentwicklung
  • Individueller Skill-Katalog zur Erweiterung Ihres internen Weiterbildungsangebots
  • Nachhaltige Personalentwicklung realisieren
Jetzt anfragen

Anfrage für eine unverbindliche + kostenlose Erstberatung zum Thema

React Entwurfsmuster - Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung

Wir freuen uns über Ihre Anfrage und antworten so schnell es geht!

Ich interessiere mich für den Termin:

Termin anfragen

Das Angebot von "HECKER CONSULTING" richtet sich ausschließlich an Unternehmen und Behörden (iSv § 14 BGB). Verbraucher (§ 13 BGB) sind vom Vertragsschluss ausgeschlossen. Mit Absendung der Anfrage bestätigt der Anfragende, dass er nicht als Verbraucher, sondern in gewerblicher Tätigkeit handelt. § 312i Abs. 1 S. 1 Nr. 1-3 und S. 2 BGB (Pflichten im elektronischen Geschäftsverkehr) finden keine Anwendung.

Vielen Dank, Ihre Nachricht wurde empfangen!
Beim Absenden des Formulars ist etwas schiefgelaufen.
Beratung, Coaching, Workshop, Training, Schulung

Ähnliche Leistungen, die Sie interessieren könnten.

Wir erweitern ständig unser Beratungsportfolio. Über 600 IT-, Online-, Digital-Beratungsleistungen haben wir für Sie im Programm. Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Beratung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

Mehr IT-, Online-, Digital-Beratungsleistungen anzeigen >>
Nach oben