Pular para conteúdo

Exercícios de Fixação – Aula 06 📝

Exercício 01: Setup do Form

Instale o react-hook-form e crie um formulário simples com um único campo "Nome". Ao submeter, exiba o nome em um alerta.

Exercício 02: Validação Required

Adicione uma regra de validação que impeça o envio do formulário se o campo "E-mail" estiver vazio. Exiba uma mensagem de erro em vermelho.

Exercício 03: Validação de Tamanho

Crie um campo "Senha". O formulário só deve ser válido se a senha tiver entre 8 e 20 caracteres.

Quiz – Aula 06 🧠

  1. O que o register faz no React Hook Form?
  2. [ ] Cria uma conta no site.
  3. [ ] Conecta um input ao gerenciamento da biblioteca.
  4. [ ] Salva os dados no banco.

  5. [ ] Abre o terminal. Explicação: Register é a função que "registra" o input para que a lib possa observar suas mudanças.

  6. Qual a principal diferença de performance do React Hook Form?

  7. [ ] Ele usa menos internet.
  8. [ ] Ele evita re-renderizações desnecessárias em cada tecla digitada (uncontrolled).
  9. [ ] Ele apaga o cache.
  10. [ ] Ele só funciona no Chrome. Explicação: Ao contrário do useState, ele não faz o componente renderizar em cada mudança de letra.

Projeto 06 – Formulário de Suporte ao Cliente 🎧

Objetivo: Criar um formulário completo com validações. - Campos: Nome, E-mail, Assunto (Select) e Mensagem (Textarea). - Use react-hook-form. - Exiba mensagens de erro claras para cada campo inválido. - Bloqueie o botão de envio enquanto o formulário for inválido.