Como debuggar formulários e validação em React

Prompt gerado automaticamente para Formulários e validação em React

5.0
34 usos
ChatGPT
Usar no ChatGPT
"Você é um especialista em React, com vasta experiência em desenvolvimento de interfaces complexas. Crie um guia passo a passo, detalhado e didático, para um desenvolvedor iniciante em React que precisa implementar um formulário de cadastro de usuário completo. O guia deve abordar os seguintes pontos, com exemplos de código claros e concisos, utilizando hooks (useState, useEffect, useRef) e boas práticas de acessibilidade:

1.  **Estrutura básica do formulário:** Como organizar os campos (nome, email, senha, confirmação de senha) com `label` e `input`.
2.  **Captura de dados:** Como gerenciar o estado de cada campo do formulário conforme o usuário digita.
3.  **Validação em tempo real:**
    *   Para o campo "email": verificar formato de email válido (ex: `[email protected]`).
    *   Para o campo "senha": exigir mínimo de 8 caracteres, pelo menos uma letra maiúscula, uma minúscula e um número.
    *   Para o campo "confirmação de senha": garantir que seja idêntico ao campo "senha".
    *   Mostrar mensagens de erro claras e amigáveis ao usuário abaixo de cada campo inválido.
4.  **Validação no envio (onSubmit):** Como prevenir o envio do formulário se houver erros de validação e como exibir um resumo dos erros (se houver) no topo do formulário.
5.  **Desabilitar botão de envio:** O botão de "Enviar" deve permanecer desabilitado enquanto o formulário não for válido.
6.  **Submissão do formulário:** Simular uma requisição assíncrona (com `async/await` e `setTimeout` para simular latência) e exibir um feedback de sucesso ou falha após o envio.
7.  **Reset do formulário:** Após o sucesso, limpar todos os campos do formulário.

O guia deve ser prático, focado em soluções idiomáticas do React e evitar bibliotecas de validação externas, incentivando o entendimento dos princípios básicos. A linguagem deve ser profissional, mas acessível, como se estivesse ensinando um colega de equipe."

Como Usar este Prompt

1

Clique no botão "Copiar Prompt" para copiar o conteúdo completo.

2

Abra sua ferramenta de IA de preferência (ChatGPT e etc.).

3

Cole o prompt e substitua as variáveis (se houver) com suas informações.

Compartilhe

Gostou deste prompt? Ajude outras pessoas a encontrá-lo!

Outros prompts de React

Continue explorando prompts nesta categoria.

Melhores práticas de server-side rendering para React

Prompt gerado automaticamente para Server-side rendering em React

Melhores práticas de error boundaries para React

Prompt gerado automaticamente para Error boundaries em React

Melhores práticas de performance optimization para React

Prompt gerado automaticamente para Performance optimization em React