Curso avançado de React: #08 - Validação de campos com ZOD e ZodResolver no react hook form

Sobre esta lección

Precisa de ajuda? Solicite uma ajuda particular: https://forms.gle/Pu1aT2LsbU1nuTTDA Nessa aula do curso avançado de React, vamos implementar uma das partes mais críticas de qualquer formulário: a validação dos dados. A ideia é evitar que informações inválidas cheguem ao backend, garantindo uma aplicação mais segura, confiável e com uma melhor experiência para o usuário final. Vamos analisar um problema real dentro do nosso formulário atual — onde é possível salvar um registro sem título — e resolver isso usando o poder do React Hook Form aliado a bibliotecas de validação externas. Ao longo da aula, eu vou te mostrar duas bibliotecas muito populares para esse tipo de tarefa: o Yup e o Zod. Explico as vantagens e desvantagens de cada uma e mostro por que, nesse projeto, optamos por utilizar o Zod. Com ele, vamos construir um schema de validação bem completo, integrando diretamente ao nosso formulário com a ajuda do @hookform/resolvers, o que nos permite escrever regras claras e tipadas para os campos do formulário, tudo de forma muito simples e elegante. Além disso, te mostro como dar o primeiro passo para melhorar o feedback visual do formulário, como focar automaticamente nos campos inválidos e impedir que dados errados sejam enviados. Essa aula é essencial para quem quer aprender a criar formulários profissionais com React. Se você quer evoluir na construção de aplicações robustas e alinhadas com boas práticas, essa aula é pra ti. Dá o play e vem aprender como evitar bugs antes mesmo deles acontecerem. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/66b3ec17b4a0a71bac2f0e645ffa0de09453e0ef 🗨️ Discord - https://discord.gg/ZC7JrPZn7P 🎬 CodarSe - https://codarse.com Outros cursos no canal: 🎩 Figma para DEVs - https://youtu.be/4rSPV1NbM10 ☪️ Curso de estilização no React - https://youtu.be/oUbPkR799fc 💎 Curso base de React - https://youtu.be/ggtWTKbhN_U 👑 React, Material UI 5 e Typescript - https://youtu.be/wLH1Vv86I44 🏆 Curso de API Rest, Node e Typescript - https://youtu.be/SVepTuBK4V0 Livros recomendados: 📘 Código limpo - https://amzn.to/43Xiick 📘 Arquitetura limpa - https://amzn.to/3ZMCStr 📘 Migrando sistemas monolíticos - https://amzn.to/45ByPDZ 📘 The Micro SaaS Handbook - https://amzn.to/4jCan93 Conteúdo: 0:00 | Apresentação da aula 0:37 | Avisos importantes 0:50 | Entendendo a importância da validação de dados 2:00 | Adicionando validação com o yup ou zod 6:00 | Instalando a validação com ZOD no hook form 9:15 | Criando o schema para a validação dos campos 11:50 | Desafio para a próxima aula CODARSE - [Membros apenas] Validação de campos do formulário #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação