Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

React Hook Form Course - Zod and Material UI Integration

via freeCodeCamp

Overview

Google, IBM & Meta Certificates – 40% Off
One Coursera Plus subscription covers most Professional Certificates on Coursera.
Unlock All Certificates
This course teaches how to build and manage validated React forms with React Hook Form, including form state, dynamic fields, fetched data, and create/edit workflows. It also integrates Zod, TypeScript, and Material UI controls.

Syllabus

⌨️ Intro
⌨️ Tutorial Showcase
⌨️ Project Setup
⌨️ Old Way of Handling Form in React
⌨️ Use Form
⌨️ register
⌨️ Simple Form Validation with RHF
⌨️ Form State, Error Messages and Error State
⌨️ Validation mode
⌨️ Simple Handle Submit Example
⌨️ Zod Typescript Introduction
⌨️ Create First React Hook Form Validation Schema with Zod
⌨️ Zod Refine Schema Validator
⌨️ Use React Hook Form With Zod
⌨️ Create Typescript Type From Zod Schema
⌨️ Connect Material UI, Zod And React Hook Form
⌨️ MUI Autocomplete and React Hook Form
⌨️ Use Form Context in RHF
⌨️ Handling Complex Generics With Typescript and RHF
⌨️ Default Values
⌨️ Dev Tools
⌨️ Use Watch and watch
⌨️ Get Latest Form Values And Fields
⌨️ Dev Tools
⌨️ Mock Backend Setup
⌨️ Use Queries for Data Fetching
⌨️ Controller for MUI Toggle Button Group with RHF
⌨️ Controller for MUI Radio Group with RHF
⌨️ Controller for MUI Check box with RHF
⌨️ Controller for MUI Date Time Picker with RHF
⌨️ Controller for MUI Switch with RHF
⌨️ Controller for MUI Text Field with RHF
⌨️ Use Field Array
⌨️ Dynamic Fields, Discriminated Unions and Unions in Typescript
⌨️ Zod Intersection and Zod Unions & Discriminated Unions
⌨️ Use Field Array Append
⌨️ Use Field Array Fields
⌨️ Use Field Array Replace
⌨️ Create Server Mutation Functions
⌨️ Populate Form With Fetched Data in React Hook Form
⌨️ Create and Edit Entities with React Hook Form
⌨️ Mapper for Creating and Editing Entities on Server

Taught by

freeCodeCamp.org

Reviews

Start your review of React Hook Form Course - Zod and Material UI Integration

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.