react19-source-patterns
Ajuda seu agente a entender e aplicar as mudanças de código fonte do React 19. Isso inclui atualizações de APIs e como lidar com referências e contextos.
O que ela faz
Este guia ajuda a atualizar seu código React para a versão 19. Ele mostra como mudar partes específicas do código que pararam de funcionar ou mudaram de lugar na nova versão.
Quando usar
- ✓Ao atualizar seu projeto React para a versão 19.
- ✓Quando uma parte do seu código React para de funcionar após a atualização.
- ✓Para entender as mudanças necessárias em arquivos específicos.
Exemplo do que pedir para a IA
“Como eu atualizo o ReactDOM.render para React 19?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA compara seu código antigo com os padrões de migração do React 19. Ela sugere as mudanças exatas necessárias para cada parte do seu código, como a substituição de `ReactDOM.render` por `createRoot().render()`.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add github/awesome-copilot --skill react19-source-patternsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react19-source-patterns/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Padrões de Migração de Código Fonte do React 19
Referência para cada migração de arquivo fonte necessária para o React 19.
Tabela de Referência Rápida
| Padrão | Ação | Referência |
|---|---|---|
ReactDOM.render(...) |
→ createRoot().render() |
Ver references/api-migrations.md |
ReactDOM.hydrate(...) |
→ hydrateRoot(...) |
Ver references/api-migrations.md |
unmountComponentAtNode |
→ root.unmount() |
Correção Inline |
ReactDOM.findDOMNode |
→ ref direta | Correção Inline |
Wrapper forwardRef(...) |
→ ref como prop direta | Ver references/api-migrations.md |
Component.defaultProps = {} |
→ params padrão ES6 | Ver references/api-migrations.md |
useRef() sem arg |
→ useRef(null) |
Correção Inline adicione null |
| Contexto Legado | → createContext |
→ api-migrations.md#legacy-context |
Refs de String this.refs.x |
→ createRef() |
→ api-migrations.md#string-refs |
import React from 'react' (não utilizado) |
Remover | Apenas se não houver uso de React. no arquivo |
Regra de PropTypes
Não remova as atribuições de .propTypes. O pacote prop-types ainda funciona como um validador independente. O React 19 apenas remove a verificação de tempo de execução integrada do pacote React - o pacote em si permanece válido.
Adicione este comentário acima de qualquer bloco .propTypes:
// NOTE: React 19 no longer runs propTypes validation at runtime.
// PropTypes kept for documentation and IDE tooling only.
Leia a Referência
Para o código completo antes/depois de cada migração, leia references/api-migrations.md. Ele contém os padrões completos, incluindo casos extremos para forwardRef com useImperativeHandle, comportamento de null vs undefined de defaultProps e migrações de provedor/consumidor de contexto legado entre arquivos.
Perguntas frequentes
Preciso remover os `.propTypes`?
Não, você não precisa remover os `.propTypes`. Eles ainda funcionam como validadores, mas o React 19 não os executa mais automaticamente. É bom mantê-los para documentação e ferramentas.
O que são 'String refs'?
São uma forma antiga de referenciar elementos no React (ex: `this.refs.meuElemento`). O React 19 sugere usar `createRef()` em vez disso.
O que fazer com `useRef()` sem argumento?
Se você usa `useRef()` sem nenhum valor inicial, o React 19 pede para você adicionar `null` como argumento, ficando `useRef(null)`.
Detalhes
Descrição original do autor
Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.
repo: github/awesome-copilot
Popularidade
- Estrelas no GitHub
- 40 mil
- Posição no ranking
- #5333
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
acquire-codebase-knowledge
Ajuda seu agente a entender e documentar um projeto de código existente. É útil para novas pessoas entrarem no projeto ou para ter uma visão geral da arquitetura.
github/awesome-copilot
acreadiness-assess
Faz seu agente avaliar a prontidão de um projeto para IA e gerar um relatório. É útil para entender o quão bem um projeto está preparado para usar ferramentas de IA.
github/awesome-copilot
acreadiness-generate-instructions
Ajuda seu agente a criar instruções para ferramentas de IA baseadas em uma avaliação. É útil para melhorar a forma como a IA interage com o código e fecha lacunas identificadas.
github/awesome-copilot
acreadiness-policy
Faz seu agente ajudar a definir ou aplicar políticas para avaliação de projetos de IA. É útil para padronizar a forma como os projetos são avaliados e garantir conformidade.
github/awesome-copilot
Skills parecidas
angular-developer
Ajuda seu agente a criar código Angular e a dar conselhos sobre a estrutura do projeto. É útil para iniciar novos projetos, criar partes do código ou melhorar a performance e acessibilidade.
affaan-m/ECC
frontend-a11y
Ajuda seu agente a tornar interfaces web acessíveis para todos. Ele garante que sites e apps funcionem bem com leitores de tela e navegação por teclado.
affaan-m/ECC
frontend-patterns
Faz seu agente aplicar padrões modernos no desenvolvimento frontend. Ele otimiza performance, gerencia estado e segue boas práticas em React e Next.js.
affaan-m/ECC