# react18-class-surgeon

Субагент для GitHub Copilot, который переводит классовые компоненты React 16/17 на React 18.3.1: убирает устаревшие lifecycle-методы и старые API.

- субагент · `type=agent` · GitHub Copilot · ★ 40418
- Автор: github · официальный репозиторий GitHub
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/github/awesome-copilot/tree/HEAD/agents/react18-class-surgeon.agent.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/agents/react18-class-surgeon

## Что делает

Агент работает по отчёту `.github/react18-audit.md` и берёт оттуда список файлов, которые нужно править. Тестовые файлы он не трогает. Прогресс по каждому файлу сохраняется в память, поэтому работу можно прервать и продолжить с того же места.

Три небезопасных lifecycle-метода он не переименовывает в `UNSAFE_`-версии, а переносит по смыслу. Инициализация состояния уходит в конструктор, побочные эффекты — в `componentDidMount`, вывод состояния из пропсов — в `getDerivedStateFromProps` или `componentDidUpdate`. Для `componentWillUpdate` есть развилка: чтение DOM перед перерисовкой идёт в `getSnapshotBeforeUpdate`, отмена старого запроса — в `componentDidUpdate`.

Дальше по списку: старый context на `createContext`, строковые ref на `React.createRef()`, `findDOMNode` на прямые ref, `ReactDOM.render` на `createRoot`. Миграция context затрагивает несколько файлов сразу, потому что агенту нужно найти и провайдер, и всех потребителей. Если в проекте остались классовые компоненты с этими методами, стоит начать с аудита — без отчёта агенту не от чего отталкиваться.

## Установка

### GitHub Copilot (родная платформа)

**Вручную: положить файлы**
- Файл: `.github/agents/react18-class-surgeon.agent.md`

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/agents/react18-class-surgeon.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию. Поле tools у Copilot перечисляет инструменты по-своему — уберите его или перепишите под Claude Code

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/react18-class-surgeon.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/react18-class-surgeon.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/github/awesome-copilot/tree/HEAD/agents/react18-class-surgeon.agent.md

## Когда брать
- убрать предупреждения React 18.3.1 об устаревших lifecycle-методах
- перенести инициализацию состояния из `componentWillMount` в конструктор
- заменить строковые ref на `React.createRef()`
- перевести старый context на `createContext` вместе с потребителями
- заменить `ReactDOM.render` на `createRoot`

## Примеры запросов агенту
- Запусти react18-class-surgeon по отчёту `.github/react18-audit.md`
- Мигрируй `componentWillReceiveProps` в этом файле на `componentDidUpdate`
- Продолжи миграцию с того файла, где остановился

## Похожие
- [frontend-developer](https://affpapa.org/nevibecode/agents/voltagent-community-frontend-developer.md) — субагент · 40905 установок
- [ui-ux-designer](https://affpapa.org/nevibecode/agents/ui-ux-designer.md) — субагент · 27069 установок
- [fullstack-developer](https://affpapa.org/nevibecode/agents/fullstack-developer.md) — субагент · 18117 установок
- [javascript-pro](https://affpapa.org/nevibecode/agents/javascript-pro.md) — субагент · 4974 установки
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/ui-designer.md) — субагент · 1979 установок

Из того же набора: [github/awesome-copilot](https://affpapa.org/nevibecode/by/github/awesome-copilot.md) — 770 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md