react-modernization
Reactアプリケーションをモダンなパターンでアップグレード
こちらからも入手できます: sickn33
レガシーReactコードはアップグレードを遅らせ、破壊的変更を見落としがちです。このスキルはHooksとReact 18機能への移行のための明確な手順を提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「react-modernization」を使用しています。 React 17アプリをReact 18にアップグレードするためのチェックリストを教えてください。
期待される結果:
- reactとreact-domを18に更新し、タイプパッケージを整合させる
- createRootに切り替えてStrictModeでテストする
- バッチング動作を検証し、副作用を修正する
セキュリティ監査
安全This skill contains only static documentation content with React modernization patterns. No executable scripts, network calls, file system access, or external command execution were detected. All 55 static findings are FALSE POSITIVES - the scanner misclassified documentation text and code examples as security threats.
リスク要因
🌐 ネットワークアクセス (3)
⚡ スクリプトを含む (2)
⚙️ 外部コマンド (27)
品質スコア
作れるもの
React 18アップグレードの計画
破壊的変更とテスト手順を含めた段階的なアップグレード計画を作成する。
クラスコンポーネントの変換
安全なライフサイクルマッピングでレガシークラスをHooksに変換する。
モダン化ガイダンスの作成
codemodとパフォーマンスTipsを含むモダン化チェックリストを提供する。
これらのプロンプトを試す
React 16からReact 18への安全なアップグレードパス、主要な破壊的変更、テスト手順を概述する。
このクラスコンポーネント（stateとライフサイクルメソッド付き）をHooksに変換し、各変更を説明する。
React 18でのTransitionsと自動バッチングの導入方法を短い例題で説明する。
Reactモダン化のために実行すべきcodemodと、最も安全な実行順序を列出する。
ベストプラクティス
- 段階的にアップグレードし、各ステップ後にテストする
- 反復的な変更にはcodemodを使用する
- リリース前にStrictModeで動作を検証する
回避
- すべての依存関係を一度にアップグレードする
- StrictModeの警告を無視する
- テストせずにコンポーネントを変換する
よくある質問
どのReactバージョンをカバーしていますか？
主な制限は何ですか？
私のリポジトリと連携できますか？
私のデータを読み取ったり送信したりしますか？
アップグレードに問題がある場合はどうすればよいですか？
リンター有什么区别？
開発者の詳細
作成者
wshobsonライセンス
MIT
リポジトリ
https://github.com/wshobson/agents/tree/main/plugins/framework-migration/skills/react-modernization参照
main
ファイル構成
📄 SKILL.md