React in practice
A course for people who already write markup and want to build interfaces in React. We cover state, hooks, server data and routing, and at the end we publish a working shop with a cart and checkout.
What you will be able to do
12 modules, one project
01 First components and JSX3 lessons · 2 h 16 minOpen
We set the project up, find our way around the folder structure and the JSX syntax. We take the catalogue design from the markup course and split it into components that later grow into the shop.
02 Props and composing components3 lessons · 2 h 16 min
We learn to pass data down the tree and assemble complex blocks out of simple ones. We cover children, default values and the line between a component and its settings.
03 State and hooks3 lessons · 2 h 17 min
Component state, reacting to events and effects for working with the outside world. We move repeated logic into our own hooks and go through the common mistakes with dependencies.
04 Lists, keys and conditional rendering2 lessons · 1 h 34 min
We render the catalogue from an array, work out keys and why a list «jumps». We show empty states, filters and sorting without extra redraws.
05 Forms and validation3 lessons · 2 h 16 min
Controlled fields, form state and validation without third-party libraries. We build a multi-step order form with clear error messages and protection against double submission.
06 Server data3 lessons · 2 h 19 min
We request the catalogue from a server: async/await, cancelling stale requests and racing responses. We add search and paged loading without breaking the state of the screen.
07 Loading, errors and retries2 lessons · 1 h 34 min
The two states people usually forget: while it loads and when it breaks. Skeletons, retries, error boundaries and messages a person can understand.
08 Routing3 lessons · 2 h 12 min
We spread the shop across pages: catalogue, product, cart, checkout. URL parameters, nested routes with a shared layout, redirects and access for signed-in users only.
09 Shared application state3 lessons · 2 h 21 min
When props are no longer enough: context for the theme and the user, useReducer for the cart. We compare the approaches and move the cart into an external store that survives between sessions.
10 Performance and re-renders3 lessons · 2 h 16 min
We look for the causes of unnecessary redraws in the profiler and fix them. memo, useMemo and useCallback where they earn their place, virtualising a long catalogue, and measurements before and after.
11 Testing the basic scenarios3 lessons · 2 h 19 min
We write tests that check behaviour rather than markup. A button click, a form submission, adding an item to the cart and mocking network requests.
12 Build, deploy and the final project3 lessons · 2 h 20 min
We make a production build, deal with environment variables and bundle size. We finish the order payment, publish the shop online and check it on a real domain.
What you get
A project template with the catalogue markup, card designs and a practice API, so you can start at lesson one without setting up an environment.
The checks before a merge: prop structure, side effects, keys in lists, error handling, accessibility and re-renders.
Short cards with signatures, typical mistakes and examples for useState, useEffect, useMemo, useCallback, useReducer and your own hooks.
A reference implementation of the shop with a cart, payment and deployment, to compare your decisions against and go through the debatable parts.
The whole first module is open
Watch the lessons of the first module and the first task. If the format does not suit you, you have lost nothing.