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 Zustand 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-Zustand 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 ZustandsortDer 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-Zustand vs. Server-Cache: die folgenreichste Grenze im FrontendServerdaten sind Zustand, aber nicht client-eigener Zustand. 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 Zustand 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 ZustandContext löst das Verteilen von Daten durch den Baum – aber nicht die Frage, wem der Zustand 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
- Zustand erhalten und zurücksetzen: React und die Position im BaumReact speichert Zustand 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 Zustandsä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