📝 React Hook Form - Projeto de Treinamento

Este é um projeto de treinamento para aprender e praticar o uso do React Hook Form com validação usando Yup e TypeScript.

🎯 Objetivo

Demonstrar na prática como implementar formulários eficientes e performáticos em React utilizando:

• React Hook Form para gerenciamento de estado
• Yup para validação de dados
• TypeScript para tipagem segura
• Controller para integração com componentes customizados

🚀 Tecnologias Utilizadas

• React 18 - Biblioteca para interface de usuário
• React Hook Form - Gerenciamento de formulários
• Yup - Validação de esquemas
• TypeScript - Tipagem estática
• Vite - Build tool e dev server
• @hookform/resolvers - Integração entre React Hook Form e validadores

📦 Instalação

1. Clone o repositório:

git clone <url-do-repositorio>
cd fullstack-react-forms

2. Instale as dependências:

npm install

3. Execute o projeto:

npm run dev

4. Acesse no navegador: http://localhost:5173

🏗️ Estrutura do Projeto

src/
├── App.tsx          # Componente principal com formulário
├── App.css          # Estilos do formulário
├── main.tsx         # Ponto de entrada da aplicação
└── vite-env.d.ts    # Definições de tipos do Vite

📋 Funcionalidades Implementadas

Formulário de Evento

O formulário inclui os seguintes campos:

• Nome do Evento (texto obrigatório)
• Data (data obrigatória)
• Assunto (seleção obrigatória entre: React, Node.js, Javascript, TypeScript)
• Descrição (texto obrigatório com mínimo de 10 caracteres)

Validações

• ✅ Campos obrigatórios
• ✅ Validação de tamanho mínimo para descrição
• ✅ Mensagens de erro em português
• ✅ Validação em tempo real

🔧 Conceitos Demonstrados

1. Configuração do React Hook Form

const { control, handleSubmit, formState: { errors } } = useForm<FormData>({ 
  defaultValues: {
    name: "",
    date: "",
    subject: "",
    description: "",
  },
  resolver: yupResolver(schema)
})

2. Schema de Validação com Yup

const schema = yup.object({
  name: yup.string().required("Nome é obrigatorio"),
  date: yup.string().required("Data é obrigatoria"),
  subject: yup.string().required("Selecione um assunto"),
  description: yup.string()
    .required("Descrição é obrigatoria")
    .min(10, "A descrição precisa ter pelo menos 10 digitos")
})

3. Uso do Controller

<Controller 
  control={control}
  name="name"
  render={({ field }) => (
    <input type="text" placeholder="Nome do evento" {...field} />
  )}
/>

4. Exibição de Erros

{errors.name?.message && (
  <span className="error">{errors.name.message}</span>
)}

🎨 Estilização

O projeto utiliza CSS customizado para:

• Layout responsivo do formulário
• Estilização de campos de entrada
• Mensagens de erro destacadas
• Botão de submit estilizado

📚 Aprendizados Principais

Vantagens do React Hook Form:

1. Performance: Menos re-renderizações desnecessárias
2. Simplicidade: API intuitiva e fácil de usar
3. Flexibilidade: Integração fácil com bibliotecas de validação
4. TypeScript: Suporte nativo para tipagem

Boas Práticas Demonstradas:

• Uso de TypeScript para tipagem segura
• Separação de responsabilidades (schema de validação)
• Mensagens de erro em português
• Estrutura de código limpa e organizada

🚀 Próximos Passos

Para expandir este projeto, você pode:

• Adicionar mais tipos de validação (email, CPF, etc.)
• Implementar upload de arquivos
• Adicionar máscaras nos campos (react-input-mask)
• Integrar com API para salvar dados
• Adicionar testes unitários
• Implementar modo dark/light

📖 Recursos Úteis

• Documentação React Hook Form
• Documentação Yup
• React Hook Form + TypeScript
• Validação com Yup

👨‍💻 Autor

Projeto criado para treinamento e aprendizado de React Hook Form.

---

Happy Coding! 🎉