React Tutorial mit Live-Beispielen
Ein kostenloses React 19 Tutorial: Komponenten, JSX, Props, State, Hooks und Performance. Jedes Beispiel läuft direkt auf der Seite, du änderst den Code und siehst Komponente und Konsole sofort reagieren.
Geführten React-Lernweg startenErste Schritte
- Was ist ReactReact ist eine JavaScript-Bibliothek, mit der du Benutzeroberflächen aus Komponenten baust. Du beschreibst, was der Bildschirm für die aktuellen Daten zeigen soll, und React hält die Seite synchron, wenn sich diese Daten ändern.
- React installierenInstalliere React, indem du ein Projekt mit Vite erstellst: Node.js prüfen, einen Befehl zum Erstellen ausführen, Abhängigkeiten installieren und den Dev-Server starten. Dazu die generierten Dateien, der Build für die Produktion und warum Create React App veraltet ist.
- JSXJSX ist eine Syntaxerweiterung für JavaScript, mit der du HTML-ähnliches Markup in React-Komponenten schreibst. Lerne die Regeln: ein Root-Element, geschlossene Tags, className, camelCase-Attribute, geschweifte Klammern, Inline-Styles, Kommentare und was daraus kompiliert wird.
- KomponentenEine React-Komponente ist eine JavaScript-Funktion, die JSX zurückgibt. Lerne, wie du Funktionskomponenten schreibst und benennst, sie zu einem Baum zusammensetzt, auf Dateien verteilst, pur hältst und wie sich Komponenten von Elementen unterscheiden.
- PropsProps sind die Eingaben einer React-Komponente: Werte, die ein Elternteil als JSX-Attribute an ein Kind übergibt. Lerne, wie du Props übergibst und destrukturierst, Standardwerte setzt, Funktionen übergibst, Props spreadest und warum Props schreibgeschützt sind.
- React childrenchildren ist die Prop, die alles enthält, was du zwischen das öffnende und das schließende Tag einer Komponente schreibst. Lerne, wie du damit Wrapper- und Layout-Komponenten baust, mehrere Slots als benannte Props übergibst, children als Funktion nutzt und wann die Children-API das falsche Werkzeug ist.
- FragmentsEin React Fragment fasst mehrere Elemente zu einem Rückgabewert zusammen, ohne der Seite einen Knoten hinzuzufügen. Lerne die kurze Syntax <>...</>, wann du <Fragment key> brauchst und warum Fragments in Tabellen und Listen wichtig sind.
- Bedingtes RendernBedingtes Rendern in React ist reines JavaScript: Eine if-Anweisung, ein ternärer Operator oder && entscheidet, welches JSX eine Komponente zurückgibt. Lerne jedes Muster, die verirrte 0, die && ausgeben kann, das Zurückgeben von null und warum Verstecken nicht dasselbe ist wie nicht Rendern.
- Listen und KeysUm in React eine Liste zu rendern, rufst du map() auf einem Array auf und gibst für jeden Eintrag JSX zurück, mit einer key-Prop an jedem Eintrag. Lerne filter vor map, woher Keys kommen sollten und warum Array-Indizes als Keys Einträge vertauschen, wenn sich die Liste ändert.
- EventsReact-Events sind Props wie onClick und onChange, die eine Funktion annehmen, die React mit einem Event-Objekt aufruft, wenn jemand etwas tut. Lerne, wie du einen Handler übergibst statt ihn aufzurufen, Argumente übergibst, e.target.value und e.key liest, das Neuladen von Formularen verhinderst und Bubbling stoppst.
- Styling in ReactDu stylst React-Komponenten mit className und gewöhnlichem CSS, mit der style-Prop für Werte, die in JavaScript berechnet werden, mit CSS Modules für gekapselte Klassennamen oder mit Tailwind-Utility-Klassen. Lerne jeden Weg, bedingte Klassen und wann du welchen nimmst.
State und Formulare
- useStateuseState gibt einer Komponente einen Wert, der erneutes Rendern übersteht, und einen Setter, der den Bildschirm neu zeichnet, wenn sich der Wert ändert. Lerne die Syntax, Updater-Funktionen, Objekte und Arrays im State und warum ein Wert direkt nach dem Setzen veraltet wirkt.
- Arrays und Objekte im StateUm ein Array oder Objekt im React-State zu ändern, baust du ein neues und übergibst es an den Setter. Lerne, wie du Einträge hinzufügst, entfernst, ersetzt, einfügst und sortierst, verschachtelte Objekte aktualisierst und warum mutierter State den Bildschirm unverändert lässt.
- FormulareBaue Formulare in React mit kontrollierten Inputs: Textfelder, textarea, select, Checkboxen und Radio-Buttons, ein State-Objekt für viele Felder, Absenden mit onSubmit, Validierungsfehler anzeigen und Form Actions in React 19.
- Kontrolliert vs. unkontrolliertEin kontrolliertes Input bekommt seinen Wert aus dem React-State und ändert sich nur über onChange. Ein unkontrolliertes Input hält seinen Wert selbst im DOM, und du liest ihn mit einer Ref oder FormData. Lerne den Unterschied, die häufigen Warnungen und wann du was nimmst.
- State nach oben verlagernState nach oben verlagern (Lifting State Up) heißt, State aus zwei Komponenten in ihr nächstes gemeinsames Elternteil zu verschieben, das den Wert und einen Setter als Props wieder nach unten reicht. Lerne, wann du verlagerst, wie es in drei Schritten geht und wann State besser lokal bleibt.
- useReduceruseReducer speichert State und verlagert jedes Update in eine Reducer-Funktion: Du dispatchst eine Action, und der Reducer gibt den nächsten State zurück. Lerne die Syntax, wie du einen puren Reducer schreibst, ein Todo-Listen-Beispiel, lazy Initialisierung und wann du ihn statt useState nimmst.
Effekte und Refs
- useEffectuseEffect führt Code aus, nachdem React den Bildschirm aktualisiert hat, damit sich eine Komponente mit etwas außerhalb von React synchronisieren kann: einem Timer, einem Abonnement, einem Event-Listener. Lerne die drei Formen des Abhängigkeitsarrays, die Cleanup-Funktion, Endlosschleifen und wann du gar keinen Effekt brauchst.
- Daten ladenLade Daten in React, indem du die Anfrage in useEffect startest, Ladezustand, Fehler und Daten im State hältst und Antworten ignorierst, die eintreffen, nachdem sich die Eingaben geändert haben. Mit async/await in Effekten, AbortController, Race Conditions und wann eine Bibliothek besser ist.
- useRefuseRef gibt einer Komponente eine Box, `{ current }`, die ihren Inhalt zwischen Renders behält, ohne beim Ändern einen Render auszulösen. Nutze sie, um einen DOM-Knoten zu erreichen (fokussieren, scrollen, messen) oder um eine Timer-ID oder einen anderen Wert zu speichern, den der Bildschirm nicht zeigt.
- forwardRefMit forwardRef nimmt eine Komponente eine Ref von ihrem Elternteil an und hängt sie an einen DOM-Knoten darin. In React 19 erhalten Funktionskomponenten `ref` als normale Prop, also braucht neuer Code kein forwardRef mehr. Sieh beide Versionen in Aktion, dazu useImperativeHandle und TypeScript-Typen.
- useLayoutEffectuseLayoutEffect funktioniert wie useEffect, läuft aber direkt nachdem React das DOM aktualisiert hat und bevor der Browser zeichnet. Nutze ihn, um ein Element zu messen und das Layout ohne sichtbares Flackern anzupassen, und behalte useEffect für alles andere.
Hooks und Context
- React HooksEin Hook ist eine Funktion, deren Name mit use beginnt und mit der eine Komponente ein React-Feature wie State, Context, Refs oder Effekte nutzt. Sieh jeden eingebauten Hook nach Zweck gruppiert, die zwei Regeln, die jeder Hook befolgt, und wie du deinen eigenen schreibst.
- useContextuseContext liest einen Wert, den eine Elternkomponente bereitstellt, sodass eine tief verschachtelte Komponente ihn bekommt, ohne dass jede Komponente dazwischen ihn als Prop weiterreicht. Lerne createContext, Provider, das Aktualisieren von Context aus einem Kind und wie Context das erneute Rendern beeinflusst.
- Prop DrillingProp Drilling heißt, eine Prop durch Komponenten zu reichen, die sie nicht nutzen, nur damit eine Komponente weiter unten es kann. Sieh es in einem ausführbaren Beispiel, warum es mit wachsender App schmerzt, und die Lösungen in der Reihenfolge, in der du sie probieren solltest: Komposition, Context, dann eine State-Bibliothek.
- Custom HooksEin Custom Hook ist eine Funktion, deren Name mit use beginnt und die andere Hooks aufruft, damit mehrere Komponenten dieselbe zustandsbehaftete Logik wiederverwenden können. Baue useToggle, useLocalStorage, useDebounce und useWindowWidth und lerne, warum jeder Aufruf seinen eigenen State bekommt.
- Regeln der HooksHooks haben zwei Regeln: Ruf sie auf der obersten Ebene einer Komponente auf, nie in Bedingungen, Schleifen oder verschachtelten Funktionen, und ruf sie nur aus Funktionskomponenten oder Custom Hooks auf. Lerne, warum React bei jedem Render dieselbe Reihenfolge der Aufrufe braucht und wie du die Fehler behebst, die entstehen, wenn sie sich ändert.
- useIduseId gibt für jede Instanz einer Komponente eine eindeutige, stabile ID zurück, damit ein Label, ein Input und ein Hinweis per aria-describedby aufeinander zeigen können, auch wenn die Komponente viele Male vorkommt. Lerne, warum Math.random und Zähler beim Server-Rendering scheitern und warum useId nicht für Keys in Listen ist.
- useSyncExternalStoreuseSyncExternalStore abonniert für eine Komponente Daten, die außerhalb von React leben, etwa ein kleines Store-Modul oder eine Browser-API wie navigator.onLine, und rendert erneut, wann immer sich diese Daten ändern. Lerne subscribe und getSnapshot, warum der Snapshot gecacht sein muss, und getServerSnapshot.
Rendering und Performance
- RendernEine React-Komponente rendert erneut, wenn sich ihr State ändert, wenn ihr Elternteil rendert oder wenn sich ein Context ändert, den sie liest. Lerne den Unterschied zwischen Render und Commit, was das virtuelle DOM wirklich bedeutet und wie du unnötige Renders stoppst.
- useMemouseMemo cacht das Ergebnis einer Berechnung zwischen Renders und berechnet es nur neu, wenn sich seine Abhängigkeiten ändern. Lerne die Syntax, wie du ein Objekt für ein Kind mit memo stabil hältst und wann sich useMemo nicht lohnt.
- useCallbackuseCallback gibt zwischen Renders dieselbe Funktion zurück, bis sich ihre Abhängigkeiten ändern. Das hilft nur, wenn diese Funktion an ein Kind mit memo übergeben oder als Abhängigkeit eines Effekts genutzt wird. Lerne die Syntax, den Unterschied zu useMemo und die Fehler, die du vermeiden solltest.
- React.memomemo umhüllt eine Komponente, damit React ihr erneutes Rendern überspringt, wenn ihre Props flach gleich denen vom letzten Mal sind. Lerne, wann es hilft, warum neue Objekte und Funktionen in Props es aushebeln und was es nicht aufhält.
- useTransitionuseTransition markiert ein State-Update als nicht dringend, damit React die Seite reaktionsfähig hält, während es den langsamen Teil im Hintergrund rendert. Lerne isPending, startTransition, async Transitions in React 19 und warum es kein Debouncing ist.
- useDeferredValueuseDeferredValue gibt dir eine Kopie eines Werts, die bei schweren Renders hinterherhinken darf, damit ein Input reaktionsfähig bleibt, während eine langsame Liste nachzieht. Lerne, wie es funktioniert, den Anfangswert in React 19 und wie es sich mit useTransition und Debouncing vergleicht.
- Suspense und lazySuspense zeigt einen Fallback, solange die Komponenten darin nicht bereit sind, und React.lazy lädt den Code einer Komponente erst, wenn sie zum ersten Mal rendert. Lerne Code Splitting, verschachtelte Grenzen, Suspense mit use() in React 19 und die Fehlerbehandlung.
React 19 und Fortgeschrittenes
- React 19React 19 hat Actions, useActionState, useOptimistic, use, ref als Prop und Dokument-Metadaten gebracht, und 19.2 Activity und useEffectEvent. Sieh jedes Feature in Aktion, was entfernt wurde und wie du upgradest.
- useActionStateuseActionState umhüllt eine async-Action, behält den Wert, den sie zuletzt zurückgegeben hat, und sagt dir, ob sie noch läuft. Lerne die Signatur, Form Actions, das Zurückgeben von Validierungsfehlern und den Aufruf außerhalb eines Formulars.
- useOptimisticuseOptimistic zeigt das erwartete Ergebnis, während eine async-Action noch läuft, und fällt danach auf den echten State zurück, sodass sich eine fehlgeschlagene Anfrage selbst rückgängig macht. Lerne die Syntax, die Reducer-Form und warum der Hook in einer Action laufen muss.
- useuse liest beim Rendern den Wert eines Promise oder eines Context. Mit einem Promise suspendiert es, bis die Daten ankommen, und zeigt den Fallback der nächsten Suspense-Grenze. Anders als andere Hooks kann es in if-Anweisungen und Schleifen laufen.
- Error BoundariesEine Error Boundary ist eine Komponente, die Fehler abfängt, die beim Rendern der Komponenten in ihr geworfen werden, und statt eines leeren Bildschirms einen Fallback zeigt. Lerne, was sie abfängt, wie du sie als Klasse schreibst, wie du sie zurücksetzt und die Bibliothek react-error-boundary.
- PortalscreatePortal rendert einen Teil einer Komponente in einen anderen DOM-Knoten, etwa document.body, während er an derselben Stelle im React-Baum bleibt. Nutze es für Modals, Tooltips und Menüs, die overflow hidden und der Stapelung per z-index entkommen müssen.
- Strict ModeStrictMode ist ein Wrapper nur für die Entwicklung, der Komponenten zweimal rendert, Effekte beim Mounten mit Setup, Cleanup, Setup ausführt und vor veralteten APIs warnt, damit unpure Renders und fehlende Cleanups früh auffallen. In der Produktion bewirkt er nichts.
- LifecycleJede React-Komponente wird gemountet (erscheint), aktualisiert (rendert erneut) und unmountet (wird entfernt). Lerne, wie jede Phase zu useEffect passt, die Lifecycle-Methoden von Klassen und ihre Hook-Gegenstücke sowie die Render- und Commit-Phase.
- KlassenkomponentenEine Klassenkomponente ist eine JavaScript-Klasse, die React.Component erweitert und aus einer render-Methode JSX zurückgibt. Lerne this.props, this.state und setState, das Binden von Event-Handlern, Lifecycle-Methoden, PureComponent und wie du eine Klasse in eine Funktionskomponente umwandelst.
Vergleiche und Interviews
- React InterviewfragenRund 30 React-Interviewfragen vom Einstieg bis zum Profi, jede mit einer kurzen Antwort, die ein Interviewer akzeptieren würde, und mit Live-Code für die Fragen, die man besser sieht als liest.
- React vs. AngularReact ist eine UI-Bibliothek, die du mit anderen Werkzeugen kombinierst; Angular ist ein vollständiges Framework mit eingebautem Routing, Formularen, HTTP und Dependency Injection. Vergleiche dieselben Komponenten, in beiden geschrieben, nebeneinander.
- React vs. VueReact und Vue sind beide JavaScript-Werkzeuge, um Benutzeroberflächen aus Komponenten zu bauen. Sie unterscheiden sich im Markup (JSX vs. Templates), darin, wie sie auf Änderungen reagieren (unveränderlicher State und erneutes Rendern vs. veränderliche reaktive Refs), und darin, wie viel vom Ökosystem offiziell ist.
- React mit TypeScriptSo typisierst du eine React-App mit TypeScript: Props und children, useState mit Unions und null, useRef für DOM-Elemente, Event-Handler, Context, generische Komponenten und die Props nativer Elemente.
