‏بدترین ری‌اکت دنیا رو بسازیم!

نویسنده می‌گه یه تعطیلی رسمی تو آلمان وقت آزاد دستش داده و رفته سراغ سؤالی که مدت‌ها ذهنش رو مشغول کرده بود: ساختن یه کلون React که کند و پرباگ باشه ولی با دست خودش نوشته شده باشه. خودش هم از اول شفاف می‌گه که توسعه‌دهندهٔ فرانت‌اند نیست و معمولاً سراغ گزینه‌های سبک‌تری مثل Preact و Mithril می‌ره، چون دوست داره سورس رو بخونه و بفهمه.

نقطهٔ شروع hyperscript هست. به گفتهٔ نویسنده JSX چیزی جز یه شکر نحوی نیست که موقع ترنسپایل به یه مشت createElement() تودرتو تبدیل می‌شه، پس تو این کلون همون نقش رو یه تابع کوتاه بازی می‌کنه که فقط آرگومان‌ها رو تو یه شیء می‌ریزه تا موقع رندر پردازش بشه.

// 'el' is element name (tag or component)
// 'props' is properties map
// 'children' is child elements array
const h = (el, props, ...children) => ({el, props, children});

تابع render بعدش لیست نودهای مجازی رو با فرزندهای یه نود واقعی DOM تطبیق می‌ده: کامپوننت‌های تابعی رو صدا می‌زنه، اگه تگ نود واقعی فرق داشت یا اصلاً وجود نداشت نود جدید می‌سازه و جاش می‌ذاره، ویژگی‌های تغییرکرده رو دوباره ست می‌کنه و بعد بازگشتی سراغ فرزندها می‌ره. ته کار هم هر نود اضافه‌ای که از رندر قبلی مونده حذف می‌شه.

برای state، نویسنده می‌گه عمداً بی‌خیال کلید و هوک شده: هر کامپوننت یه forceUpdate می‌گیره که از هر event listener صداش بزنی، کل کامپوننت دوباره رندر می‌شه و state رو هم می‌تونی راحت تو یه متغیر سراسری نگه داری. بخش جذاب‌تر آخر مقاله‌ست، جایی که با tagged template literal یه پارسر کوچیک با سه حالت متن، تگ باز و تگ بسته می‌نویسه تا بدون هیچ ترنسپایلری، نحوی شبیه JSX مستقیم تو جاوااسکریپت کار کنه.

نکات کلیدی:

• JSX فقط یه لایهٔ نحویه؛ چیزی که واقعاً اجرا می‌شه فراخوانی‌های تودرتوی createElement() هست
• تابع h(tag, props, ...children) همون کار رو با اسم کوتاه‌تر انجام می‌ده و درخت مجازی می‌سازه
• رندر یعنی مقایسهٔ نود مجازی با نود واقعی، ساختن نود جدید در صورت اختلاف تگ، و بازگشت روی فرزندها
• به جای هوک، هر کامپوننت یه forceUpdate می‌گیره که کل کامپوننت رو دوباره رندر می‌کنه
• با tagged template literal می‌شه نحوی شبیه JSX رو بدون مرحلهٔ build داشت