Build React forms that validate: register fields, schema rules, real errors, and clean submits.
Every React developer learns controlled inputs first, and they are the right thing to learn first: a value, an onChange, and state you can see. Then a real form arrives with six fields, and the honest version of it is six state variables, six handlers, a re-render on every keystroke, a pile of if statements in the submit handler, and error messages living wherever you happened to put them. This course counts that, out loud, and then replaces it.
What replaces it is two ideas that fit together. React Hook Form stops controlling your inputs, which is why it is fast and why it needs one line per field instead of three. Zod lets you write down what a member is allowed to be, once, as a value rather than a type, and hand that same description to the form as its rules and to TypeScript as its type. The moment those two meet, one line deletes a type definition you wrote by hand in an earlier course, and the form stops having opinions of its own.
You will carry the Crew board through it, the same board you have built across six courses. By the end it has an add-member form whose rules live in a schema, whose messages tell a person what to do rather than that something is invalid, whose selects and checkboxes and repeating shift rows all behave, and whose Save button submits through a mutation, places the server's complaint on the field it belongs to, refreshes the roster, and takes you back to it. That is the last piece of the React Developer program, and finishing it finishes the program.
54 Lessons • 56 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.
You have written the six-variable version and know it does not scale. This course counts the cost first, then removes it a piece at a time.
Rules living in a submit handler cannot be reused, tested, or shown next to the field they are about. Sections 3 to 6 move them out.
You know the line works and not what each half of it does. Section 5 is the schema, section 6 is the connection, and neither is magic.
React Forms 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.
Not for most of it. Sections 1 to 8 need React Essentials and React TypeScript, and nothing else. Sections 9 and 10 wire the form into a router and a query cache, so they assume React Router and React Query. A learner taking the program in order arrives with all of it.
No. They are the right first thing to learn and they are still the right tool for a search box, a toggle, or any input whose value drives something else on screen while you type. What this course counts is what they cost at six fields, which is a different question from whether they work.
Because a TypeScript type is erased before your code runs, so it cannot check what a person typed or what a server sent. A Zod schema is an ordinary value that exists at runtime, so it can. React TypeScript ended on exactly this question and named Zod as the answer; section 5 is that answer.
No. Every course on Devpuff runs in your browser with nothing listening on a port, so saving goes to a stub that returns real Response objects immediately, including a real 409 when you try to add a name that is already taken. Your submit handler still uses await and res.json(), so the code you write is the code you would write against a real server.
The Crew board's add-member form, carried through from the earlier React courses: six fields, rules that live in a schema, messages that tell you what to do, a role select and an availability checkbox and repeating shift rows, and a Save that writes through a mutation, refreshes the roster, and navigates back to it.
Two, if this is your last course in the program. Finishing all 134 items issues a React Forms certificate with a public verification page, and because this is the final course of the React Developer program, holding a certificate for every course in it issues the program certificate as well.
How this course connects to the bigger picture, and what to explore next.
Load, cache, and update server data in React: queries, mutations, invalidation, and optimistic updates.
Start programming for real: variables, strings, decisions, arrays, loops, functions, and objects.
Make pages react: select elements, handle events, read input, and build the page from your data.
Free to start, no credit card required. Write real code from the first lesson and keep your progress forever.
Start Learning Free