Building applications with React
You build a multi-page React application end to end with routing, context, reducers, data fetching, forms and tests, keeping state and performance under control.
Level 301 · 16 lessons · 15 practice labs
Lessons
State management
- Putting state in the right place
- Complex state with useReducer
- Sharing state with context
- useRef and reaching the DOM
- Short task: shopping cart state
Application structure
- Client-side routing
- Data loading, waiting and error states
- Form validation in React
- Error boundaries and fallback UI
- Code splitting and lazy loading
- Short task: a three-page catalogue app
Quality and speed
- Finding and avoiding needless re-renders
- Testing React components
- Accessibility and focus management in React
- The user interface of a login flow
- Capstone: a team task board
Practice labs
- Gather scattered state into useReducer: Move a booking form that uses five separate useState calls into one reducer.
- End prop drilling with context: Switch an app that passes theme and language through four layers of props to context.
- Split a context that re-renders everything: Separate user and notification data held in one context so the whole app stops re-rendering on every change.
- Open a product detail by URL: Add a /product/:id route to a product list and make a detail page that opens straight from the URL.
- Fix a racing data load: When switching pages fast an old response overwrites the new page; fix it by cancelling the request.
- Show a proper not-found page for a deleted record: Show a not-found page with a way back, using nested routes and an error element, instead of a blank screen when a deleted order's URL is opened.
- Isolate a crashing comments component: Stop the whole page vanishing when the comments component throws, using an error boundary and fallback UI.
- Validate a multi-step application form: Validate each step of a three-step insurance application before moving on and show errors beside the fields.
- Lazy-load a heavy chart page: Set up lazy and Suspense so the chart library loads only when the report page opens, and measure the first load.
- Find components that re-render for nothing: Use the React dev tools profiler to find components on a chat screen that re-render for nothing.
- Speed up a contact list with memo: Speed up a contact list that redraws a thousand rows on every keystroke with memo and useCallback.
- Test a product table from the user's view: Test a filterable product table with Testing Library by role and text and drop brittle selectors.
- Move focus to the heading on page change: Move focus to the new page's heading on route change so screen readers notice.
- Announce errors on a login form: Build a login form that announces errors with aria-live and moves focus to the first invalid field.
- Don't lose the form when the session expires: Build a flow that sends the user to log in again when the session drops without losing the half-filled form, then brings them back.
About this course
You build a multi-page React application end to end with routing, context, reducers, data fetching, forms and tests, keeping state and performance under control.
What you will learn
- State management
- Application structure
- Quality and speed
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.