К основному содержанию
скилл GitHub Copilot официальный · GitHub

react19-source-patterns — скилл для Copilot: React 19

Справочник для миграции React-исходников на React 19: API, ref, контекст и пропсы. Пригодится при обновлении существующего проекта.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add github/awesome-copilot --skill react19-source-patterns -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/react19-source-patterns/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/react19-source-patterns/

Похожие

prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. Claude Code Claude.ai 186 758установок web-artifacts-builder официальный anthropics Скилл собирает сложные HTML-артефакты для claude.ai на React, Tailwind CSS и shadcn/ui. Подходит для интерфейсов с состоянием и маршрутизацией. Claude Code Claude.ai 112 122установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. Claude Code CX Codex Cursor +1 1 200 000установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. Claude Code CX Codex Cursor +1 1 200 000установок theme-factory официальный anthropics Применяет готовые цветовые палитры и пары шрифтов к слайдам, документам и HTML-страницам. Подходит, когда материалу нужен единый стиль. Claude Code Claude.ai 94 921установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой