توسعه مدرن با React معمولاً با ابزارهای بیلد پیچیده مانند Webpack یا Vite گره خورده است. اگرچه این ابزارها برای بهینهسازی عالی هستند، اما پیچیدگی زیادی ایجاد میکنند. پروژه ReactDynaCodeDynaHtml یک جایگزین قدرتمند را معرفی میکند: بارگذاری، کامپایل و رندر کردن کامپوننتهای React به صورت پویا و در لحظه (Runtime) داخل مرورگر.
تکنیکهای کلیدی
۱. کامپایل در مرورگر با Babel Standalone
به جای کامپایل کردن کدهای JSX قبل از اجرا، این پروژه از babel.min.js استفاده میکند. این کتابخانه تماماً در مرورگر اجرا میشود و کدهای JSX را به جاوااسکریپت استاندارد تبدیل میکند.
۲. بارگذاری پویا (Dynamic Fetching)
برنامه از API استاندارد fetch استفاده میکند تا کد کامپوننتها (که در فایلهای .html یا .js ذخیره شدهاند) را به صورت متن دریافت کند. این کار اجازه میدهد کامپوننتها جدا از هسته اصلی برنامه ذخیره و فقط در صورت نیاز لود شوند.
۳. اجرای ایزوله با new Function
قلب تپنده این سیستم، لودر DynamicContent است. پس از دریافت و تبدیل کد توسط Babel، کد نهایی با استفاده از new Function اجرا میشود:
const func = new Function('React', ...contextKeys, funcBody);
این تکنیک به ما اجازه میدهد:
- وابستگیهایی مثل
React را به صورت دستی تزریق کنیم. - پراپها (Props) و متغیرهای کانتکست را به کامپوننت پاس بدهیم.
- اجرای کد را ایزوله کنیم تا با متغیرهای سراسری (Global) تداخل نداشته باشد.
مزایا
- بدون نیاز به تنظیمات بیلد: خبری از
npm run build، پوشه سنگین node_modules یا کانفیگهای پیچیده نیست. - معماری قابل تعویض (Hot-Swappable): میتوانید فایل یک کامپوننت را در سرور تغییر دهید و کاربران بدون نیاز به بیلد مجدد کل پروژه، تغییرات را بلافاصله پس از رفرش ببینند.
- انعطافپذیری در اجرا: ایدهآل برای سیستمهای CMS یا داشبوردهایی که چیدمان یا منطق آنها باید توسط سرور تعیین شود.
- پروتوتایپ سریع: عالی برای آزمایشهای سریع یا اضافه کردن React به پروژههای قدیمی (Legacy) بدون بازنویسی کامل.
نحوه استفاده
۱. راهاندازی: مطمئن شوید که index.html شامل React، ReactDOM و Babel Standalone باشد. ۲. استفاده از لودر: از کامپوننت DynamicContent برای لود کردن فایلهای خارجی استفاده کنید.
<DynamicContent url="./my-component.js" context={{ user: 'Alice' }} />
۳. فایلهای کامپوننت: در فایلهای خارجی، کامپوننتهای تابعی React را به صورت استاندارد بنویسید. کد باید مستقیماً JSX را برگرداند (Return کند).
نتیجهگیری
اگرچه این روش جایگزین کاملی برای بیلد در برنامههای بسیار بزرگ و حساس به پرفورمنس نیست، اما رویکرد "No-Build" انعطافپذیری بینظیری را برای محتوای پویا، سیستمهای پلاگین و ادغامهای سبک فراهم میکند.