Tag: React

1. Farbkontrast-Tooling für React-Design-Systeme: WCAG-konform bleiben

   11.09.2025

   Ein neues Akzentblau im Design-Token-Set kann still einen bestehenden Button unlesbar machen, ohne dass es jemand vor dem Release bemerkt. Farbkontrast-Tooling für React-Design-Systeme automatisiert genau diese Prüfung: von der Token-Definition über Storybook bis zur CI-Pipeline, damit WCAG-Verstöße auffallen, bevor sie in Produktion landen.

   Read more

2. TanStack Table: Komplexe Tabellen ohne Pain

   04.09.2025

   Datentabellen in React scheitern auf zwei Arten: Entweder baut man alles von Hand und investiert Wochen in Sorting, Filtering und Pagination, oder man wählt eine High-Level-Bibliothek und kämpft gegen ihren Lock-in. TanStack Table v8 ist der dritte Weg: ein headless Tabellen-Engine, der alle Logik liefert und das UI vollständig in eurer Hand lässt.

   Read more

3. Next.js App Router Migration vom Pages Router: Der vollständige Leitfaden

   20.08.2025

   Der App Router ist nicht nur ein neues Verzeichnis – er ändert das mentale Modell von Next.js fundamental. Layouts, Server Components, verschachtelte Routen und das neue Data-Fetching-Paradigma erfordern einen durchdachten Migrationsplan, der Produktionsausfälle vermeidet und das Team nicht überfordert.

   Read more

4. React Realtime: WebSocket und Mercure integrieren

   19.08.2025

   Polling ist keine Echtzeit-Architektur – es ist ein Kompromiss, der unter Last zusammenbricht. WebSocket und Mercure bieten echte Push-Kommunikation, aber ihre Integration in React erfordert durchdachte Custom Hooks, robuste Reconnect-Logik und sicheres State-Management für Echtzeit-Datenströme.

   Read more

5. useSyncExternalStore: External Store sauber subscriben

   31.07.2025

   Externe Datenquellen in React zu integrieren, war vor React 18 ein Minenfeld aus Race Conditions und inkonsistenten Renders. useSyncExternalStore ist die offizielle Lösung: ein Hook, der externe Stores korrekt mit dem React-Rendering-Zyklus verbindet und Tearing auch im Concurrent Mode verhindert.

   Read more

6. Custom Hooks isoliert testen: renderHook in der Praxis

   31.07.2025

   Ein Custom Hook wird zu oft nur indirekt über die Komponente getestet, die ihn verwendet. Das verdeckt Bugs in der Hook-Logik und macht Tests unnötig komplex. renderHook aus der React Testing Library erlaubt es, Zustand, Nebenwirkungen und asynchrone Updates eines Hooks direkt zu prüfen, ganz ohne künstliche Host-Komponente.

   Read more

7. React + Tailwind: cn-Utility, clsx und class-variance-authority

   28.07.2025

   String-Konkatenation für Tailwind-Klassen ist fehleranfällig, schwer lesbar und skaliert nicht zu einem echten Design-System. Die Kombination aus clsx, tailwind-merge und class-variance-authority (CVA) löst dieses Problem elegant: typsichere Varianten, konfliktsichere Klassen-Merge und eine einzige cn-Utility für die gesamte Codebase.

   Read more

8. XState in React: State Machines für komplexe UI Zustände

   25.07.2025

   Formulare mit fünf Schritten, Checkout Prozesse mit Zahlungsstatus und Medienplayer mit Ladezuständen erzeugen schnell einen unübersichtlichen Wust an Booleans in useReducer. XState modelliert diese Logik als endlichen Automaten mit expliziten Zuständen und Übergängen, wodurch unmögliche Zustandskombinationen strukturell ausgeschlossen werden.

   Read more

9. React Animations: Framer Motion vs. CSS Transitions

   23.07.2025

   Die Entscheidung zwischen Framer Motion und CSS Transitions in React hat mehr mit dem Animations-Typ als mit persönlicher Präferenz zu tun. Hover-Effekte und einfache State-Transitions gehören in CSS. Orchestrierte Sequences, Exit-Animations und Shared-Element-Transitions sind ohne Framer Motion kaum realisierbar. Dieses Tutorial erklärt wann welche Lösung die richtige ist.

   Read more

10. Playwright Component Testing: E2E für einzelne React-Komponenten

    17.07.2025

    JSDOM-basierte Tests lügen manchmal: Sie simulieren Browser-Verhalten, testen aber nicht, was der echte Browser mit einer Komponente macht. Playwright Component Testing rendert jede React-Komponente in einem echten Chromium, Firefox oder WebKit – ohne die gesamte Anwendung hochzufahren.

    Read more