react-modernization

Visão Geral

O que é react-modernization?

react-modernization é uma skill especializada criada para ajudar desenvolvedores a atualizar e refatorar aplicações React para as versões mais recentes. Ela foca na migração de componentes de classe para componentes funcionais com hooks, adoção de recursos concorrentes introduzidos no React 18+, e aplicação de codemods para transformação automática do código. Essa skill é ideal para equipes e desenvolvedores que desejam modernizar sua base de código frontend, melhorar a manutenção e aproveitar os avanços de performance do React.

Para quem esta skill é indicada?

Essa skill é recomendada para desenvolvedores frontend, líderes técnicos e equipes de engenharia responsáveis pela manutenção ou atualização de projetos React legados. Se sua base de código utiliza padrões antigos do React, componentes de classe, ou não suporta recursos novos como Suspense e renderização concorrente, react-modernization oferece um fluxo estruturado para uma transição suave.

Problemas resolvidos pelo react-modernization

• Atualização de aplicações React de versões antigas (16, 17) para as mais recentes (18+)
• Migração de componentes de classe para funcionais usando hooks
• Adoção de novos recursos do React como Suspense, transições e renderização concorrente
• Aplicação de codemods para refatoração automatizada
• Modernização do gerenciamento de estado e atualização para TypeScript
• Tratamento de mudanças incompatíveis e melhoria geral da performance do app

Como Usar

Passos para Instalação

1. Instale a skill com o comando abaixo:

   npx skills add https://github.com/wshobson/agents --skill react-modernization
   

2. Comece pelo arquivo SKILL.md para uma visão geral e orientações do fluxo de trabalho.

3. Consulte arquivos de apoio como README.md, AGENTS.md, metadata.json e pastas como rules/, resources/, references/ ou scripts/ para contexto adicional e scripts auxiliares.

Adaptando o Fluxo de Trabalho

• Não copie o fluxo literalmente; adapte os passos recomendados e codemods ao seu repositório, ferramentas e necessidades do projeto.
• Use a skill ao planejar grandes atualizações do React, refatorar componentes de classe ou introduzir novos recursos do React no seu código.

Principais Tópicos Abordados

• Quando usar react-modernization no seu projeto
• Caminhos recomendados para atualização de versão (React 16 → 17 → 18)
• Como lidar com mudanças incompatíveis em cada versão do React
• Migração do gerenciamento de estado de classes para hooks
• Uso de codemods automatizados para acelerar a refatoração

Arquivos Sugeridos para Visualizar

• Comece pelo SKILL.md para uma visão completa
• Explore arquivos adicionais para detalhes técnicos e scripts

Perguntas Frequentes

Quando o react-modernization é indicado?

Use react-modernization quando precisar atualizar uma base React para a versão mais recente, migrar de componentes de classe para hooks, ou adotar novos recursos do React como renderização concorrente e Suspense. É especialmente útil para projetos legados ou equipes que querem modernizar sua stack frontend.

Quais versões do React essa skill cobre?

react-modernization oferece orientações para atualizar do React 16 e 17 para o React 18, incluindo tratamento de mudanças incompatíveis e adoção de novas APIs.

Essa skill ajuda na migração para TypeScript?

Sim, parte do processo de modernização inclui a atualização para TypeScript quando aplicável, melhorando a segurança de tipos e a manutenção.

Onde encontro mais detalhes ou scripts?

Abra a aba Files para inspecionar toda a árvore de arquivos, incluindo referências aninhadas e scripts auxiliares que suportam o fluxo de modernização.