React Hook Form Tutorial (Zod + MUI) - Full Beginner to Advanced Course

This is the most complete zero-to-hero tutorial you can find for free on YouTube for React Hook Form (forms in React) + Typescript. I spent a large amount of time on this tutorial, so liking and subscribing means the world to me!

In this tutorial, you will learn how to handle the most complex CRUD form scenarios in React and completely integrate it with Zod and Material UI.

If you only want to learn Form in React and React Hook Form and not Zod or MUI, or if you want to change your validation library (for example, to Yup) or UI library (for example, to Ant Design), you can still follow along with the tutorial. The video is mostly about React Hook Form.

We are going to create a user CRUD form that covers the most possible form scenarios and reusable controllers for react hook form with material-ui. There are controllers for text fields, autocomplete, toggle button groups, radio buttons, checkboxes, date and time pickers, date range pickers, range sliders, and also dynamic form fields and field arrays. We create reusable components that connect the MUI component to the React Hook Form. You can later use these components in your other React projects. All of this is handled in the most type-safe way with the least amount of code.

You will also learn how to populate your forms by calling APIs and how to create, read, and update an entity with a real-world example using the best form validation strategy, best practices, architecture, and much, much more!

The tutorial is project-based, but you will learn concepts section by section, so you can navigate through the video to the section you want using the timeline below.

#react #react_hook_form #zod #rhf #mui

🔗 Links:

Tanstack query (React query) Full tutorial:    • React Query Tutorial V5 - Full Tansta...  

Project Github Repository: https://github.com/codegenixdev/react...

Fake Server Backend Repository: https://github.com/codegenixdev/backe...

⭐️ Contents ⭐

⌨️ 00:00:00 Intro
⌨️ 00:00:49 Tutorial Showcase
⌨️ 00:02:51 Project Setup
⌨️ 00:12:27 Old Way of Handling Form in React
⌨️ 00:15:15 Use Form
⌨️ 00:16:50 register
⌨️ 00:19:00 Simple Form Validation with RHF
⌨️ 00:20:00 Form State, Error Messages and Error State
⌨️ 00:21:50 Validation mode
⌨️ 00:23:10 Simple Handle Submit Example
⌨️ 00:26:50 Zod Typescript Introduction
⌨️ 00:28:00 Create First React Hook Form Validation Schema with Zod
⌨️ 00:31:20 Zod Refine Schema Validator
⌨️ 00:35:51 Use React Hook Form With Zod
⌨️ 00:37:00 Create Typescript Type From Zod Schema
⌨️ 00:38:39 Connect Material UI, Zod And React Hook Form
⌨️ 00:43:36 MUI Autocomplete and React Hook Form
⌨️ 00:48:00 Use Form Context in RHF
⌨️ 00:55:51 Handling Complex Generics With Typescript and RHF
⌨️ 01:09:00 Default Values
⌨️ 01:10:25 Dev Tools
⌨️ 01:11:30 Use Watch and watch
⌨️ 01:12:10 Get Latest Form Values And Fields
⌨️ 01:13:25 Dev Tools
⌨️ 01:14:25 Mock Backend Setup
⌨️ 01:17:20 Use Queries for Data Fetching
⌨️ 01:22:10 Controller for MUI Toggle Button Group with RHF
⌨️ 01:28:25 Controller for MUI Radio Group with RHF
⌨️ 01:33:30 Controller for MUI Check box with RHF
⌨️ 01:40:09 Controller for MUI Date Time Picker with RHF
⌨️ 01:47:09 Controller for MUI Switch with RHF
⌨️ 01:50:42 Controller for MUI Text Field with RHF
⌨️ 01:54:20 Use Field Array
⌨️ 01:55:20 Dynamic Fields, Discriminated Unions and Unions in Typescript
⌨️ 02:04:09 Zod Intersection and Zod Unions & Discriminated Unions
⌨️ 02:12:09 Use Field Array Append
⌨️ 02:15:09 Use Field Array Fields
⌨️ 02:17:50 Use Field Array Replace
⌨️ 02:24:00 Create Server Mutation Functions
⌨️ 02:41:00 Populate Form With Fetched Data in React Hook Form
⌨️ 02:43:00 Create and Edit Entities with React Hook Form
⌨️ 02:52:20 Mapper for Creating and Editing Entities on Server


🎨 My Editor Settings:

- JetBrains Mono
- Dracula

🔗 Resources:

https://react-hook-form.com/
https://mui.com/
https://zod.dev/