react19-source-patterns — скилл для Copilot: React 19
Справочник для миграции React-исходников на React 19: API, ref, контекст и пропсы. Пригодится при обновлении существующего проекта.
npx skills add github/awesome-copilot --skill react19-source-patterns -a claude-codeЧто делает react19-source-patterns
Скилл помогает находить и исправлять паттерны, которые меняются при переходе на React 19. Он подсказывает замену ReactDOM.render на createRoot().render(), ReactDOM.hydrate на hydrateRoot, а unmountComponentAtNode на root.unmount().
В справочнике также разобраны прямой ref вместо forwardRef, параметры по умолчанию вместо defaultProps, useRef(null) вместо вызова без аргумента и переход с legacy Context на createContext. Для строковых ref предлагается createRef(). Отдельно указано, что .propTypes удалять не нужно: пакет prop-types остаётся валидным.
Ставьте скилл, если обновляете React-код и хотите проверять миграцию по конкретным шаблонам. Для небольшого проекта без таких API он может быть лишним.
Какие задачи решает
- заменить устаревший
ReactDOM.renderнаcreateRoot().render() - перевести гидрацию на
hydrateRoot() - убрать
findDOMNodeв пользу прямогоref - перенести legacy Context на
createContext - проверить
defaultProps, строковые ref иuseRef()
Примеры запросов агенту
- Проверь исходники проекта на паттерны миграции React 19.
- Замени `ReactDOM.hydrate` и `unmountComponentAtNode` по правилам скилла.
- Покажи, где `forwardRef` можно заменить на прямой `ref`.
Как установить react19-source-patterns
1Через Skills CLI (Vercel)
npx skills add github/awesome-copilot --skill react19-source-patterns -a claude-code2Вручную: положить файлы
~/.claude/skills/react19-source-patterns/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/react19-source-patterns/
Вручную: положить файлы
.agents/skills/react19-source-patterns/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/react19-source-patterns/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1Через Skills CLI (Vercel)
npx skills add github/awesome-copilot --skill react19-source-patterns2GitHub CLI
gh skill install github/awesome-copilot react19-source-patterns3Вручную: положить файлы
.github/skills/react19-source-patterns/SKILL.mdКомандой платформы
gemini skills install https://github.com/github/awesome-copilot --path skills/react19-source-patternsВручную: положить файлы
.devin/skills/react19-source-patterns/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о react19-source-patterns
Как установить react19-source-patterns в GitHub Copilot?
Выполните npx skills add github/awesome-copilot --skill react19-source-patterns или gh skill install github/awesome-copilot react19-source-patterns. Файл скилла появится в .github/skills/react19-source-patterns/SKILL.md.
Что делает react19-source-patterns?
Скилл даёт шаблоны миграции исходников на React 19. Он охватывает API ReactDOM, ref, Context, defaultProps, useRef() и .propTypes.
Нужно ли удалять `.propTypes` при миграции на React 19?
Нет. Правило скилла сохраняет .propTypes, потому что пакет prop-types продолжает работать как отдельный валидатор. Для документации и IDE предлагается добавить комментарий о runtime-проверке.
Исходный текст
SKILL.md · MIT
---
name: react19-source-patterns
description: 'Reference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.'
---
# React 19 Source Migration Patterns
Reference for every source-file migration required for React 19.
## Quick Reference Table
| Pattern | Action | Reference |
|---|---|---|
| `ReactDOM.render(...)` | → `createRoot().render()` | See references/api-migrations.md |
| `ReactDOM.hydrate(...)` | → `hydrateRoot(...)` | See references/api-migrations.md |
| `unmountComponentAtNode` | → `root.unmount()` | Inline fix |
| `ReactDOM.findDOMNode` | → direct ref | Inline fix |
| `forwardRef(...)` wrapper | → ref as direct prop | See references/api-migrations.md |
| `Component.defaultProps = {}` | → ES6 default params | See references/api-migrations.md |
| `useRef()` no arg | → `useRef(null)` | Inline fix add `null` |
| Legacy Context | → `createContext` | [→ api-migrations.md#legacy-context](references/api-migrations.md#legacy-context) |
| String refs `this.refs.x` | → `createRef()` | [→ api-migrations.md#string-refs](references/api-migrations.md#string-refs) |
| `import React from 'react'` (unused) | Remove | Only if no `React.` usage in file |
## PropTypes Rule
Do **not** remove `.propTypes` assignments. The `prop-types` package still works as a standalone validator. React 19 only removes the built-in runtime checking from the React package the package itself remains valid.
Add this comment above any `.propTypes` block:
```jsx
// NOTE: React 19 no longer runs propTypes validation at runtime.
// PropTypes kept for documentation and IDE tooling only.
```
## Read the Reference
For full before/after code for each migration, read **`references/api-migrations.md`**. It contains the complete patterns including edge cases for `forwardRef` with `useImperativeHandle`, `defaultProps` null vs undefined behavior, and legacy context provider/consumer cross-file migrations.
© github · MIT · github/awesome-copilot