Upgrade React

🔹 Upgrade React (به‌روزرسانی نسخه React)

در این درس یاد می‌گیری چطور پروژه React خودت رو به آخرین نسخه به‌روزرسانی کنی، چه ابزارهایی برای این کار وجود داره، و قبل از ارتقا چه نکاتی باید رعایت بشن.

🔸 چرا باید React رو آپدیت کنیم؟

React به‌طور منظم به‌روزرسانی میشه تا امکانات جدید، عملکرد بهتر و باگ‌فیکس‌ها رو ارائه بده.
دلایل مهم برای آپدیت:

  • استفاده از ویژگی‌های جدید مثل hooks یا server components

  • افزایش سرعت و بهینه‌سازی‌های داخلی

  • رفع باگ‌ها و حفره‌های امنیتی

  • هماهنگی با نسخه‌های جدید Node.js و سایر کتابخانه‌ها

🔸 مرحله ۱: بررسی نسخه فعلی

در ترمینال داخل پوشه پروژه بنویس:

npm list react

📌 خروجی مثلاً ممکنه این باشه:

react@18.2.0

یا از فایل package.json قسمت dependencies می‌تونی نسخه فعلی React رو ببینی.

🔸 مرحله ۲: بررسی آخرین نسخه React

برای دیدن آخرین نسخه موجود:

npm show react version

📌 خروجی مثلاً:

19.0.0

🔸 مرحله ۳: به‌روزرسانی React و React-DOM

دستور زیر رو اجرا کن:

npm install react@latest react-dom@latest

📌 این دستور هر دو پکیج رو به آخرین نسخه پایدار به‌روزرسانی می‌کنه.

🔸 مرحله ۴: آپدیت ابزارهای جانبی (اختیاری ولی توصیه‌شده)

در صورتی که از ابزارهایی مثل Create React App یا Vite استفاده می‌کنی، اونا رو هم به‌روزرسانی کن:

npm install react-scripts@latest

یا

npm install vite@latest

🔸 مرحله ۵: پاک کردن کش و نصب مجدد پکیج‌ها

گاهی بعد از آپدیت، ممکنه تداخل نسخه‌ها رخ بده. برای اطمینان از تمیز بودن محیط:

rm -rf node_modules package-lock.json npm install

🔸 مرحله ۶: اجرای پروژه

بعد از آپدیت، پروژه رو اجرا کن:

npm start

📌 اگر با خطا مواجه شدی، پیام خطا رو بررسی کن تا بدونی کدوم پکیج یا سینتکس با نسخه جدید ناسازگاره.

🔸 مرحله ۷: بررسی تغییرات نسخه جدید (Breaking Changes)

قبل از ارتقا به نسخه جدید (مثلاً از 18 به 19)، حتماً صفحه رسمی React Release Notes رو ببین:

🔗 https://react.dev/blog

اونجا جزئیات مربوط به تغییرات بزرگ (breaking changes) نوشته شده.

🔸 مرحله ۸: استفاده از ابزار React Developer Tools

بعد از آپدیت، مطمئن شو اکستنشن React Developer Tools در مرورگر هم آخرین نسخه باشه.
در غیر این صورت ممکنه داده‌ها رو درست نمایش نده.

🔸 مرحله ۹: بررسی ناسازگاری‌ها با ESLint یا TypeScript

اگر از TypeScript یا ESLint استفاده می‌کنی، ممکنه نیاز باشه پکیج‌هاشون هم آپدیت بشن:

npm install typescript @types/react @types/react-dom eslint-config-react-app@latest

🔸 نکته مهم: نسخه‌های LTS Node.js

React نسخه‌های جدید معمولاً با Node.js نسخه 18 یا بالاتر سازگارن.
نسخه Node فعلیت رو با این دستور بررسی کن:

node -v

اگر پایین‌تر از 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 رو با اطمینان به آخرین نسخه به‌روزرسانی کنی، وابستگی‌ها رو مدیریت کنی و پروژه‌ت رو برای نسخه‌های جدید آماده نگه داری.