Typescript & Zod tutorial with React-Hook-Form

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to use TypeScript & Zod validation together in this tutorial. We will also apply TypeScript & Zod with React-Hook-Form to provide both user input validation and feedback. TS + Zod together provides both type safety and runtime type checking!

🚀 Become a full-stack web dev with Zero To Mastery Courses:
– The Complete Web Developer: https://bit.ly/WebDevMaster
– Master the Coding Interview: https://bit.ly/FAANGInterview
– Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions – Please post them to my Discord ➜ https://discord.gg/neKghyefqh

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

🔗 Source Code: https://github.com/gitdagray/zod-typescript-react-hook-form

🔗 Typescript Playlist: http://bit.ly/3GcNJ78

Typescript & Zod tutorial with React-Hook-Form

(00:00) Intro
(00:05) Welcome
(00:28) What is Zod? And does Zod do?
(01:35) Starter Code & Dependencies
(02:30) Basic Zod Examples
(04:48) User API Data
(05:07) Basic User Schema with Zod
(10:05) Inferring Types, Fetching & Parsing Data
(12:47) Merging & Extending Zod Schemas
(18:34) React-Hook-Form dependencies
(19:21) React-Hook-Form docs
(20:54) zodResolver & React-Hook-Form

📚 Tutorial References:
🔗 Zod Official Website: https://zod.dev/
🔗 React-Hook-Form Official Website: https://www.react-hook-form.com/
🔗 NPM @hookform/resolvers: https://www.npmjs.com/package/@hookform/resolvers
🔗 {JSON} Placeholder: https://jsonplaceholder.typicode.com/users

⚙ Web Dev Tools:
🔗 Vite: https://vitejs.dev/
🔗 Tailwind CSS setup for Vite: https://tailwindcss.com/docs/guides/vite
🔗 Chrome Browser: https://www.google.com/chrome/
🔗 Visual Studio Code (VS Code): https://code.visualstudio.com/

Was this Zod & TypeScript tutorial with React-Hook-Form helpful? If so, please share. Let me know your thoughts in the comments.

#typescript #zod #tutorial