react18-string-refs
Ajuda seu agente a migrar referências de string antigas para um novo formato em componentes de classe React. Isso garante que o código continue funcionando corretamente após atualizações.
O que ela faz
Esta ferramenta ajuda a atualizar um código antigo de React para as versões mais novas. Ela transforma referências de texto (como `ref='meuInput'`) em um formato mais moderno (`React.createRef()`), garantindo que seu código funcione corretamente.
Quando usar
- ✓Quando você está atualizando um projeto React antigo para uma versão mais recente.
- ✓Se você encontrar avisos sobre 'string refs' no seu código React.
- ✓Antes de começar a reescrever manualmente as referências no seu código.
Exemplo do que pedir para a IA
“Como eu atualizo minhas 'string refs' para o formato moderno no React?”
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 ferramenta identifica onde você usa referências de texto no seu código React. Ela então mostra o padrão exato para substituí-las por `React.createRef()`, que é a maneira correta de fazer isso nas versões atuais do React.
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 react18-string-refsOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/react18-string-refs/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.
Migração de Refs de String no React 18
Refs de string (ref="myInput" + this.refs.myInput) foram depreciadas no React 16.3, emitiram um aviso no React 18.3.1 e foram removidas no React 19.
Mapa Rápido de Padrões
| Padrão | Referência |
|---|---|
| Ref única em um elemento DOM | → patterns.md#single-ref |
| Múltiplas refs em um componente | → patterns.md#multiple-refs |
| Refs em uma lista / refs dinâmicas | → patterns.md#list-refs |
| Refs de callback (abordagem alternativa) | → patterns.md#callback-refs |
| Ref passada para um componente filho | → patterns.md#forwarded-refs |
Comando de Busca
# Find all string ref assignments in JSX
grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
# Find all this.refs accessors
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."
Ambos devem ser migrados juntos - encontre os acessos ref="name" e this.refs.name para cada componente como um par.
A Regra de Migração
Cada ref de string migra para React.createRef():
- Adicione
refName = React.createRef();como um campo de classe (ou no construtor) - Substitua
ref="refName"→ref={this.refName}no JSX - Substitua
this.refs.refName→this.refName.currentem todos os lugares
Leia references/patterns.md para o "antes/depois" completo para cada caso.
Perguntas frequentes
O que são 'string refs'?
São uma forma antiga de referenciar elementos em React usando um nome de texto, como `ref='meuInput'`. Essa forma foi substituída por uma mais segura e moderna.
Por que preciso atualizar?
As 'string refs' foram descontinuadas e serão removidas em versões futuras do React. Atualizar garante que seu código continue funcionando e seja compatível com as novas versões.
O que é `React.createRef()`?
É a forma recomendada e moderna de criar referências para elementos em componentes de classe no React. É mais segura e explícita.
Detalhes
Descrição original do autor
Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pat
repo: github/awesome-copilot
Popularidade
- Estrelas no GitHub
- 40 mil
- Posição no ranking
- #5331
- 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