Developer Foundations line, station 6 of 9
React for the Web
Build fast, accessible web front ends with React 19 and Next.js: components, state, data loading, forms and tests.
- 6lessons
- 4 hto read and do
- Intermediatelevel
- 6podcast episodes
- 12checked exercises
Tools you'll use in this course
The lessons open these with a template ready. They work for your own job too, no course needed.
About this course
Most web products are a React front end on top of an API. This course takes you from your first component to a production-quality screen: how React renders, where state should live, how to load and cache data, how forms and errors work, and how the Next.js App Router splits work between the server and the browser.
You build the back-office stock screen that Mangrove Market's store managers use every morning: a searchable product list, a stock adjustment form with validation, live order counts, and a page that still works on a slow connection in a store at the edge of town. Every lesson ends with a working piece you can keep.
Every lesson has diagrams, quick checks, a Build it section in TypeScript with React 19 and Next.js 16, practice tasks with JavaScript exercises checked in your browser, flashcards and a podcast episode. The course ends with a capstone project and a final exam for a free certificate.
What you will be able to do
- Break a screen into components with clear props and state
- Load, cache and refresh server data without loading spinners everywhere
- Build forms with validation, error states and optimistic updates
- Decide what runs on the server and what runs in the browser in Next.js
- Make pages accessible and fast, and test them like a user would
Syllabus
6 stops, about 4 h in total. Each stop fills in when you complete the lesson.
Components, props and how React renders
Every React screen is a tree of small functions that turn data into a description of the page. In this lesson you cut Mangrove Market's back-office stock screen into components, and you learn exactly when React calls them again and what it changes on screen afterwards.
ReactTypeScriptComponent design
State, effects and where data should live
Most React bugs on real screens are state in the wrong place: two copies of the same number that disagree, a filter that vanishes when you share a link, or an effect that shows the answer to an old search. This lesson gives you a short method for deciding where each piece of data lives, and shows the few jobs that really need an effect.
ReactState managementData fetching
Loading server data
At 7 am Ama opens the stock screen on her store's slow connection at the edge of town. This lesson shows you how to load its data on the server, show something useful at once, recover from errors, cache what can be cached and keep the live order counts fresh, with React 19 and the Next.js 16 App Router.
Data fetchingNext.jsReact
Forms that people can trust
A stock adjustment form looks small, but every save changes what the shelf report says and what the store reorders. This lesson builds one that store managers can trust on a slow connection: it checks every rule on the server, explains each error so anyone can fix it, never saves the same adjustment twice, and shows the new count at once without lying when the server says no.
FormsNext.jsAccessibility
Accessible, fast pages
Ama checks her stock screen at 7 am on a cheap Android phone over patchy mobile data. One of her supervisors uses a screen reader, and another works only with a keyboard. This lesson shows you how to make one screen work for all of them and feel instant on slow hardware, by measuring first and then fixing the part that is really slow.
AccessibilityWeb performanceReact
Testing React like a user
A good test fails when Ama cannot do her job, and stays green when you only tidy the code. This lesson shows you how to write React tests that behave like a store manager: find things by their labels, type and click, wait for the server, and check what appears on the screen. Then you add one end-to-end test for the whole morning flow.
Component testingReactAccessibility
Capstone: Build the store manager's morning stock screen
A realistic project with a rubric and a model answer.
Final exam and certificate
10 questions drawn at random, 70% to pass.
Capstone project
Build the store manager's morning stock screen
Ama, a Mangrove store manager, starts each day by checking low stock and fixing counts before the first delivery arrives. Build the screen she uses: a searchable list of low-stock items with the search in the URL, an adjustment form with reasons that validates on the server and updates the row optimistically, and a summary of today's app orders that refreshes every 30 seconds, all working on a slow store connection and a cheap phone. Use Next.js with the App Router and a small fake API or database of about 2,000 items. Plan for 6 to 10 hours.
You will hand in
- A Next.js app with the three parts of the screen, in a public repository
- Component tests with Testing Library and one Playwright end-to-end test of the morning flow
- A short note on what runs on the server and why, with Lighthouse or Web Vitals numbers before and after one fix
Check what you know
Already know some of this? Answer 6 quick questions, one from each lesson, and we will mark the lessons you can skim. It takes about 3 minutes and nothing is graded.
Questions
How long does the course take?
About four to five hours: six lessons of 35 to 45 minutes each, including the Build it steps and practice, plus an optional podcast episode of about 10 to 13 minutes per lesson. The capstone project takes 6 to 10 hours.
Do I need to know React already?
No. You need solid JavaScript (JavaScript Deep Dive covers it) and a rough idea of how a browser talks to a server (How the Web Works covers that).
Is it React or Next.js?
Both. The first lessons are plain React; from the data-loading lesson on, the course shows how the Next.js App Router adds server rendering, routing, data loading and forms on top. Versions are React 19 and Next.js 16, and the lessons say when something is version dependent.
What do I need to install?
Node.js and VS Code for the Build it steps. The practice exercises are plain JavaScript and run in your browser with nothing installed.
Is the certificate free, and how does the exam work?
Yes, the certificate is free, like everything else on Kolom. Each attempt mixes questions from the course's question bank with two practical tasks, some of them code checked in your browser. You need 70% on both parts to pass, and you can try again after 24 hours.
Is it really free?
Yes. Every lesson, podcast episode, exercise, quiz, final exam and certificate is free. The labs and their templates for real work are free too. Plus and Premium add every lab challenge, weekly extras and a mentor on top, and they never lock the tools or the courses.