Themen
React
Alle Beiträge zum Thema React, die neuesten zuerst.
Transparenz: Alle Beiträge habe ich nachträglich mit Unterstützung von KI überarbeitet. Gedanken, Erfahrungen und Haltung sind meine. Die Hörfassungen werden von einer synthetischen Stimme vorgelesen.
React-Überblick: Von JSX zur Komponentenarchitektur
Ein kompletter Durchgang durch React, wie ich es heute unterrichte – vom deklarativen Rendern über die Frage, wem ein State gehört, bis zur Architektur einer wachsenden Anwendung. Die Details zu einzelnen Stationen kommen später als eigene Beiträge.
Formulare in React 19: Actions, useActionState und useOptimistic
React 19 macht das Formular zur eigentlichen Schnittstelle: eine Funktion als form action, dazu drei Hooks für Ergebnis, Pending State und sofortiges UI-Feedback. Dieser Beitrag zeigt das Zusammenspiel – und wo optimistisches Rendern ohne sauberen Fehlerpfad kippt.
React Server Components und Server Actions: Die neue Grenze
Server Components laufen außerhalb des Client-Bundles und liefern ihr Ergebnis statt ihres Codes an den Browser. Server Functions holen Schreibvorgänge auf den Server – umgesetzt wird beides durch ein passendes Framework oder einen Bundler.
2024 5
2024 5
- React Router Data Router: Die URL als State-OrtDer Data Router von React Router macht die URL zum Koordinationspunkt – eine Route lädt ihre Daten per loader vor dem Rendern und schreibt über action, sodass Ladelogik aus dem Komponenten-Body verschwindet.SoftwareFrontendReact
- React Transitions: nicht dringende Updates mit useTransitionuseTransition markiert Updates als nicht dringend und hält React während teurer oder suspendierender Renderings responsiv. Dazu useDeferredValue als Werkzeug für nachgelagerte Renderings.SoftwareFrontendReact
- Suspense und der use-Hook: rendern, als wären die Daten schon daStatt in jeder Komponente einen Ladezustand zu verwalten, beschreibt man mit Suspense an einer einzigen Stelle im Baum, was während des Wartens erscheint – und der use-Hook lässt die Komponente darunter rendern, als wären die Daten längst da.SoftwareFrontendReact
- Client State vs. Server-Cache: die folgenreichste Grenze im FrontendServerdaten sind State, aber nicht client-eigener State. Warum diese Unterscheidung wichtig ist, wann useEffect zum schlechten Cache wird und was eine Server-State-Bibliothek übernimmt.SoftwareFrontendReact
- TypeScript in React: Props, Hooks und Events typisierenWie aus Props und State überprüfbare Verträge werden – und der Editor Fehler meldet, bevor der Nutzer sie sieht. Von interface/type über useState-Generics und Event-Typen bis zu useRef und Utility-Types.SoftwareFrontendReact
2023 1
2022 1
2021 3
2021 3
- State-Management in React: Redux Toolkit, leichte Stores, MobXWenn ein State wirklich app-weit ist, stellt sich die Werkzeugfrage – Redux Toolkit, ein leichter Store wie Zustand oder Jotai, oder das reaktive Modell von MobX. Warum diese Wahl aber erst nach der Gegenprobe kommt und meistens kleiner ausfällt als gedacht.SoftwareFrontendReact
- Context richtig einsetzen: Verteilweg statt heimlicher globaler StateContext löst das Verteilen von Daten durch den Baum – aber nicht die Frage, wem der State gehört. Wer beides verwechselt, baut einen globalen Store durch die Hintertür ein und erzeugt bei unbedacht wechselnden Provider-Werten unnötige Renderläufe.SoftwareFrontendReact
- State erhalten und zurücksetzen: React und die Position im BaumReact speichert State nicht in der Komponente, sondern an ihrer Position im Render-Baum – wer das versteht, steuert Erhalt und Reset absichtlich statt zufällig.SoftwareFrontendReact
2020 2
2020 2
- Wie React den Baum rendert und aktualisiertVom JSX-Element zum sichtbaren Pixel – was zwischen einer State-Änderung und dem neu gezeichneten Bildschirm genau passiert. Render und Commit als getrennte Phasen, der Abgleich zweier Bäume und warum React fast immer nur einen winzigen Teil des DOM anfasst.SoftwareFrontendReact
- JSX genau: Die Regeln hinter dem MarkupEin präziser Blick auf JSX – was der Compiler daraus macht, warum in geschweiften Klammern Ausdrücke statt Anweisungen stehen, wie Attribute, Kinder, Bedingungen und Listen funktionieren und an welchen Stellen Anfänger stolpern.SoftwareFrontendReact