Schulung · Workshop · Coaching · Beratung

React Enterprise-Architektur Workshop für Großprojekte

React Enterprise-Architektur: Modulgrenzen, Rendering und Zustand im Großprojekt

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

Sie treffen die tragenden Entscheidungen für React im Großprojekt: Modulgrenzen und Monorepo, die Wahl zwischen clientseitigem Rendering, SSR und Server Components, eine belastbare Zustandsarchitektur und ein Design-System, das mehrere Frontends trägt.

Welche Entscheidungen tragen eine React-Codebasis mit mehreren Teams?

React Enterprise-Architektur beginnt dort, wo die Frage nicht mehr lautet, wie eine Komponente gebaut wird, sondern wie zehn Teams an fünf Frontends arbeiten, ohne sich gegenseitig zu blockieren. Dazu gehören Modulgrenzen, die ein Werkzeug prüfen kann, ein Monorepo mit klaren Abhängigkeitsregeln, eine begründete Wahl der Rendering-Strategie, eine Zustandsarchitektur, die Server- und Client-Zustand trennt, und ein gemeinsames Design-System. Solche Entscheidungen lassen sich später nur teuer korrigieren – deshalb dokumentieren wir sie als Architecture Decision Records, statt sie in Chat-Verläufen zu verlieren.

Nach einer kurzen Bestimmung, was Softwarearchitektur im Frontend leistet, bauen wir serverseitiges Rendering zuerst von Hand mit Streaming und Hydration nach, um zu verstehen, was Frameworks wie Next.js oder React Router im Framework-Modus übernehmen. Darauf folgt die Entscheidung zwischen clientseitigem Rendering, SSR, statischer Generierung und React Server Components. Im Zustandsteil ordnen wir useState, Context, atomare Stores, Redux und MobX nach Reichweite des Zustands ein; die Bibliotheken im Detail behandeln die Seminare zu Redux Toolkit und TanStack Query. Code-Splitting, Fehlergrenzen, Ordnerstruktur, Namenskonventionen und der Aufbau eines Monorepos schließen den Bogen. Einzelne Komponentenmuster wie Compound Components oder Custom Hooks vertieft das Seminar React-Entwurfsmuster.

Große Codebasen sind für Coding-Agenten ein eigenes Gelände: Ein Agent, der in einem Paket arbeitet, sieht die Konventionen der anderen Pakete nicht und importiert gern quer über Modulgrenzen. Am Beispiel von Claude Code, das direkt im Wurzelverzeichnis des Monorepos arbeitet, spielen wir durch, wie Kontextdateien je Paket, Lint-Regeln für erlaubte Abhängigkeiten und die betroffenen Builds im Monorepo als Leitplanken ineinandergreifen. Der Agent darf Architekturverstöße melden und Migrationsvorschläge machen; die Entscheidung über eine neue Modulgrenze bleibt beim Team und landet als ADR im Repository.

Das Seminar arbeitet mit einer Beispiel-Codebasis aus mehreren Anwendungen und gemeinsamen Paketen. Gern analysieren wir stattdessen die Struktur Ihres eigenen Produkts und skizzieren eine Zielarchitektur mit konkreten Migrationsschritten.

Die teuersten Fehler in großen React-Projekten entstehen selten in einer Komponente. Sie entstehen, wenn niemand entschieden hat, wo Zustand lebt, welches Paket welches importieren darf und welche Seiten serverseitig gerendert werden. Dann entscheidet jedes Team für sich, und nach zwei Jahren gibt es drei Store-Bibliotheken, zwei Button-Komponenten und Zyklen zwischen Modulen. Architektur ist im Frontend vor allem das Festhalten von Entscheidungen – und eine Regel im Linter wirkt verlässlicher als ein Absatz im Wiki.
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

React Enterprise-Architektur: Modulgrenzen, Rendering und Zustand im Großprojekt

Softwarearchitektur für React im Großprojekt
  • Was Softwarearchitektur im Frontend leistet: Struktur, Entscheidungen, Qualitätsziele
  • Architektur am React-Beispiel lernen: von der Einzel-App zur Produktfamilie
  • Qualitätsziele festlegen: Wartbarkeit, Ladezeit, Barrierefreiheit, Teamautonomie
  • Architecture Decision Records im Repository führen und überprüfen
Rendering-Strategie: SSR, statisch oder Server Components
  • Grundlagen des serverseitigen Renderings: HTML auf dem Server, Hydration im Browser
  • Einfache React-Anwendung mit Vite als Ausgangspunkt für den SSR-Nachbau einrichten
  • Grundlegendes SSR von Hand mit renderToPipeableStream und Streaming
  • Routing mit serverseitigem Rendering: Server- und Client-Router abstimmen
  • Styling mit SSR: CSS Modules und Tailwind gegenüber CSS-in-JS zur Laufzeit
  • Hinweise beim SSR: Hydration-Fehler, browserabhängiger Code, Caching
  • Entscheidungsmatrix: CSR, SSR, statische Generierung und React Server Components
  • Frameworks als Architekturentscheidung: Next.js App Router, React Router Framework-Modus
Datenladen über HTTP und WebSockets
  • Wann Daten geladen werden: beim Rendern, in Loadern, auf dem Server, im Hintergrund
  • Daten laden mit SSR und Server Components ohne Wasserfall-Anfragen
  • Serverseitige API-Daten rendern und an den Client übergeben
  • SSR mit Kontext verbessern: Anfragekontext, Nutzerdaten und Lokalisierung
  • Echtzeitdaten über WebSockets oder Server-Sent Events in die Zustandsschicht einspeisen
  • API-Schicht kapseln: typisierte Clients aus OpenAPI, ein Ort für Fehlerbehandlung
Zustandsarchitektur
  • Was State Management ist: lokaler, geteilter, Server- und URL-Zustand
  • Einfache Zustandsverwaltung mit useState und Anheben des Zustands
  • Zustand mit useContext teilen und Kontext gezielt in Komponenten lesen
  • Mittelgroße Zustände mit atomaren Stores wie Jotai: Atome, abgeleitete Werte
  • Große Zustandsverwaltung mit Redux Toolkit; Details im Seminar Redux Toolkit
  • MobX mit beobachtbaren Objekten im Bestand einordnen
  • Serverzustand von Client-Zustand trennen; TanStack Query im Überblick
  • Regeln für das Team: welcher Zustand in welche Schicht gehört
Code-Aufteilung und Fehlergrenzen
  • Grundlagen der Codeaufteilung: dynamisches import(), lazy und Suspense
  • Routenbasierte Codeaufteilung und Vorladen beim Navigieren
  • Wann sich Codeaufteilung lohnt: Bundle-Analyse und Performance-Budgets
  • Fehlergrenzen je Bereich verwalten und Fehler an das Monitoring melden
Modulgrenzen, Monorepo und Konventionen
  • Funktions- gegenüber featurebasierter Organisation der Ordner
  • Benennungskonventionen für Dateien, Komponenten, Hooks und Tests
  • Monolith, Multi-Repo und Monorepo im Vergleich
  • Monorepo mit pnpm-Workspaces und Turborepo oder Nx aufbauen
  • Abhängigkeitsregeln zwischen Paketen per Lint prüfen und Zyklen verhindern
  • Micro-Frontends und Module Federation: wann der Aufwand gerechtfertigt ist
Design-System als gemeinsame Grundlage
  • Design-Tokens, Komponentenbibliothek und Dokumentation in Storybook
  • Versionierung und Veröffentlichung des Design-Systems im Monorepo
  • Verantwortung klären: zentrales Team oder Beiträge aus den Produktteams
Große React-Codebasen mit Coding-Agenten pflegen
  • Kontextdateien je Paket: Konventionen, erlaubte Importe, zuständiges Team
  • Agent prüft nach jeder Änderung nur die betroffenen Pakete im Monorepo-Build
  • Verstöße gegen Modulgrenzen meldet der Linter, nicht das Review
  • Agent inventarisiert Zustandsbibliotheken und schlägt einen Migrationspfad vor
  • ADR-Entwürfe vom Agenten vorbereiten lassen, Entscheidung im Architekturkreis
Praxisprojekt: Zielarchitektur für eine Produktfamilie
  • Kundenportal und Admin-Oberfläche in ein Monorepo mit gemeinsamen Paketen überführen
  • Rendering-Strategie je Bereich festlegen und als ADR begründen
  • Zustandsschichten trennen und Abhängigkeitsregeln im CI durchsetzen
  • Bundle-Budget definieren und routenbasierte Codeaufteilung nachweisen
Lernziele
  • Sie halten Architekturentscheidungen für ein React-Produkt als ADR fest und begründen sie mit Qualitätszielen
  • Sie wählen je Bereich zwischen clientseitigem Rendering, SSR, statischer Generierung und Server Components
  • Sie ordnen Zustand nach Reichweite den passenden Schichten und Bibliotheken zu
  • Sie strukturieren ein Monorepo mit Paketgrenzen, die per Lint geprüft werden
  • Sie setzen Codeaufteilung und Fehlergrenzen gezielt anhand von Messwerten ein
Zielgruppe
  • Lead-Entwickler:innen und Frontend-Architekt:innen in Projekten mit mehreren Teams
  • Teams, die mehrere React-Frontends mit gemeinsamem Design-System betreiben
  • Erfahrene React-Entwickler:innen, die Verantwortung für die Gesamtstruktur übernehmen

*) 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

Möbelstadt Rück GmbH & Co. KG

Krankenhaus Bitburg

G.I.B mbH

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 Enterprise-Architektur - 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