Grundlagen
Alle ansehen- 01 Was ist React? Philosophie, Komponenten und virtuelles DOM
- 02 JSX – Syntax und Regeln Markup direkt in JavaScript schreiben
- 03 Setup: Vite, Next.js & Create React App Projekt aufsetzen mit Vite, Next.js oder CRA
- 04 Erste Komponente Vom leeren Projekt zur ersten Komponente
- 05 Komponenten-Denken UI strukturiert in Komponenten zerlegen
Components
Alle ansehen- 01 Einführung Die Grundbausteine jeder React-Anwendung: Funktionen, die JSX zurückgeben
- 02 Funktionale vs. Klassen-Komponenten Unterschiede, Vor- und Nachteile, Migration
- 03 Props Der Mechanismus, mit dem Daten in Komponenten hineingegeben werden — Attribute außen, Parameter innen
- 04 Children Prop Inhalte zwischen den Tags entgegennehmen
- 05 Conditional Rendering Vier Wege, in React unterschiedliche UI je nach Bedingung zu rendern
- 06 Schleifen Listen mit map() rendern und Keys setzen — der Schlüssel zur Reconciliation
- 07 Element-Kontrolle Wer kontrolliert Form-Werte: React via State (controlled) oder das DOM via ref (uncontrolled)
- 08 Styling Die wichtigsten Styling-Ansätze in React im Vergleich
- 09 Bilder Bilder in React-Komponenten korrekt einbinden: Import aus /src oder direkter Pfad aus /public
- 10 Fragments Mehrere Elemente ohne zusätzlichen DOM-Knoten
- 11 Composition statt Inheritance Komponenten komponieren statt vererben — das Strukturprinzip von React
State
Alle ansehen- 01 Einführung in State Veränderlicher Zustand pro Komponente — der Auslöser für Re-Renderings
- 02 Funktionsweise von useState() Wie useState intern arbeitet: Tupel aus Wert und Setter, Re-Render bei Setter-Aufruf
- 03 Datentypen mit useState() Welche JavaScript-Datentypen sich als State eignen — und welche besser nicht
- 04 Mehrere Zustandswerte Mehrere getrennte useState-Aufrufe oder ein gebündeltes State-Objekt — wann was sinnvoll ist
- 05 Lazy Initial State Teure Initial-Berechnung nur beim ersten Mount — Funktion an useState übergeben
- 06 State vs. Props Beide halten Daten, beide lösen Re-Renders aus — aber wann State, wann Props?
- 07 Immutability – warum nie direkt mutieren State niemals direkt mutieren
- 08 State Lifting Wenn Geschwister-Komponenten denselben Wert brauchen: State in den gemeinsamen Eltern verschieben
- 09 Formulare und useState() Form-Felder mit useState verwalten — controlled inputs, Validation, Submit-Handler
Hooks
Alle ansehen- 01 Einführung in Hooks Was Hooks sind, wann sie aufgerufen werden dürfen und welche eingebauten Hooks es gibt
- 02 useState() Der wichtigste Hook: lokaler State pro Komponente, Tupel aus Wert und Setter
- 03 useEffect() Side-Effects nach dem Render: Fetch, Subscriptions, DOM-Manipulation — mit Dependency-Array und Cleanup
- 04 useRef() Mutable Container für DOM-Knoten oder Werte, die zwischen Renders überleben — ohne Re-Render bei Änderung
- 05 useMemo() Wert memoisieren — nur bei Dependency-Änderung neu berechnen
- 06 useCallback() Funktion memoisieren — stabile Referenz für React.memo-Kinder und Effect-Dependencies
- 07 useLayoutEffect() Wie useEffect, aber synchron vor dem Browser-Paint — für DOM-Messungen und Flicker-Fixes
- 08 useImperativeHandle() Custom-API über ref nach außen geben — selektiv und kontrolliert statt direkter DOM-Zugriff
- 09 useReducer() State mit Action-Dispatch — Redux-Pattern für komplexe lokale State-Übergänge
- 10 useContext() Context-Wert lesen ohne Prop-Drilling — Wert kommt vom nächsten Provider in der Komponenten-Hierarchie
- 11 useTransition() State-Updates als 'nicht dringend' markieren — UI bleibt responsiv bei teuren Renders
- 12 useDeferredValue() Liefert eine 'hinterhereilende' Kopie eines Werts — die UI bleibt responsiv bei hochfrequenten Updates
- 13 useId() Eindeutige IDs pro Komponenten-Instanz — für a11y-Attribute, sicher beim Server-Rendering
- 14 useSyncExternalStore() Externe Datenquellen (Redux, Zustand, browser-APIs) sicher in React-Components subscriben — Concurrent-safe
- 15 useOptimistic() UI sofort aktualisieren, bevor der Server geantwortet hat — bei Fehler automatisch zurücksetzen
Refs
Alle ansehen- 01 Einführung in Refs Direkter DOM-Zugriff oder Mutable Container ohne Re-Render — der useRef-Hook als Schweizer Taschenmesser
- 02 Refs vs. State Refs für imperativen Zugriff ohne Re-Render, State für reaktive UI — die Schlüsselfrage: triggert Änderung ein Render?
- 03 useRef – Weitere Möglichkeiten useRef jenseits von DOM: Timer-IDs, vorherige Werte, Mutable Container, Component-Referenzen
- 04 forwardRef Refs an eigene Function-Components weiterreichen — bis React 18 Pflicht, ab React 19 obsolet
- 05 DOM-Manipulation mit Refs Imperative DOM-Operationen wie focus, scrollIntoView, getBoundingClientRect — über Refs sicher zugreifbar
- 06 Callback Refs Funktion statt Objekt als ref — direkt auf Mount und Unmount reagieren, ohne useEffect
Context
Alle ansehen- 01 Einführung in Context Daten über die Komponenten-Hierarchie hinweg teilen — ohne sie durch jede Zwischen-Komponente als Prop zu reichen
- 02 createContext() Erzeugt das Context-Objekt mit optionalem Default-Wert — Ausgangspunkt für Provider und useContext
- 03 Provider Stellt den Context-Wert für alle Kind-Komponenten bereit — verschachtelbar, mit value-Prop
- 04 Context API Verwendung Praktisches Beispiel: globalen Theme-State per Context an alle Komponenten verteilen
- 05 Provider-Wrapper – Translation-Beispiel Custom-Provider mit eingebautem State, eigenem Hook und Null-Check — am Beispiel eines Locale-Wrappers
- 06 Context vs. Props Drilling Wann Props durchreichen, wann Context — der Trade-off zwischen Explizitheit und Bequemlichkeit
- 07 Performance-Fallstricke Warum Context bei hochfrequenten Updates alle Konsumenten rendert — und wie man das fixt
Custom Hooks
Alle ansehen- 01 Einführung in Custom Hooks Eigene Funktionen, die andere Hooks aufrufen — der idiomatische Weg, stateful Logik zu teilen
- 02 Naming Conventions & Best Practices Wie man Custom Hooks benennt, strukturiert und im Code organisiert — die Konventionen, die der React-Community den meisten Nutzen bringen
- 03 Beispiel: useForm – Formulare mit Custom Hook Ein wiederverwendbarer useForm-Hook für Werte, Validierung und Touched-Felder — Schritt für Schritt
- 04 Beispiel: useLocalStorage – persistenter State State automatisch in localStorage spiegeln — SSR-sicher, Tab-übergreifend synchron, mit Memory-Fallback
- 05 Beispiel: useFetch – API-Daten laden Ein produktionsreifer useFetch-Hook mit Loading/Error-State, AbortController-Cleanup und Reload-Funktion
- 06 Beispiel: useDebounce – Wert mit Verzögerung Werte verzögert übernehmen — gegen API-Spam beim Tippen, gegen Renders bei jedem Resize-Pixel
- 07 Beispiel: useMediaQuery – Responsive Logik in JS Auf CSS-Media-Queries in JavaScript reagieren — für Komponenten, die je nach Viewport-Größe anders aussehen oder anderes Verhalten zeigen
- 08 Hook-Komposition Mehrere Custom Hooks zu größeren Domain-Hooks zusammenstellen — der idiomatische Weg, komplexe Logik wiederverwendbar zu organisieren
Advanced Patterns
Alle ansehen- 01 Higher-Order Components (HOC) Higher-Order Components in React: Funktion, die eine Komponente nimmt und eine erweiterte zurückgibt — mit modernen Custom-Hooks-Alternativen
- 02 Render Props Render Props: eine Komponente liefert Daten, der Konsument liefert die JSX-Darstellung als Funktion — flexibel, aber von Hooks weitgehend abgelöst
- 03 Compound Components Compound Components: mehrere Komponenten teilen sich impliziten State über Context — wie HTML-`<select>` und `<option>`
- 04 Container / Presentational Container/Presentational: Trennung von Daten-Logik (Container) und Darstellung (Presentational) — historisch wichtig, heute durch Hooks abgelöst
- 05 Provider Pattern Provider Pattern: Context-Provider zu App-weiten Bausteinen kombinieren, mit Provider-Komposition und Stack-Helpern