کتابخانه
react-dom بسته ای از خانواده ری اکته که کامپوننت هایی رو که با React نوشتی به DOM مرورگر وصل می کنه و روی صفحه نشون می ده. خود React فقط منطق کامپوننت ها رو داره و کشیدنشون توی صفحه وب کار react-dom هست. برای هر سایت یا اپ وب مبتنی بر React لازمه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۷٫۷ مگابایت · ۴۲ فایل · انتشار
دانلود هفتگی جهانی
۲۱۹٫۴ میلیون
هفته ۲۵ مهر تا ۱ آبان۲٫۳٪ بیشتر از هفته قبل
منبع: npmبه‌روزرسانی آمار
SHA-256: cdd8a1f284daf7eff271da65863c2e504bda04fd33c3cb89ad17ed952488d811
اگه با React کار کرده باشی، می دونی پکیج react فقط تعریف کامپوننت ها، هوک ها و منطق رو داره. چیزی که اون کامپوننت ها رو واقعا توی صفحه وب می کشه react-dom هست. این بسته پلی بین React و DOM مرورگره: درخت کامپوننت ها رو می گیره، عنصرهای HTML متناظرش رو می سازه و وقتی state عوض می شه، فقط همون بخشی از صفحه رو که لازمه به روز می کنه.
توی کدت بیشتر با چند تابع سروکار داری. createRoot ریشه برنامه رو می سازه و اون رو توی یه عنصر صفحه رندر می کنه. اگه HTML اولیه سمت سرور ساخته شده و فقط باید تعاملی بشه، سراغ hydrateRoot برو. createPortal به درد مودال، منوی بازشو و تولتیپ می خوره، یعنی چیزهایی که باید بیرون از ساختار معمول DOM نمایش داده بشن. بخش سرور هم react-dom/server هست که HTML رو روی سرور تولید می کنه.
این بسته برای کسایی مناسبه که رابط کاربری تعاملی می سازن: داشبورد، پنل مدیریت، فروشگاه با فیلتر زنده، یا اپ هایی که با یه وردپرس هدلس کار می کنن. ادیتور بلوک وردپرس هم روی React ساخته شده. ولی اگه سایتت یه صفحه معرفی ساده یا وبلاگه که فقط چند تا افکت کوچیک می خواد، React و react-dom رو نیار. حجمشون برای اون کار زیاده و با کمی جاوااسکریپت ساده راحت تر کار راه می افته. یادت باشه react-dom فقط برای وبه. برای اپ موبایل بومی، React Native رندر خودش رو داره.
موقع انتخاب و استفاده چند نکته رو جدی بگیر. react و react-dom باید هم نسخه باشن، وگرنه با خطاهای عجیب روبه رو می شی. روش های قدیمی مثل ReactDOM.render و hydrate توی نسخه های تازه منسوخ یا حذف شدن، پس مثال های قدیمی رو بدون بررسی کپی نکن. مجوز بسته MIT هست و توی پروژه های تجاری هم می شه ازش استفاده کرد. وقتی دسترسی به npm یا CDN های خارجی قطع یا کند می شه، نسخه های رسمی و بدون تغییر react-dom توی مخزن داخلی ما هم در دسترسه و می تونی از همون جا برداری.
اگه پروژه ات با ابزار ساخت مثل Vite یا webpack کار می کنه، react و react-dom رو با هم و هم نسخه نصب کن. اگه می خوای مستقیم توی صفحه استفاده کنی، از کد آماده پایین همین صفحه استفاده کن. اول react رو اضافه کن، بعدش react-dom رو، چون ترتیبشون مهمه.
مراحل کلی کار اینه:
اگه داخل قالب یا افزونه وردپرس استفاده می کنی، اول مطمئن شو React دوبار لود نمی شه. وردپرس خودش نسخه ای از React رو همراه ادیتور میاره و بارگذاری دوباره ممکنه تداخل درست کنه. بعد از اضافه کردن اسکریپت ها، کنسول مرورگر رو باز کن و ببین خطایی هست یا نه.
پکیج react خود کامپوننت ها، هوک ها و منطق برنامه رو تعریف می کنه و به مرورگر وابسته نیست. react-dom همون منطق رو به DOM صفحه وب وصل می کنه، عنصرها رو می سازه و تغییرات رو روی صفحه اعمال می کنه. برای ساخت سایت با React هر دوشون لازمن.
نه، react-dom برای کار کردن به پکیج react نیاز داره. کامپوننت ها و هوک ها از react میان و react-dom فقط اونا رو توی صفحه رندر می کنه. هر دو رو با هم و هم نسخه نصب کن تا به ناهمخوانی نخوری.
روش قدیمی render و hydrate توی نسخه های تازه منسوخ یا حذف شده. الان باید از createRoot و hydrateRoot استفاده کنی که از ورودی کلاینت react-dom میان. اگه آموزش قدیمی دنبال می کنی، فقط همین بخش رو با روش جدید عوض کن.
بله، مخصوصا برای بخش های تعاملی مثل بلوک های سفارشی، پنل های مدیریتی یا فرانت جدا از وردپرس. فقط حواست باشه React دوبار بارگذاری نشه، چون ادیتور وردپرس خودش نسخه ای از اون رو همراه داره. برای یه سایت ساده محتوایی معمولا لازم نیست.
وقتی npm یا CDN های خارجی در دسترس نیستن، می تونی نسخه رسمی و بدون تغییر رو از مخزن دانلود ما برداری و روی هاست داخلی خودت بذاری. فقط نسخه react و react-dom رو هماهنگ انتخاب کن. بعدش فایل رو توی پروژه ات به عنوان اسکریپت یا وابستگی محلی معرفی کن و یه بار هم کنسول مرورگر رو چک کن که خطایی نیست.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.