React

1. 1

   Was ist React?

   Willkommen. Wenn du noch nie eine Zeile JavaScript geschrieben hast und dir nicht sicher bist, was ein "Framework" ist, bist du hier richtig. Am Ende...

   What React isComponents as functionsVirtual DOM intuitionRendering JSXCreating a Vite app
   25 Min.
2. 2

   JSX und Components

   In der letzten Lektion hast du gesehen, wie eine Komponente etwas zurückgibt, das wie HTML aussieht: return <h1>Hello, React</h1>;. Das sollte sich...

   JSX syntax rulesSingle root elementClassName vs classEmbedding expressions with {}Defining componentsComposing components
   30 Min.
3. 3

   Props

   Jede Komponente, die du bisher geschrieben hast, war fest verdrahtet. Greeting grüßt immer denselben Namen, Card zeigt immer denselben Text. Für eine...

   Passing props as attributesReceiving props objectDestructuring props in signatureDefault valuesThinking about prop shapes
   30 Min.
4. 4

   State mit useState

   Jede Komponente, die du bisher geschrieben hast, rendert bei gleichen Props jedes Mal dieselbe Ausgabe. Für eine Überschrift oder eine Karte reicht...

   UseState hookReading stateCalling the setterUpdater function formNever mutate stateCounter pattern
   35 Min.
5. 5

   Ereignisse verarbeiten

   Eine Komponente, die immer nur anhand von Props und State rendert, ist für sich genommen nicht interaktiv. Irgendetwas muss mitbekommen, dass der...

   OnClick handlerOnChange basicsPassing functions vs calling themEvent objectPassing handlers as props
   30 Min.
6. 6

   Bedingtes Rendering und Listen

   Fast jeder Bildschirm, den du je benutzt hast, zeigt je nach Bedingung das eine statt das andere: ein Banner "Du hast neue Nachrichten", das nur...

   && for show/hideTernary for either/orMapping arrays to JSXThe key propWhy keys need to be stable
   30 Min.
7. 7

   Formulare und Controlled Inputs

   Tippst du einen Buchstaben in ein einfaches HTML-<input>, erledigt der Browser das von selbst: Das DOM-Element merkt sich still, was du getippt hast,...

   Controlled input patternValue and onChange togetherMulti-field form stateOnSubmit and preventDefaultGathering form data
   35 Min.
8. 8

   Effects mit useEffect

   Die Aufgabe einer Komponente bestand bisher darin, ihre aktuellen Props und ihren State anzuschauen und eine einzige Frage zu beantworten: Was soll...

   What counts as a side effectUseEffect signatureDependency arrayRunning on mount onlyCleanup functionSubscribe/unsubscribe pattern
   40 Min.
9. 9

   Datenabruf

   Fast keine echte Anwendung kommt damit aus, nur Daten anzuzeigen, die der Nutzer ohnehin schon vor sich hat. Irgendwann muss eine Komponente einen...

   Fetch inside useEffectLoading/error/data statesAbortController cleanupPreventing setState after unmountMention TanStack Query as a next step
   40 Min.
10. 10

    Component-Komposition

    Du hast eine Karte mit Rahmen und Schatten gebaut, und sie sieht gut aus. Jetzt brauchst du dieselbe Karte um ein Foto herum, um ein Anmeldeformular...

    Children propWrapping componentsPassing JSX as propsLifting state upThinking in component trees
    35 Min.
11. 11

    Context und useContext

    Deine Anwendung hat einen Schalter für den Dark Mode. Der Schalter sitzt im Einstellungsbereich, aber wissen muss davon ein Button acht Komponenten...

    CreateContextContext.ProviderUseContextWhen context is the right toolContext vs prop drilling tradeoffs
    35 Min.
12. 12

    useReducer

    Ein Bestellformular fängt einfach an. Es gibt einen Wert, also nimmst du useState. Dann braucht es eine Fehlermeldung, also noch ein useState. Dann...

    When to reach for useReducerReducer function shapeAction objectsDispatchCombining useReducer with useContext
    35 Min.
13. 13

    Benutzerdefinierte Hooks

    Du hast eine Schublade gebaut, die auf- und zugeht. Drei useState-Zeilen und ein Handler, der einen Boolean umklappt. Dann dasselbe für ein Dropdown,...

    Extracting stateful logic into a functionUse prefix conventionUseToggle exampleUseLocalStorage exampleHooks rules
    35 Min.
14. 14

    Performance und Memoization

    Deine App hat eine Tabelle mit zweitausend Zeilen und darüber ein Suchfeld. Jeder Tastendruck fühlt sich zäh an: Du tippst, und eine halbe Sekunde...

    React.memo for componentsUseMemo for expensive computationsUseCallback for stable function referencesWhen memoization is overkillMeasuring before optimizing
    35 Min.
15. 15

    Routing mit React Router

    Alles, was du bisher gebaut hast, liegt unter einer einzigen Adresse. Es gibt eine Seite, und was der Nutzer sehen soll, blendest du über den State...

    Installing react-router-domBrowserRouterRoutes and RouteLink for navigationUseParamsUseNavigate
    40 Min.
16. 16

    React Components testen

    Du änderst eine Zeile in einer gemeinsam genutzten Komponente und klickst danach zwanzig Minuten lang durch die Anwendung, um zu prüfen, dass nichts...

    Vitest + React Testing Library setupRender and screenGetByRole queriesUserEvent for interactionsWriting one good button test
    40 Min.
17. 17

    Abschlussprojekt: To-do-App

    Jede Lektion bisher hat dir eine Idee auf einmal gegeben, mit einem kleinen Beispiel drumherum. Echte Anwendungen sind nicht so. In einer echten...

    Combining state, lists, controlled inputsCustom hook for localStorage persistenceSmall routing setupPutting it together
    60 Min.

Jede Lektion, jedes Quiz und jede Tutor-Antwort erscheint in deiner Sprache. Der KI-Tutor antwortet in der Sprache, in der du fragst.

See how hiring teams interview engineers on React, in production-like environments.