Legacy React codebases become difficult to maintain and miss performance improvements. This skill guides you through version upgrades, hooks migration, and adopting React 18 concurrent features.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-modernization". Class component with componentDidMount and setState
النتيجة المتوقعة:
Functional component using useState for state and useEffect with empty dependency array for mount logic, cleanup function for unmount
استخدام "react-modernization". React 17 ReactDOM.render call
النتيجة المتوقعة:
React 18 createRoot API with proper container element selection and error boundary setup
استخدام "react-modernization". Synchronous state updates in event handler
النتيجة المتوقعة:
Transition-wrapped state updates for non-urgent UI changes with isPending loading indicator
التدقيق الأمني
آمن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.
درجة الجودة
ماذا يمكنك بناءه
Legacy React Application Upgrade
Upgrade an older React 16 application to React 18 with automatic batching and concurrent features
Class to Hooks Migration
Convert class components with lifecycle methods to modern functional components using useState and useEffect
Performance Optimization
Implement code splitting, memoization, and Suspense boundaries for improved application performance
جرّب هذه الموجهات
Convert this React class component to use hooks. Identify state variables and lifecycle methods to transform into useState and useEffect.
Analyze my React codebase for breaking changes when upgrading from React 17 to 18. List all files that need modifications and provide a migration checklist.
Generate commands to run React codemods for my project. Include jscodeshift installation, specific transforms for lifecycle methods, and the new JSX transform.
Refactor this search component to use useTransition for non-urgent updates. Show how to implement Suspense boundaries for data fetching with proper loading states.
أفضل الممارسات
- Migrate incrementally starting with leaf components that have no children
- Run comprehensive tests after each migration step to catch regressions early
- Use React StrictMode to identify unsafe patterns and side effects during development
تجنب
- Adding useMemo or useCallback without measuring actual performance problems
- Forgetting to include all dependencies in useEffect dependency arrays
- Mixing class component patterns with hooks in the same component