skillboardUpdated every 6 hours
skillboardProvides 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 pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).
String refs (ref="myInput" + this.refs.myInput) were deprecated in React 16.3, warn in React 18.3.1, and are removed in React 19.
| Pattern | Reference | |---|---| | Single ref on a DOM element | → patterns.md#single-ref | | Multiple refs in one component | → patterns.md#multiple-refs | | Refs in a list / dynamic refs | → patterns.md#list-refs | | Callback refs (alternative approach) | → patterns.md#callback-refs | | Ref passed to a child component | → patterns.md#forwarded-refs |
# 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\."
Both should be migrated together - find the ref="name" and the this.refs.name accesses for each component as a pair.
Every string ref migrates to React.createRef():
refName = React.createRef(); as a class field (or in constructor)ref="refName" → ref={this.refName} in JSXthis.refs.refName → this.refName.current everywhereRead references/patterns.md for the full before/after for each case.
Copy a source-pinned command for your client. You run it yourself.
Destination: .claude/skills/react18-string-refs · pinned to the source commit
# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/react18-string-refs" ".claude/skills/"
rm -rf .skillboard-tmpReview the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.
sudo apt update && sudo apt install -y gitnpm install -g @anthropic-ai/claude-code# Run from your project root
git clone https://github.com/github/awesome-copilot.git .skillboard-tmp
git -C .skillboard-tmp checkout f11a4e441c5ff061b4f8ae37952be8c602e4034e
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/skills/react18-string-refs" ".claude/skills/"
rm -rf .skillboard-tmpDestination: .claude/skills/react18-string-refs
Scanner static-checks@0.1.0 · commit f11a4e441c5f. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.
No static rules matched. This is not a safety guarantee.