Curso avançado de React: #09 - Mensagens em português no formulário com zod e 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, a gente vai se aprofundar no tratamento de erros com Zod e React Hook Form, focando em como exibir mensagens de validação claras e amigáveis na interface do usuário. Até agora, já conseguimos bloquear o envio de dados inválidos no formulário. Agora, o objetivo é mostrar esses erros na tela de forma eficiente e profissional, melhorando a experiência do usuário e tornando o comportamento do formulário mais previsível e robusto. Vamos construir uma estrutura que exibe mensagens de erro específicas para cada campo, com mensagens personalizadas em português e uma organização que facilita a manutenção e reutilização do código. Te mostro passo a passo como integrar o sistema de erros do React Hook Form com o schema do Zod e como fazer a exibição condicional dessas mensagens usando JSX. Também vamos resolver um problema comum: mensagens em inglês que não fazem sentido para o público do projeto. Traduzimos tudo para português e aplicamos uma configuração global para que o Zod já venha traduzido por padrão em toda a aplicação. Se você quer aprender a criar formulários com validações completas, mensagens de erro bem definidas e uma UX de qualidade, essa aula é indispensável. Essa parte do código é fundamental em qualquer projeto sério, e dominar esses detalhes vai te diferenciar como desenvolvedor. Então dá o play, acompanha os ajustes comigo e bora deixar teu formulário com cara de aplicação profissional. Links mencionados no vídeo: 📖 Repositório do projeto - https://github.com/lvsouza/curso-base-de-react/tree/9cef791e42c7838f5ed4b630e6e3367322dfc73e 🗨️ 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:25 | Avisos importantes 0:50 | Revisando alterações 1:50 | Mostrando erros na tela 4:45 | Mensagens de erro em português 8:00 | Local correto para configurar as traduções de mensagens de erro do zod 9:43 | Finalização e agradecimentos CODARSE - [Membros apenas] Validação de campos do formulário #ReactJS #Vite #TypeScript #JavaScript #FrontEnd #Programação