اگه بخوای React رو تو یه جمله بگی، یه کتابخانه برای ساخت رابط کاربریه. مشکلی که حل می کنه قدیمی و آشناست: صفحه ای که پر از بخش های تعاملیه، مثل سبد خرید، فیلتر محصولات، فرم چندمرحله ای یا داشبورد، با کدهای جاوااسکریپتی که مستقیم به DOM دست می زنن خیلی زود شلوغ و سخت نگهداری می شه. React این وضعیت رو جور دیگه ای مدیریت می کنه. رابط رو به کامپوننت های کوچیک می شکنی. هر کامپوننت داده ها (state و props) رو می گیره و خروجی نمایش رو توصیف می کنه. وقتی داده عوض شد، خود React تشخیص می ده کدوم قسمت صفحه باید به روز بشه.
کامپوننت ها معمولا با JSX نوشته می شن، یعنی چیزی شبیه HTML داخل خود جاوااسکریپت. برای حالت و رفتار هم سراغ hooks مثل useState و useEffect می ری. نتیجه اش اینه که یه دکمه یا یه جدول رو یه بار می نویسی و هر جا لازم شد دوباره استفاده می کنی.
کجا به دردت می خوره؟ اگه اپلیکیشن تحت وب، پنل مدیریت، فروشگاهی با فیلتر و جستجوی زنده یا یه ویجت تعاملی داخل سایت می سازی، React انتخاب جاافتاده ایه و آموزش و کتابخانه جانبی زیادی هم داره. توسعه دهنده های وردپرس هم بیشتر از چیزی که فکر می کنی باهاش سروکار دارن، چون ویرایشگر بلوک وردپرس روی React ساخته شده. ولی اگه سایتت یه معرفی ساده شرکتی یا یه وبلاگ معمولیه، لازم نیست React رو بیاری وسط. یه قالب خوب کارت رو راه می ندازه و درگیر پیچیدگی build و حجم اضافه جاوااسکریپت هم نمی شی.
موقع انتخاب چند تا نکته رو یادت باشه. اول اینکه بسته react به تنهایی فقط منطق کامپوننت هاست و برای نمایش تو مرورگر react-dom هم لازم داری. دوم اینکه React خودش روتر یا ساختار پروژه نداره. یا ابزارهای جانبی رو خودت انتخاب می کنی یا سراغ فریم ورکی می ری که روی React ساخته شده. سوم، اگه سئو برات مهمه، صفحه ای که فقط سمت مرورگر ساخته می شه رو با دقت بسنج و رندر سمت سرور رو هم در نظر بگیر. چهارم، حجم نهایی جاوااسکریپت رو زیر نظر داشته باش، چون اینترنت موبایل خیلی از کاربرهای ایرانی همیشه قابل اتکا نیست.
نسخه های رسمی و بدون تغییر React تو مخزن داخلی ما هم هست. پس وقتی دسترسی به npm یا CDN های خارجی قطع یا کند شد، می تونی از همین صفحه برش داری.
راهنمای استفاده
بسته به نوع پروژه، دو مسیر اصلی داری.
اگه پروژه ات ابزار build داره (مثلا Vite یا یه فریم ورک مبتنی بر React):
- با npm دو بسته react و react-dom رو تو پوشه پروژه نصب کن. اگه به رجیستری خارجی دسترسی نداری، فایل های همین صفحه رو بگیر و تو پروژه بذار.
- بعدش کامپوننت ها رو با JSX بنویس. ابزار build خودش تبدیلشون می کنه.
- خروجی نهایی رو روی هاستت آپلود کن.
اگه می خوای React رو ساده تو یه صفحه HTML یا یه سایت وردپرسی بیاری:
- فایل react و react-dom رو از همین صفحه بردار و روی هاستت بذار. یا با کد آماده پایین همین صفحه مستقیم تو صفحه لودشون کن.
- ترتیب لود مهمه: اول react، بعدش react-dom، آخر هم فایل خودت.
- یه عنصر خالی با id مشخص تو صفحه بذار و کامپوننتت رو توش رندر کن.
- تو وردپرس اسکریپت ها رو با روش استاندارد خود وردپرس ثبت کن، نه با چسبوندن دستی تو قالب. این طوری با افزونه های دیگه تداخل پیدا نمی کنه.
قبل از انتشار، سایت رو یه بار هم با اینترنت ضعیف تست کن.