Prompt completo
"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."
Tags relacionadas
React
Formulários e validação
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de React
ChatGPT
Melhores práticas de server-side rendering para React
Prompt gerado automaticamente para Server-side rendering em React
4 usos
ChatGPT
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React
4 usos
ChatGPT
Melhores práticas de performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
4 usos