React

1. 1

   What is React?

   Welcome. If you have never written a line of JavaScript and you are not sure what a "framework" is, you are in the right place. By the end of this...

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

   JSX and Components

   In the last lesson you saw a component return something that looked like HTML: return <h1>Hello, React</h1>;. That should have felt slightly wrong....

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

   Props

   Every component you have written so far has been hardcoded. Greeting always says hello to the same name, Card always shows the same text. That is...

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

   State with useState

   Every component you have written so far renders the same output for the same props, every single time. That is fine for a heading or a card, but it...

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

   Handling Events

   A component that only ever renders based on props and state is not interactive on its own, something has to notice when the user clicks a button,...

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

   Conditional Rendering and Lists

   Almost every screen you have ever used shows one thing instead of another depending on some condition: a "you have new messages" banner that only...

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

   Forms and Controlled Inputs

   Type a letter into a plain HTML <input> and the browser just handles it: the DOM element quietly keeps track of what you typed, and nobody else needs...

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

   Effects with useEffect

   A component's job, so far, has been to look at its current props and state and answer one question: what should be on screen right now. That answer...

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

   Data Fetching

   Almost no real app can get by showing only data the user already has on their screen. At some point a component needs to ask a server for something,...

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

    Component Composition

    You have built a card with a border and a shadow, and it looks good. Now you need the same card around a photo, and around a login form, and around a...

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

    Context and useContext

    Your app has a dark mode toggle. The toggle lives in the settings panel, but the thing that needs to know about it is a button eight components deep...

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

    useReducer

    A checkout form starts simple. There is a value, so you add useState. Then it needs an error message, so that is another useState. Then a loading...

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

    Custom Hooks

    You wrote a drawer that opens and closes. Three useState lines and a handler that flips a boolean. Then the same thing for a dropdown, and again for...

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

    Performance and Memoization

    Your app has a table with two thousand rows and a search box above it. Every keystroke feels heavy: you type, and half a second later the letter...

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

    Routing with React Router

    Everything you have built so far lives at one address. There is a single page, and whatever you want the user to see, you show or hide with state....

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

    Testing React Components

    You change one line in a shared component and then spend twenty minutes clicking around the app checking that nothing else broke. Next week you...

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

    Capstone: Todo App

    Every lesson so far handed you one idea at a time with a small example around it. Real apps are not like that. In a real app the state, the list...

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

Every lesson, quiz, and tutor reply renders in your language. The AI tutor matches the language you ask in.

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