๐ React Hook Form Course for Beginners (inc. Zod + Material UI)
๐ก Newskategorie: Video | Youtube
๐ Quelle: youtube.com
Author: freeCodeCamp.org - Bewertung: 12x - Views:1
Learn how to use React Hook Form, which makes it simple to add forms to react with authentication. In this course, you will learn how to handle the most complex CRUD form scenarios in React and completely integrate it with 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 in React
โจ๏ธ 0:15:32 Use Form
โจ๏ธ 0:17:07 register
โจ๏ธ 0:19:17 Simple Form Validation with 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 with 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 in 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 with RHF
โจ๏ธ 1:28:42 Controller for MUI Radio Group with RHF
โจ๏ธ 1:33:47 Controller for MUI Check box with RHF
โจ๏ธ 1:40:26 Controller for MUI Date Time Picker with RHF
โจ๏ธ 1:47:26 Controller for MUI Switch with RHF
โจ๏ธ 1:50:59 Controller for MUI Text Field with RHF
โจ๏ธ 1:54:37 Use Field Array
โจ๏ธ 1:55:37 Dynamic Fields, Discriminated Unions and Unions in 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 in React Hook Form
โจ๏ธ 2:43:17 Create and Edit Entities with React Hook Form
โจ๏ธ 2:52:37 Mapper for Creating and Editing Entities on 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 code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news