Is TypeScript migration included in this skill?

Yes, the skill includes patterns and checklists for converting JavaScript React components to TypeScript with proper interface definitions and generic component support.

How does it handle breaking changes between React versions?

The skill provides a detailed version upgrade path covering breaking changes in event delegation, JSX transforms, and Strict Mode behavior for versions 16, 17, and 18.

Does it support React 18 concurrent features?

Absolutely. It provides implementation patterns for React 18's new root API, automatic batching, Transitions, and Suspense for data fetching.

Can I use custom codemods with this skill?

Yes, it includes examples and scripts for using jscodeshift to apply both standard React codemods and custom transformation logic to your codebase.

Can this skill automate the migration from class components to hooks?

Yes, it includes guidance and codemod configurations to help automate the conversion of state and lifecycle methods to functional hooks using jscodeshift.

React Modernization

Name: React Modernization
Author: HermeticOrmus

byHermeticOrmus

0•

Developer Tools

Upgrades React applications to the latest versions, migrates class components to functional hooks, and implements modern concurrent features.

This skill facilitates the seamless modernization of React codebases by providing automated and guided transitions from legacy class-based architectures to modern functional components with hooks. It covers essential upgrade paths for React 17 and 18, helps implement performance-enhancing concurrent features like Suspense and Transitions, and utilizes codemods to automate repetitive refactoring tasks. Whether you are addressing technical debt, improving performance with automatic batching, or migrating a JavaScript project to TypeScript, this skill offers the patterns, checklists, and scripts necessary for a robust architectural evolution.

Key Features

01Integration with jscodeshift for automated codemod execution

020 GitHub stars

03Step-by-step React 17 and 18 version upgrade paths

04Implementation of React 18 concurrent features and Suspense

05TypeScript migration patterns and performance optimization guides

06Automated class-to-hooks component migration patterns

Use Cases

01Migrating a vanilla JavaScript React project to a type-safe TypeScript architecture

02Upgrading a legacy React 16 application to React 18 for performance gains

03Converting a large codebase from class components to modern functional hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/hermetic-academy react-modernization

For use in Claude.ai and ChatGPT

Download Skill