React

Reaktive, zusammensetzbare Oberflächen

React ist die erste Wahl, um Benutzeroberflächen zu bauen. Komponenten, JSX, State und Hooks, dann Datenhandling, Performance und Architektur: von deiner ersten Komponente bis hin zu Experten-Mustern.

Grundlagen

Anfänger - die Basics, Schritt für Schritt

• Warum React, deine erste Komponente und JSXEntdecke, was React ist, schreibe deine allererste Komponente und lerne die Grundregeln von JSX kennen.
• Props: Daten an eine Komponente übergebenLerne, wie du deine Komponenten wiederverwendbar machst, indem du ihnen über Props Daten übergibst.
• Lokaler State mit useStateGib deinen Komponenten mit useState ein Gedächtnis, damit du Werte anzeigen kannst, die sich ändern, während der Nutzer interagiert.
• Events und bedingtes RenderingReagiere auf Nutzeraktionen und blende Elemente je nach Bedingung ein oder aus.
• Listen rendern und die Rolle von KeysVerwandle ein Array aus Daten mit map in eine Liste von Elementen auf dem Bildschirm und identifiziere jedes Element mit Keys.

Fortschritt

Mittelstufe - echte Projekte bauen

• Kontrollierte FormulareLerne, jedes Formularfeld über den React-State zu steuern, damit du zuverlässige Daten validieren und absenden kannst.
• useEffect: Effekte, Abhängigkeiten, CleanupSynchronisiere deine Komponenten mit der Außenwelt über useEffect und meistere Abhängigkeiten und Cleanup.
• State hochziehen und Daten teilenPlatziere jeden State-Teil im nächsten gemeinsamen Vorfahren, um Daten zwischen mehreren Komponenten zu teilen, ohne sie zu duplizieren.
• Komposition: children und das Aufteilen in KomponentenBaue wiederverwendbare Container-Komponenten mit der children-Prop und teile deine Screens in klare Verantwortlichkeiten auf.
• Eine API aufrufen: fetch, Laden und FehlerLade entfernte Daten mit fetch innerhalb eines Effekts und modelliere die Lade- und Fehlerzustände sauber.

Fortgeschritten

Geübt - fortgeschrittene Muster und Performance

• useReducer für komplexen ZustandStrukturiere komplexen Zustand mit einem reinen Reducer, der Übergänge zentralisiert und unmögliche Kombinationen ausschließt.
• Context: teilen ohne Prop DrillingBewege Daten ohne Prop Drilling mithilfe von Context und behalte dabei seine erneuten Renderings und Grenzen im Griff.
• Eigene Hooks: Logik extrahieren und wiederverwendenExtrahiere zustandsbehaftete Logik in wiederverwendbare, komponierbare und testbare Hooks.
• Memoization: memo, useMemo, useCallbackLerne, wann React.memo, useMemo und useCallback deine App wirklich beschleunigen und wann sie sie umsonst verkomplizieren.
• useRef und DOM-ManipulationManipuliere das DOM und bewahre Instanzwerte mit useRef, ohne die Reinheit des Renderns zu brechen.

Meisterschaft

Experte - Architektur, Internals und Grenzfälle

• Unter der Haube: Reconciliation, Batching, Concurrent RenderingEntdecke, wie Fiber den Baum abgleicht, Updates bündelt und die Render-Arbeit unterbrechbar macht.
• Suspense, lazy und Code-SplittingMeistere den Suspension-Mechanismus, das verzögerte Laden von Komponenten und das Aufteilen des Bundles.
• Experten-Patterns: Compound Components, Inversion of ControlEntwirf flexible Komponenten-APIs mit Compound Components, dem State Reducer und der richtigen Wahl zwischen Render Props und Hooks.
• Modernes React: Server Components, use, useTransition, useOptimisticErkunde Server Components, das Lesen von Promises mit use und die optimistischen Updates von React 19.
• Qualität: Testing Library, StrictMode, ProfilerTeste das Verhalten statt der Implementierung, nutze die Doppelaufrufe von StrictMode und miss die Renders mit dem Profiler.