Pular para conteúdo

Aula 06 📝

Formulários e Validação

O que vamos aprender hoje? 📚

  1. Controlled vs Uncontrolled Components
  2. React Hook Form
  3. Validação de dados em tempo real
  4. Melhorando a UX de formulários

1. Controlled vs Uncontrolled ⚖️

Controlled (useState) 🎮

  • React controla cada tecla.
  • Bom para formulários pequenos.
  • Lento em formulários gigantes.

Uncontrolled (Ref/Library) 🚀

  • O navegador guarda o valor.
  • O React só pega no final.
  • Muito mais performático!

2. React Hook Form 🛠️

Por que usar? 🤔

  • Menos código (Boilerplate).
  • Re-renderizações mínimas.
  • Fácil integração com validação.

O básico do Código 💻

const { register, handleSubmit } = useForm();

<input {...register("email")} />

3. Validação 🛡️

Regras Simples ✅

  • required (Obrigatório)
  • minLength / maxLength
  • pattern (Regex para e-mail/telefone)

4. Experiência do Usuário (UX) ✨

Dê Feedback! 📣

  • Nunca deixe o usuário na dúvida.
  • Mostre mensagens de erro claras.
  • Mude o estilo do input (borda vermelha).

🚀 Desafio da Aula

  • Criar um formulário de login.
  • Validar se o e-mail é válido.
  • Validar se a senha tem 6 caracteres.
  • Mostrar erros abaixo dos campos.

Fim da Aula 06 🎓

Próxima Aula: React Router e Navegação!