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.