Skip to content
skillbld
All courses

Learn React by building it live in the page: components and JSX, props, state, events and forms, effects and data fetching, refs and performance, context, reducers and custom hooks, React with TypeScript, and the wider ecosystem. Every example is a component you can edit and see update instantly, with diagrams and a quick knowledge check every day.

  • 14 days
  • ~30 min / day
  • Intermediate
  • Free account required
Already know some of this? Take the 70-question skill test
0/14

Ready when you are

Saved on this device. No account needed.

Start Day 1

The big picture

Everything you'll cover, and how it fits together.

Mind map · click a dot to fold, drag to pan

Day by day

Go at your own pace. Your progress is remembered on this device.

  1. 1
    Day 1Up next 30 min

    What Is React?

    Components, JSX and how React turns them into a page.

    ComponentsJSXRendering
  2. 2
    Day 2 30 min

    JSX in Depth

    Expressions, attributes, conditionals, lists and keys.

    ExpressionsConditionalsLists & keys
  3. 3
    Day 3 30 min

    Props & Composition

    Pass data into components and build bigger pieces from small ones.

    PropschildrenComposition
  4. 4
    Day 4 30 min

    State with useState

    Make components remember things and update the screen.

    useStateRe-renderingUpdating objects
  5. 5
    Day 5 30 min

    Events & Forms

    Respond to clicks and typing, and build controlled forms.

    EventsControlled inputsValidation
  6. 6
    Day 6 30 min

    Lists, Conditions & Styling

    Render dynamic lists, filter and sort them, and style components.

    FilteringEmpty statesStyling
  7. 7
    Day 7 30 min

    Effects with useEffect

    Synchronise with the outside world, and know when you don't need an effect.

    useEffectCleanupDependencies
  8. 8
    Day 8 30 min

    Fetching Data

    Load data with loading, error and empty states, and avoid race conditions.

    Loading statesErrorsRace conditions
  9. 9
    Day 9 30 min

    Refs & Performance

    useRef for DOM access and values, and useMemo, useCallback and memo.

    useRefuseMemomemo
  10. 10
    Day 10 30 min

    Sharing State & Context

    Lift state up, avoid prop drilling, and use Context well.

    Lifting stateContextProp drilling
  11. 11
    Day 11 30 min

    useReducer & Custom Hooks

    Manage complex state with reducers and reuse logic with your own hooks.

    useReducerCustom hooksReuse
  12. 12
    Day 12 30 min

    React with TypeScript

    Type props, state, events, hooks and context.

    Typed propsEventsGeneric components
  13. 13
    Day 13 30 min

    The React Ecosystem

    Routing, Next.js, server components, data libraries and testing.

    RoutingNext.jsTesting
  14. 14
    Day 14 30 min

    Project: A Flashcards App

    Build a complete flashcards app with everything from the course.

    PlanningBuildingPolish