Au 12 - Front-end - React - Criando estrutura e componentes de um formulário - Mestres BEGIN

Nesta aula, iniciamos o desenvolvimento de um formulário completo para adicionar novos produtos, seguindo o design proposto e criando componentes reutilizáveis.

Estrutura do Formulário

O formulário será composto por:

• Um título "Adicionar novo produto"
• Botão de fechar (a ser implementado)
• Vários campos de entrada:
  • Select para categoria
  • Select para marca
  • Select para loja
  • Input para nome do produto
  • Input para preço
  • Textarea para descrição
  • Input para quantidade em estoque

Organização do Código

Criamos uma estrutura modular para os componentes:

1components/
2  AddProductForm/
3    index.tsx
4    styles.module.css
5  InputSelect/
6    index.tsx
7  InputText/
8    index.tsx
9  InputTextArea/
10    index.tsx

Os componentes de input foram criados na pasta global de components para permitir reutilização em outros formulários.

Componente InputSelect

Desenvolvemos um select reutilizável com as seguintes propriedades:

1interface InputSelectProps {
2 name: string;
3 label: string;
4 options: string[];
5 } 
6 export function InputSelect({ name, label, options }: InputSelectProps) {
7 return (
8 <div className={styles.container}>
9 <label>{label}</label>
10 <select name={name}> {options.map((option) => ( <option key={option} value={option}> {option} </option> ))} </select> </div> ); }

Próximos Passos

Na próxima aula, vamos:

• Finalizar os componentes InputText e InputTextArea
• Implementar o botão de fechar com ícone SVG
• Adicionar estilos para todos os componentes
• Garantir a responsividade do formulário
• Preparar a integração com a lógica do formulário

Considerações Finais

Alguns pontos importantes sobre esta implementação:

• Reutilização: Os componentes foram pensados para serem usados em diferentes partes da aplicação
• Organização: A estrutura de pastas reflete a hierarquia de componentes
• Tipagem: Usamos TypeScript para garantir a qualidade do código
• Separação de conceitos: A estilização será aplicada separadamente na próxima aula

Esta abordagem modular traz benefícios como:

• Facilidade de manutenção
• Consistência visual
• Redução de código duplicado
• Melhor organização do projeto

Para projetos mais complexos, poderíamos ainda:

• Adicionar validação de formulário
• Implementar máscaras para campos específicos
• Criar um sistema de temas para os inputs
• Adicionar suporte a internacionalização