React Hook Form Course for Beginners (inc. Zod + Material UI)
Learn really to usage React Hook Form, which makes it elemental to adhd forms to respond pinch authentication. In this course, you will study really to grip nan astir analyzable CRUD shape scenarios successful React and wholly merge it pinch Zod and Material UI. ✏️ Course developed by @codegenix 🔗 Tanstack query (React query) Full tutorial: https://www.youtube.com/watch?v=3e-higRXoaM 🔗 Project Github Repository: https://github.com/codegenixdev/react-hook-form-mui-zod-boilerplate 🔗 Fake Server Backend Repository: https://github.com/codegenixdev/backend-react-hook-form-mui-zod ⭐️ Contents ⭐ ⌨️ 0:00:00 Intro ⌨️ 0:01:06 Tutorial Showcase ⌨️ 0:03:08 Project Setup ⌨️ 0:12:44 Old Way of Handling Form successful React ⌨️ 0:15:32 Use Form ⌨️ 0:17:07 register ⌨️ 0:19:17 Simple Form Validation pinch RHF ⌨️ 0:20:17 Form State, Error Messages and Error State ⌨️ 0:22:07 Validation mode ⌨️ 0:23:27 Simple Handle Submit Example ⌨️ 0:27:07 Zod Typescript Introduction ⌨️ 0:28:17 Create First React Hook Form Validation Schema pinch Zod ⌨️ 0:31:37 Zod Refine Schema Validator ⌨️ 0:36:08 Use React Hook Form With Zod ⌨️ 0:36:43 Create Typescript Type From Zod Schema ⌨️ 0:38:22 Connect Material UI, Zod And React Hook Form ⌨️ 0:43:19 MUI Autocomplete and React Hook Form ⌨️ 0:47:43 Use Form Context successful RHF ⌨️ 0:56:08 Handling Complex Generics With Typescript and RHF ⌨️ 1:09:17 Default Values ⌨️ 1:10:42 Dev Tools ⌨️ 1:11:47 Use Watch and watch ⌨️ 1:12:27 Get Latest Form Values And Fields ⌨️ 1:13:42 Dev Tools ⌨️ 1:14:42 Mock Backend Setup ⌨️ 1:17:37 Use Queries for Data Fetching ⌨️ 1:22:27 Controller for MUI Toggle Button Group pinch RHF ⌨️ 1:28:42 Controller for MUI Radio Group pinch RHF ⌨️ 1:33:47 Controller for MUI Check container pinch RHF ⌨️ 1:40:26 Controller for MUI Date Time Picker pinch RHF ⌨️ 1:47:26 Controller for MUI Switch pinch RHF ⌨️ 1:50:59 Controller for MUI Text Field pinch RHF ⌨️ 1:54:37 Use Field Array ⌨️ 1:55:37 Dynamic Fields, Discriminated Unions and Unions successful Typescript ⌨️ 2:04:26 Zod Intersection and Zod Unions & Discriminated Unions ⌨️ 2:12:26 Use Field Array Append ⌨️ 2:15:26 Use Field Array Fields ⌨️ 2:18:07 Use Field Array Replace ⌨️ 2:24:17 Create Server Mutation Functions ⌨️ 2:41:17 Populate Form With Fetched Data successful React Hook Form ⌨️ 2:43:17 Create and Edit Entities pinch React Hook Form ⌨️ 2:52:37 Mapper for Creating and Editing Entities connected Server 🎉 Thanks to our Champion and Sponsor supporters: 👾 davthecoder 👾 jedi-or-sith 👾 南宮千影 👾 Agustín Kussrow 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Justin Hual 👾 Otis Morgan 👾 Oscar Rahnama -- Learn to codification for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles connected programming: https://freecodecamp.org/news