Seite 13 - React

Ein React Monorepo mit Turborepo bündelt mehrere Apps und geteilte Pakete in einem Repository, ohne dass jeder Build alles neu kompilieren muss. Dieser Artikel zeigt die Workspace-Struktur, die turbo.json-Konfiguration, Remote Caching und eine CI-Pipeline, die nur tatsächlich betroffene Pakete baut.

Symfony ist das robusteste PHP-Framework für komplexe Backend-Logik. React ist das mächtigste UI-Framework für dynamische Frontends. API Platform verbindet beides durch automatisch generierte REST- und GraphQL-APIs — mit Validierung, Serialisierung und OpenAPI-Dokumentation out of the box. Dieser Artikel zeigt, wie man die beiden Welten produktionsreif zusammenführt.

Einen rohen DOM-Node via Ref nach außen zu geben, ist eine Einladung zu unkontrolliertem externem Zugriff. useImperativeHandle definiert präzise, welche Methoden über den Ref verfügbar sind – eine kontrollierte API statt einer offenen DOM-Schnittstelle.

Ein Event-Handler ohne korrekten Typ verleitet fast automatisch zu any oder zu wiederholten Typumwandlungen, sobald auf event.target.value zugegriffen wird. React Event Handler Types lösen dieses Problem an der Wurzel: SyntheticEvent, ChangeEvent und die passenden Handler-Typen wie MouseEventHandler kennen exakt, welches Element ein Event ausgelöst hat und welche Eigenschaften darauf verfügbar sind. Dieser Artikel zeigt, wie man Event Handler Types in React systematisch und ohne any einsetzt.

Instabile APIs, kurzzeitige Netzwerkausfälle oder überlastete Server führen dazu, dass ein einzelner fehlgeschlagener Request nicht automatisch einen echten Fehler bedeutet. Ein eigener useFetchWithRetry-Hook mit exponentiellem Backoff wiederholt fehlgeschlagene Anfragen mit wachsender Wartezeit, ohne dass dafür zwingend eine zusätzliche Bibliothek nötig ist.

Barrierefreiheit in React-Komponenten scheitert oft an einem Detail: IDs für aria-labelledby und htmlFor müssen einmalig sein und auf Server und Client übereinstimmen. useId löst beides auf einmal – ohne Boilerplate und ohne Hydration-Fehler.

Slot basierte Komponenten APIs ersetzen das Root Element einer Komponente durch genau ein uebergebenes Kindelement, statt ein zusaetzliches DOM Element einzufuegen. Das asChild Muster von Radix hat diesen Ansatz populaer gemacht, doch die zugrunde liegende Slot Komponente laesst sich auch ohne fremde Bibliothek in wenigen Zeilen selbst bauen.

Headless UI Patterns trennen Interaktionslogik konsequent von der visuellen Darstellung, sodass Teams eigenes Design ohne Kompromisse bei Tastatursteuerung und ARIA-Semantik umsetzen koennen. Wer versteht, wie Custom Hooks, Compound Components und State Machines zusammenspielen, braucht fuer viele Anwendungsfaelle keine externe Headless-Bibliothek mehr.

Ein einzelner großer Context wirkt praktisch, bis jede Komponente bei jeder noch so kleinen Änderung neu rendert. Context-Splitting und echte Selektoren lösen das Problem strukturell statt symptomatisch.

Wer React nur an der Oberfläche kennt, weiß, dass der Virtual DOM „schnell macht". Wer React performant bauen will, muss verstehen, wie der Diffing-Algorithmus entscheidet, was aktualisiert wird – und warum Keys, Komponentenidentität und Fiber-Architektur dabei der entscheidende Faktor sind.