Upgrade React
🔹 Upgrade React (بهروزرسانی نسخه React)
در این درس یاد میگیری چطور پروژه React خودت رو به آخرین نسخه بهروزرسانی کنی، چه ابزارهایی برای این کار وجود داره، و قبل از ارتقا چه نکاتی باید رعایت بشن.
🔸 چرا باید React رو آپدیت کنیم؟
React بهطور منظم بهروزرسانی میشه تا امکانات جدید، عملکرد بهتر و باگفیکسها رو ارائه بده.
دلایل مهم برای آپدیت:
-
استفاده از ویژگیهای جدید مثل hooks یا server components
-
افزایش سرعت و بهینهسازیهای داخلی
-
رفع باگها و حفرههای امنیتی
-
هماهنگی با نسخههای جدید Node.js و سایر کتابخانهها
🔸 مرحله ۱: بررسی نسخه فعلی
در ترمینال داخل پوشه پروژه بنویس:
📌 خروجی مثلاً ممکنه این باشه:
یا از فایل package.json
قسمت dependencies میتونی نسخه فعلی React رو ببینی.
🔸 مرحله ۲: بررسی آخرین نسخه React
برای دیدن آخرین نسخه موجود:
📌 خروجی مثلاً:
🔸 مرحله ۳: بهروزرسانی React و React-DOM
دستور زیر رو اجرا کن:
📌 این دستور هر دو پکیج رو به آخرین نسخه پایدار بهروزرسانی میکنه.
🔸 مرحله ۴: آپدیت ابزارهای جانبی (اختیاری ولی توصیهشده)
در صورتی که از ابزارهایی مثل Create React App یا Vite استفاده میکنی، اونا رو هم بهروزرسانی کن:
یا
🔸 مرحله ۵: پاک کردن کش و نصب مجدد پکیجها
گاهی بعد از آپدیت، ممکنه تداخل نسخهها رخ بده. برای اطمینان از تمیز بودن محیط:
🔸 مرحله ۶: اجرای پروژه
بعد از آپدیت، پروژه رو اجرا کن:
📌 اگر با خطا مواجه شدی، پیام خطا رو بررسی کن تا بدونی کدوم پکیج یا سینتکس با نسخه جدید ناسازگاره.
🔸 مرحله ۷: بررسی تغییرات نسخه جدید (Breaking Changes)
قبل از ارتقا به نسخه جدید (مثلاً از 18 به 19)، حتماً صفحه رسمی React Release Notes رو ببین:
اونجا جزئیات مربوط به تغییرات بزرگ (breaking changes) نوشته شده.
🔸 مرحله ۸: استفاده از ابزار React Developer Tools
بعد از آپدیت، مطمئن شو اکستنشن React Developer Tools در مرورگر هم آخرین نسخه باشه.
در غیر این صورت ممکنه دادهها رو درست نمایش نده.
🔸 مرحله ۹: بررسی ناسازگاریها با ESLint یا TypeScript
اگر از TypeScript یا ESLint استفاده میکنی، ممکنه نیاز باشه پکیجهاشون هم آپدیت بشن:
🔸 نکته مهم: نسخههای LTS Node.js
React نسخههای جدید معمولاً با Node.js نسخه 18 یا بالاتر سازگارن.
نسخه Node فعلیت رو با این دستور بررسی کن:
اگر پایینتر از 18 بود، از سایت رسمی nodejs.org نسخه جدید رو نصب کن.
✅ خلاصه
مرحله | دستور | توضیح |
---|---|---|
بررسی نسخه فعلی | npm list react | دیدن نسخه نصبشده |
بررسی آخرین نسخه | npm show react version | دیدن نسخه جدید |
بهروزرسانی | npm install react@latest react-dom@latest | نصب آخرین نسخه |
پاکسازی و نصب مجدد | rm -rf node_modules && npm install | حذف کش و بازسازی |
اجرای پروژه | npm start | تست بعد از آپدیت |
بررسی تغییرات | react.dev/blog | مطالعه تغییرات نسخه جدید |
✅ نتیجه:
در این درس یاد گرفتی چطور React رو با اطمینان به آخرین نسخه بهروزرسانی کنی، وابستگیها رو مدیریت کنی و پروژهت رو برای نسخههای جدید آماده نگه داری.