古いReactコードベースは保守が困難になり、パフォーマンス改善の機会を逃します。このスキルでは、バージョンアップグレード、Hooksマイグレーション、React 18のコンカレント機能への移行をガイドします。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-modernization」を使用しています。 componentDidMountとsetStateを持つクラスコンポーネント
期待される結果:
空の依存配列を持つuseEffectを使用してマウントロジック、クリーンアップ関数用于アンマウント用のuseStateを使用した関数コンポーネント
「react-modernization」を使用しています。 React 17のReactDOM.render呼び出し
期待される結果:
適切なコンテナ要素の選択とエラーバウンダリセットアップを備えたReact 18のcreateRoot API
「react-modernization」を使用しています。 イベントハンドラでの同期ステート更新
期待される結果:
isPendingローディングインジケーター付きのリントラップされた非緊急UI変更用のステート更新
セキュリティ監査
安全Static analyzer flagged 48 patterns but all are false positives. This skill contains documentation-only markdown files with React code examples. Dynamic imports are standard React lazy() patterns, shell commands are documentation for codemod usage, and fetch calls are example code snippets. No executable code exists in this skill.
品質スコア
作れるもの
レガシーReactアプリケーションのアップグレード
自動バッチングとコンカレント機能を備えた古いReact 16アプリケーションをReact 18にアップグレード
クラスからHooksへのマイグレーション
ライフサイクルメソッドを持つクラスコンポーネントを、useStateとuseEffectを使用した最新の関数コンポーネントに変換
パフォーマンス最適化
コード分割、メモ化、Suspense境界を実装してアプリケーションのパフォーマンスを向上
これらのプロンプトを試す
このReactクラスコンポーネントをHooksを使用するように変換してください。useStateとuseEffectに変換するステート変数とライフサイクルメソッドを特定してください。
React 17から18にアップグレードする際のbreaking changesについて、私のReactコードベースを分析してください。変更が必要なすべてのファイルをリストしMigrationチェックリストを提供してください。
私のプロジェクトでReact codemodsを実行するためのコマンドを生成してください。jscodeshiftのインストール、ライフサイクルメソッド用の具体的なtransforms、新しいJSX transformを含んでください。
この検索コンポーネントをuseTransition用于非同期更新にリファクタリングしてください。適切なローディング状態でのデータ取得のためのSuspense境界の実装方法も示してください。
ベストプラクティス
- 子を持たないリーフコンポーネントから始めて段階的にマイグレーション
- 各マイグレーションステップ後に包括的なテストを実行し、早期にリグレッションを発見
- React StrictModeを使用して開発中に安全でないパターンと副作用を特定
回避
- 実際のパフォーマンス問題を測定せずにuseMemoやuseCallbackを追加すること
- useEffectの依存配列にすべての依存関係を含め忘れること
- 同じコンポーネント内でクラスコンポーネントパターンとHooksを混在させること