Como melhorar componentização avançada em React
Prompt gerado automaticamente para Componentização avançada em React
5.0
38 usos
ChatGPT
"Você é um especialista em desenvolvimento front-end com foco em React e arquitetura de software escalável. Sua tarefa é criar um guia detalhado para um desenvolvedor sênior que precisa reestruturar um monorepo React monolítico, migrando-o para uma arquitetura de micro-frontends/componentes agnósticos. O guia deve abordar:
1. **Estratégias de Decoupling:** Como identificar e isolar domínios de negócio para transformá-los em componentes reutilizáveis e independentes (npm packages, etc.). Inclua exemplos de como lidar com a separação de lógica de UI, estado e dados.
2. **Comunicação entre Componentes/Micro-frontends:** Detalhe padrões e tecnologias (Event Bus, Context API com "boundary providers", Web Components com Custom Events, Module Federation com Webpack 5) para comunicação eficiente e desacoplada, evitando dependências cíclicas.
3. **Gerenciamento de Estado Compartilhado:** Abordagens para gerenciar estado global em um ambiente distribuído, considerando soluções como Redux Toolkit com "slices" desacoplados, Zustand, ou a orquestração de Contexts independentes.
4. **Build e Deployment:** Estratégias para otimizar o processo de build e deployment de múltiplos pacotes/componentes, incluindo versionamento semântico, CI/CD e caching.
5. **Testabilidade e Manutenibilidade:** Como garantir que os componentes individuais sejam facilmente testáveis (unitários, integração, E2E) e mantenham alta manutenibilidade ao longo do tempo.
6. **Desafios e Armadilhas Comuns:** Alerte sobre problemas típicos (duplicação de código, gerenciamento de dependências, performance de carregamento, versionamento de APIs internas) e forneça soluções preventivas.
O guia deve ser prático, com exemplos de código (pseudo-código ou exemplos conceituais) quando apropriado, e focado em decisões arquiteturais que promovam escalabilidade, reusabilidade e independência entre as partes do sistema. Utilize uma linguagem clara e concisa."
Tags relacionadas
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.
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