react-modernization
ترقية تطبيقات React باستخدام الأنماط الحديثة
كود React القديم يبطئ التحديثات ويخفي التغييرات الرئيسية. توفر هذه المهارة خطوات واضحة للانتقال إلى hooks وميزات React 18.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-modernization". Give me a checklist to upgrade a React 17 app to React 18.
النتيجة المتوقعة:
- Update react and react-dom to 18 and align type packages
- Switch to createRoot and test in StrictMode
- Validate batching behavior and fix side effects
التدقيق الأمني
آمن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
إنشاء خطة ترقية مرحلية مع التغييرات الرئيسية وخطوات الاختبار.
تحويل مكونات class
ترجمة classes القديمة إلى hooks مع تعيين دورة حياة آمن.
إنشاء إرشادات التحديث
تقديم قائمة فحص للتحديث مع نصائح الأداء والـ codemods.
جرّب هذه الموجهات
رسم مسار ترقية آمن من React 16 إلى React 18 مع التغييرات الرئيسية وخطوات الاختبار.
تحويل هذا class component مع state وطرق دورة الحياة إلى hooks مع شرح كل تغيير.
شرح كيفية إضافة الانتقالات والتجميع التلقائي في React 18 مع أمثلة قصيرة.
سرد codemods للتحديث وترتيبها من الأكثر أمانًا لتشغيلها.
أفضل الممارسات
- قم بالترقية بشكل تدريجي واختبر بعد كل خطوة
- استخدم codemods للتغييرات المتكررة
- تحقق من السلوك في StrictMode قبل الإطلاق
تجنب
- ترقية جميع التبعيات دفعة واحدة
- تجاهل تحذيرات StrictMode
- تحويل المكونات بدون اختبارات
الأسئلة المتكررة
ما هي إصدارات React التي يغطيها؟
ما هي الحدود الرئيسية؟
هل يمكنه التكامل مع مستودعي؟
هل يقرأ أو يرسلي بياناتي؟
ماذا لو كانت ترقية لديكم مشاكل؟
كيف يختلف عن linter؟
تفاصيل المطور
المؤلف
wshobsonالترخيص
MIT
المستودع
https://github.com/wshobson/agents/tree/main/plugins/framework-migration/skills/react-modernizationمرجع
main
بنية الملفات
📄 SKILL.md