ارتقا (Upgrade)

در این بخش می بینیم ارتقا ری اکت 19 چطور انجام می شود. می فهمی فقط با چند دستور ساده می توانی پروژه قدیمی را به نسخه جدید برسانی و از امکانات تازه استفاده کنی.

ارتقا ری اکت 19 دقیقا یعنی چه؟

وقتی می گوییم ارتقا ری اکت 19 یعنی کتابخانه React و ReactDOM را به آخرین نسخه نصب کنیم. بعد هم کد قدیمی که از ReactDOM.render استفاده می کند، به الگوی جدید createRoot تبدیل شود.

این کار کمک می کند از قابلیت های جدید ری اکت 19 مثل رندر هم زمان بهتر استفاده کنی. اما اگر فعلا حوصله تغییر کد نداری، برنامه ات همچنان مثل ری اکت 17 کار می کند.

قدم اول: نصب نسخه جدید با npm

ابزار npm مخفف Node Package Manager است. یعنی برنامه ای که کتابخانه ها را برایت نصب و مدیریت می کند. داخل پوشه پروژه، ترمینال را باز کن و دستور نصب نسخه آخر را اجرا کن:

npm i react@latest react-dom@latest

با این دستور، هم خود React و هم ReactDOM به آخرین نسخه ارتقا پیدا می کنند. اگر همه چیز درست باشد، در ترمینال پیغام نصب موفق می بینی و پوشه node_modules به روزرسانی می شود.

قدم دوم: استفاده از Root API جدید

در نسخه های قدیمی React از متد ReactDOM.render برای رندر کردن استفاده می شد. در ارتقا ری اکت 19 بهتر است از Root API جدید یعنی createRoot کمک بگیری. این کار در فایل ورودی مثل main.jsx انجام می شود.

در منبع یک مثال وجود دارد که نسخه قبل و بعد را کنار هم نشان می دهد. ما این کد را کمی مرتب و به سبک این آموزش بازنویسی کرده ایم:

// قبل از ارتقا
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello React!</h1>,
  document.getElementById('root')
);

// بعد از ارتقا
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <h1>Hello React!</h1>
);

مشاهده در ادیتور

در نسخه جدید به جای اینکه کل JSX را به ReactDOM.render بدهیم، اول با createRoot یک ریشه می سازیم. بعد با متد render مشخص می کنیم چه چیزی روی صفحه در همان ریشه نمایش داده شود.

چطور این تغییر در پروژه واقعی انجام شود؟

حالا یک مسیر عملی و مرحله ای را ببینیم. فرض کن پروژه ات قبلا روی ری اکت 17 بوده است. برای ارتقا ری اکت 19 این کارها را انجام بده:

1. از کد خودت یک نسخه پشتیبان بگیر تا خیالت راحت باشد.
2. در پوشه پروژه دستور npm i react@latest react-dom@latest را اجرا کن.
3. در فایل ورودی مثل main.jsx تمام استفاده های ReactDOM.render را به الگوی createRoot(...).render(...) تبدیل کن.

اگر پروژه بزرگ باشد، ممکن است چند فایل مختلف داشته باشی که از ReactDOM.render استفاده می کنند. با جست وجو در کل پروژه می توانی همه آن ها را پیدا کنی و یکی یکی به ساختار جدید تبدیل کنی.

ارتباط این بخش با رندر HTML

در فصل رندر HTML (Render HTML) دیدی که چگونه createRoot را روی یک کانتینر مثل root صدا می زنیم. در این صفحه فقط همان مفهوم را روی پروژه های قدیمی تر اعمال می کنیم.

پس اگر در پروژه ای هنوز از ReactDOM.render استفاده می کنی، اول آن بخش را خوب مرور کن. بعد راحت تر می توانی کدهای قبلی را با الگوی جدید جایگزین کنی و مطمئن باشی رندر HTML در ری اکت دقیقا همان طور که انتظار داری انجام می شود.

کِی می توانی این بخش را رد کنی؟

اگر پروژه ات را تازه با ابزارهایی مثل Vite ساخته ای، معمولا از همان اول از createRoot استفاده شده است. در این حالت عملا ارتقا ری اکت 19 برایت فقط به روزرسانی نسخه پکیج ها است و لازم نیست ساختار رندر را عوض کنی.

اما اگر از یک پروژه قدیمی کلاسیک استفاده می کنی، این صفحه برایت خیلی مهم است. چون باعث می شود پروژه با نسخه های جدید React هم سازگار بماند و کم کم بتوانی سراغ قابلیت هایی مثل ویژگی های جدید ES6 در فصل مقدمه (Intro) و فصل های بعدی بروی.

جمع بندی سریع

• ارتقا ری اکت 19 یعنی به روزرسانی پکیج ها با npm.
• برای نسخه های جدید بهتر است از Root API یعنی createRoot استفاده کنی.
• کدهای قدیمی با ReactDOM.render را به الگوی جدید تبدیل کن.
• اگر پروژه ات تازه است، شاید همین حالا هم از ساختار جدید استفاده می کند.