Projeto Formulário dinâmico com React Hook Form e Zod

Fazer um formulário na vida real nem sempre é uma tarefa trivial. Nuances como validação, mensagens de erro e máscaras de preenchimento tornam o processo um pouco menos intuitivo. Neste mini projeto, você vai aprender a criar um formulário dinâmico usando React Hook Form e Zod para facilitar o desenvolvimento.

Assistir agora

1. Apresentando o projeto

Todos os nossos projetos são gratuitos, porém os tutoriais são exclusivos para membros do Codante PRO. Algumas aulas estão abertas para você experimentar.

Se gostar, considere assinar para ter acesso a todos os tutoriais e apoiar o projeto!

Seu Instrutor

Roberto Cestari

Codante.io

Fundador e Professor no Codante.io.

Foi Tech Lead de front-end e professor especialista em React.

Formado e Mestre pela USP e formado pela FGV - EAESP.

Fundador e desenvolvedor da plataforma Trilhante, uma das maiores empresas de educação jurídica do país.

Junte-se a outras 35 pessoas que estão fazendo esse mini projeto.

Projeto Formulário dinâmico com React Hook Form e Zod

Assistir agora

Seu Instrutor

Roberto Cestari

Aulas

Apresentando o projeto

Por que React Hook Form e Zod?

Requisitos do Projeto

Setup do Projeto

Botão de revelar senha

Máscaras de Input CEP, CPF e Telefone

Buscando Endereço e Cidade com o CEP

React Puro: dificuldades em implementar formulários

React Hook Form Instalação

Usando o React Hook Form no form

Loading e submetendo dados com RHF

Validação e exibição de erros individuais

Componente de erro do React Hook Form

Controlando inputs com o React Hook Form setValue

Validação customizada: senha e confirmação de senha

Corrigindo erros

Implementando validação da API (backend)

Zod no React Hook Form usando resolvers

Criando o Schema no Zod

Validações do Zod no formulário

React Hot Toast para um melhor feedback

Limpando o formulário após submissão

Encerramento

Junte-se a outras 35 pessoas que estão fazendo esse mini projeto.