Prompt para componentização avançada em React

Prompt gerado automaticamente para Componentização avançada em React

5.0
35 usos
ChatGPT
Usar no 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.

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 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