Development Skill
Angular Migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and…
$15
React Modernization
Upgrade React applications to latest versions, migrate from class components to hooks, and…
A safe, incremental playbook for dragging legacy React codebases into the modern era without a risky big-bang rewrite. It uses the Strangler Fig approach to convert class components to hooks one leaf at a time, walks the React 16 to 17 to 18 upgrade path breaking-change by breaking-change, and wraps large shifts behind feature flags so a production problem is a one-line config rollback. Every step keeps the build green.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Development
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
No big-bang rewrite. The skill migrates a React codebase strangler-fig style, one safe slice at a time, with a rollback path at every step:
- Map the upgrade path first: audit the current version, list the breaking changes per hop (17 event delegation, 18 automatic batching and StrictMode double invocation), and get the test suite green as the baseline
- Convert class components to hooks starting at the leaves: state fields become individual useState calls, the componentDidMount/DidUpdate/WillUnmount trio collapses into one useEffect with an explicit dependency array and cleanup
- Dissolve legacy abstractions in the proven 3-step order: convert each HOC (withUser, withAuth) to a custom hook, update consumers, then delete the HOC, each component as its own isolated PR
- Run codemods (jscodeshift) for the mechanical transforms like the new JSX transform, but treat every codemod output as untrusted: diff review plus full test run before merge
- Upgrade to React 18 behind safety nets: switch to createRoot, enable StrictMode and fix every double-invocation warning, re-run all tests against automatic batching and opt out with flushSync only where behavior must stay
- Adopt concurrent features incrementally behind feature flags: useTransition on the single heaviest component first, measure INP and error rate against the old behavior, expand only when the metrics win
One power source. 6 lines out.
react-modernization · core
core active · 6 lines
- ✓ migrating class components
Migrating class components to functional components with hooks
- ✓ upgrading from react 16
Upgrading from React 16 or 17 to React 18
- ✓ converting hocs and render
Converting HOCs and render props into custom hooks
- ✓ adopting concurrent feat…
Adopting concurrent features like Suspense and useTransition
- ✓ automating repetitive re…
Automating repetitive refactors with codemods
- ✓ migrating a javascript r…
Migrating a JavaScript React app to TypeScript
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
Zero-downtime modernization where each component conversion is an isolated, low-risk PR
license: perpetual -
Caught regressions early via StrictMode double-invocation before they reach users
license: perpetual -
Instant rollback on big changes through feature-flag gating, no redeploy needed
license: perpetual -
Faster, more performant UI through automatic batching, transitions, and code splitting
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Before/after conversions for state, lifecycle methods, context, and HOCs
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Teams maintaining older React applications that need to modernize to hooks and React 18 without breaking what already works.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
We're still on React 16 with hundreds of class components, is that too far gone?
That's exactly the target case. The Strangler Fig approach converts leaf components one at a time, and the 16 to 17 to 18 path is walked breaking-change by breaking-change, so the build stays green at every step instead of betting on a big-bang rewrite.
-
Can't I just run the codemods myself?
You can; jscodeshift is public. What this adds is the order of operations: which components to convert first, feature-flag gating so a production problem becomes a one-line rollback, and StrictMode double-invocation to catch regressions before users see them.
-
Does it cover upgrades beyond React 18?
No. The documented upgrade path ends at React 18 and its concurrent features like createRoot and useTransition. The incremental method still applies to later versions, but their specific breaking changes are not in this material.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.