Build interfaces from components: JSX, props, state, lists, and forms, rendered live as you type.
React is the most-used way to build interfaces on the web, and you are arriving with the one thing most React beginners lack: you have already built its core idea by hand. In JavaScript DOM you kept state in variables, wrote a render function, and called it after every event. React is that same loop, automated. You describe what the page should look like for a given state, and React works out which parts of the document to change.
The course moves through React's load-bearing ideas in the order they build on each other: components, props, conditional rendering, lists, events, state, updating state safely, forms, and sharing one piece of state between several components. Everything lands on skills you already own. Destructuring unpacks props, map turns an array into rows, spread updates state without mutating it, and plain if statements steer the whole thing.
You build one artifact the whole way through: Crew, a team board. It starts as a single card, grows a roster, learns to filter and count, gains a form that adds people, and finishes as the capstone where every piece runs together. By the end you will have written React the way it is written on real teams, and you will know exactly what the framework is doing for you, because you did it by hand first.
62 Lessons • 64 Practices • 20 Quizzes • 4 Projects · ~12h Total
Not just theory. You finish this course with real work to show.
This is the same in-browser editor every lesson uses. Edit the code, hit Run.
Run code in the browser and see the result immediately. Every lesson works this way.
Stuck? Puff explains the error and nudges you forward, without giving the answer away.
Streaks, diamonds, and certificates. Your progress saves automatically, forever.
Every completed course issues a certificate with a public verification link.
Every certificate has a public verification link employers can check.
One certificate per course. Finish a program and earn its program certificate too.
LinkedIn-ready, with a PDF you can download and attach.
Seven courses of fundamentals, cashed into the library teams actually hire for.
You wrote a render function by hand. Now watch a framework write it for you.
You have copied React patterns that worked without knowing why. This is the model underneath them.
React Essentials is free to start, no credit card needed. Some later sections are part of Pro, and finishing every section, including the certificate, needs a Pro plan.
JavaScript DOM and Intermediate JavaScript, yes. React is written in their vocabulary: destructuring, map, spread, callbacks, and the state-and-render loop. With them React feels like a shortcut you already wanted. Without them it feels like memorising spells.
Yes. Function components and hooks throughout, which is how React has been written since 2019 and how new code is written today. No class components and no legacy patterns.
No. Devpuff bundles and runs your React code in the browser preview, so you edit App.jsx and watch the result render beside it.
Because React itself files those as escape hatches, to reach for after the main model is in place, and reaching for them first is the most common way React goes wrong. They get a course of their own, Advanced React, rather than a rushed section here.
Crew, a team board, in four stages: a roster built from data, a board you can change, a form that adds people, and a capstone where controls in one component drive the board in another.
Yes. You earn the React Essentials course certificate at 100 percent, and the Frontend Development program certificate once every course in the program is complete.
How this course connects to the bigger picture, and what to explore next.
Go past useState: refs, reducers, context, effects, data fetching, and your own custom hooks.
Git from zero: commit, branch, merge, undo, and tag real repositories in a live terminal.
Write real web pages by hand: document structure, text, links, lists, images, semantic HTML, and forms.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning Free