skills.rest
ccf
ccfCOMMUNITY
Explore all skills by this author →
𝕏@cfigueirGitHub

react-modernization

Upgrade React versions and migrate class components to hooks via codemods.

1|Updated Dec 23, 2025
Search Tags:#typescript#react#hooks#migration#codemods#concurrency#upgrade
One-click install
npx skills add https://github.com/ccf/claude-code-ccf-marketplace --skill react-modernization-ccf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-modernization
Source: https://github.com/ccf/claude-code-ccf-marketplace/tree/main/plugins/refactoring/skills/react-modernization
Command: npx skills add https://github.com/ccf/claude-code-ccf-marketplace --skill react-modernization-ccf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Modern React codebases struggle with upgrading versions, migrating from class components to hooks, and adopting concurrent features. This Skill provides structured guidance and codemods to streamline modernization with reduced risk.

Core Features & Use Cases

  • Version upgrades: Guidance and tooling for React 16→17→18 upgrades with API changes and JSX transform notes.
  • Class-to-Hooks migration: Automated refactors to convert class components to functional components using hooks while preserving behavior.
  • Concurrency adoption: Patterns and codemods for Suspense, transitions, and concurrent rendering improvements.
  • Codemods for automation: Prebuilt transformations to accelerate modernization with minimal manual edits.

Quick Start

Install and run the codemods on your React project to begin migration, then run tests and address TypeScript typings as needed.

Frequently Asked Questions about react-modernization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate React class components to hooks automatically?▼

Upgrade React 16 to 18 by following structured upgrade paths that address API changes and JSX transform notes. Prebuilt codemods automate much of the version transition to reduce manual refactoring risk.

How do I enable concurrent rendering and Suspense in a React app?▼

Automate React modernization tasks using prebuilt codemods that handle version upgrades, class-to-hooks migration, and concurrency adoption. These transformations accelerate modernization across large and small frontend projects with reduced risk.

Can I use codemods to upgrade React and migrate TypeScript typings at the same time?▼

React modernization suits both large and small frontend applications undergoing performance improvements and TypeScript migrations. It provides structured guidance and tooling to streamline upgrades with reduced risk.

What are the limitations of using codemods for React hooks migration?▼

Codemods for React hooks migration accelerate modernization with minimal manual edits, but you must run tests and address TypeScript typings afterward to ensure behavior is preserved and typings are correct.

Related Skills

Explore More Software Engineering Skills→
ccfccf

react-modernization

Upgrade React versions and migrate class components to hooks via codemods.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

react-modernization

Migrate React class components to functional components using hooks.

Official
Advanced
elihuvillarauselihuvillaraus
2

tester-mobile

Automates mobile app QA with static, unit, integration, and E2E testing.

Community
Advanced
lemulemu

react-modernization

Upgrade React apps and migrate class components to functional hooks.

Community
Advanced