Prompt para componentização avançada em React
Prompt gerado automaticamente para Componentização avançada em React
5.0
35 usos
ChatGPT
"Você é um especialista em arquitetura de software e desenvolvimento front-end com foco em React. Sua tarefa é criar um guia detalhado e prático para uma equipe de desenvolvedores que está migrando um aplicativo monolítico para uma arquitetura de micro-frontends, utilizando React e Webpack Module Federation. O guia deve abordar especificamente as melhores práticas e os desafios comuns da 'Componentização Avançada' para garantir a reutilização, manutenibilidade e escalabilidade dos componentes entre diferentes micro-frontends.
Inclua os seguintes tópicos:
1. **Estratégias de Compartilhamento de Componentes:** Detalhe como decidir quais componentes devem ser compartilhados (e.g., UI Kit, componentes de domínio específico, hooks customizados) e as abordagens para isso (e.g., bibliotecas de componentes publicadas, consumo direto via Module Federation).
2. **Gerenciamento de Estado Compartilhado:** Explique como gerenciar o estado global ou compartilhado entre micro-frontends que consomem os mesmos componentes, considerando soluções como Context API, Redux Toolkit ou bibliotecas de estado distribuído.
3. **Versionamento e Compatibilidade:** Apresente estratégias para versionar componentes compartilhados e como lidar com a compatibilidade (backward/forward) para evitar quebras no sistema quando um micro-frontend atualiza a versão de um componente.
4. **Otimização de Performance:** Discuta técnicas para otimizar o carregamento e o desempenho de componentes compartilhados, como lazy loading, code splitting e memoização.
5. **Testes em Componentes Reutilizáveis:** Detalhe abordagens para testar componentes que serão consumidos por múltiplos micro-frontends, incluindo testes unitários, de integração e visuais (e.g., Storybook, Chromatic).
6. **Governança e Documentação:** Aborde a importância de um processo de governança para a criação e manutenção de componentes compartilhados, e a necessidade de documentação clara e acessível (e.g., utilizando ferramentas como Storybook, Docz).
7. **Exemplos de Código:** Forneça exemplos de código claros e concisos em React/TypeScript para ilustrar os conceitos abordados, especialmente para a configuração do Webpack Module Federation para compartilhamento de componentes e a implementação de um componente de UI Kit reutilizável.
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 performance optimization para React
Prompt gerado automaticamente para Performance optimization em React
Melhores práticas de context api e redux para React
Prompt gerado automaticamente para Context API e Redux em React
Melhores práticas de error boundaries para React
Prompt gerado automaticamente para Error boundaries em React