React Course

Course overview

A JavaScript refresher followed by an introduction to React: components, props, state, hooks, and loading data.

4 modules
22 lessons
Start the course
Part 1

JavaScript Refresher

The JavaScript you need before React makes sense. Scope, functions, destructuring, and async work — the features React leans on hardest.

  1. let, const, and Scope

    Block scope, the temporal dead zone, and why var still causes surprises.

  2. Arrow Functions and this

    Concise function syntax, implicit returns, and how arrow functions change what this means.

  3. Destructuring, Spread, and Rest

    Pulling values out of objects and arrays, and copying them without mutation.

  4. Array Methods: map, filter, reduce

    The transformations you will reach for in every list you render.

  5. Modules: import and export

    Named and default exports, and how a component file is wired together.

  6. Promises and async/await

    Asynchronous work, error handling, and the model behind data fetching.

Part 2

React Fundamentals

The core of React: describing UI as a function of data, and letting React work out what to change on screen.

  1. Why React: The Mental Model

    Declarative UI, the component tree, and what React actually does for you.

  2. JSX in Depth

    What JSX compiles to, expressions in braces, and the rules that trip people up.

  3. Components and Props

    Building components, passing data down, and why props are read-only.

  4. Rendering Lists and Keys

    Turning arrays into elements, and choosing keys that keep state attached to the right row.

  5. Conditional Rendering

    Showing and hiding UI, and the falsy values that render when you did not expect them to.

  6. Handling Events

    Event handlers, passing arguments, and how React's synthetic events differ from the DOM.

Part 3

State and Hooks

Adding memory and behaviour to components, and the rules that keep hooks predictable.

  1. Managing State with useState

    State updates, batching, and why you update state instead of mutating it.

  2. useEffect and the Dependency Array

    Synchronising with the outside world, cleanup functions, and avoiding effect loops.

  3. useRef, useMemo, and useCallback

    Escaping the render cycle, and memoising only when it actually pays for itself.

  4. Writing Custom Hooks

    Extracting stateful logic into reusable functions, and the rules of hooks.

  5. useReducer and useContext

    Managing complex state transitions and sharing values without prop drilling.

Part 4

Patterns and Data

Putting it together: structuring state across components, working with forms, and loading real data.

  1. Lifting State Up

    Finding the right owner for a piece of state when two components need it.

  2. Composition over Configuration

    Using children and slots instead of growing a component's props forever.

  3. Forms and Controlled Inputs

    Controlled versus uncontrolled inputs, and validating what the user typed.

  4. Fetching Data

    Loading, error, and success states, plus race conditions and cleanup.

  5. Error Boundaries and Suspense

    Catching render errors and showing fallbacks while content loads.