ریکت یک زبان جدید نیست، فقط یک کتابخونه‌ست. اگر قوانین و منطق اصلی جاوااسکریپت رو ندونید، درک مفاهیم ریکت براتون مثل حفظ کردن یک متن به زبان بیگانه میشه.

وقتی کُد ارور میده، اگه JS رو خوب بلد نباشید، اصلا متوجه نمی‌شید این ارور مربوط به خود ریکت هست یا به خاطر یک اشتباه ساده تو منطق جاوااسکریپت به وجود اومده. این یعنی ساعت‌ها سردرگمی بی‌دلیل.

قلب تپنده‌ی ریکت، چرخیدن روی داده‌هاست. اگر روی متدهایی مثل map، filter و reduce تسلط نداشته باشید، برای رندر کردن یک لیست ساده هم به مشکل می‌خورید.

خیلی از تازه‌کارها فکر می‌کنن ساختارهایی مثل Destructuring (باز کردن آبجکت‌ها) یا Spread Operator (...) مخصوص ریکت هستن! در حالی که این‌ها ابزارهای مدرن جاوااسکریپت هستن که در تمام پروژه‌ها کاربرد دارن.

هوک‌های پرکاربردی مثل useEffect و useState کاملا بر اساس مفاهیم عمیق جاوااسکریپت مثل Closure و Scope کار می‌کنن. بدون درک این مفاهیم، استفاده از هوک‌ها همیشه براتون یک کار کپی‌پیست و طوطی‌وار می‌مونه.

در هر پروژه‌ای باید اطلاعات رو از بک‌اند بگیرید. اگر مفهوم برنامه نویسی ناهمگام (Asynchronous JS)، Promiseها و async/await رو به خوبی درک نکرده باشید، هندل کردن دیتای سمت سرور حسابی کلافه‌تون می‌کنه.

برای بهینه‌سازی اپلیکیشن‌های ریکت و جلوگیری از پردازش‌های الکی، باید تفاوت بین Reference Typeها (مثل آبجکت‌ها و آرایه‌ها) و Primitive Typeها (مقادیر اولیه) رو در جاوااسکریپت کاملاً درک کرده باشید.

با اینکه ریکت از ابزاری به اسم Virtual DOM استفاده می‌کنه، اما ندونستن اینکه DOM واقعی چیه و چطور کار می‌کنه، باعث میشه دید مهندسی کاملی به پروژه‌تون نداشته باشید و نتونید فرآیندها رو بهینه‌سازی کنید.

اگر فقط ریکت بلد باشید، با تغییر تکنولوژی شرکت‌ها آسیب‌پذیر می‌شید. اما برنامه‌نویسی که جاوااسکریپتِ قوی داره، فردا روزی می‌تونه توی مدت کوتاهی Vue، Angular یا حتی فریم‌ورک‌های موبایل رو راحت یاد بگیره.

تقریباً هیچ شرکتی فقط نمیپرسه "چطوری یک کامپوننت ریکت بسازم؟". در مصاحبه‌های فنی فرانت‌اند، سوالات اصلی و چالش‌برانگیز روی مفاهیم عمیق جاوااسکریپت، معماری وب و منطق برنامه‌نویسی تمرکز دارن.

تا دستت می‌خوره روی کیبورد و اولین حرف رو لمس می‌کنی، اون بالا برای طرف مقابل می‌نویسه: is typing...
تا حالا فکر کردی این اتفاق چطوری تو یک‌صدم ثانیه می‌افته؟
داستان کوتاه: چشمک ۵ ثانیه‌ای

تصور کن «دیار» می‌خواد توی یک گروه پیامی بفرسته:
۱. چشمک فرستنده: به محض لمس اولین حرف روی کیبورد، برنامه تلگرام روی گوشی دیار یک سیگنال خیلی کوچک و سریع (مثل یک چشمک) می‌سازه که معنیش اینه: «دست دیار روی صفحه کلیده!»

۲. پیک هوشمند: این چشمک در یک‌صدم ثانیه به سرور مرکزی تلگرام می‌رسه. سرور هم سریع به گوشی شما خط میده: «دیار داره تایپ می‌کنه!» و متن is typing... روی صفحه شما می‌شینه.

۳. قانون ۵ ثانیه: اگر دیار ۵ ثانیه دست نگه داره و چیزی ننویسه، سرور فرض می‌کنه مکث کرده و اون ۳ تا نقطه خودبه‌خود پاک می‌شن.

حالا پشت صحنه فنی چی می‌گذره؟

اگر بخوایم نگاه مهندسی‌تری داشته باشیم، این فرایند ۴ مرحله اصلی داره:

شناسایی اکشن (Input Event): با اولین لمس کیبورد، کلاینت تلگرام رویداد تایپ را در گوشی فرستنده ثبت می‌کند.

ارسال دستور setTyping: تلگرام یک درخواست بسیار کم‌حجم به نام messages.setTyping را روی پروتکل اختصاصی خود (MTProto) به سرور می‌فرستد.

پخش زنده خبر (Broadcast): سرور از طریق اتصال دائم شبکه، یک آپدیت به نام updateChatUserTyping برای تمام اعضای آنلاین آن چت ارسال می‌کند.

مکانیزم انقضا (Timeout): تا زمانی که کاربر به نوشتن ادامه دهد، این سیگنال هر ۴ تا ۵ ثانیه تکرار می‌شود. با توقف تایپ یا ارسال پیام، ارسال سیگنال قطع شده و وضعیت typing از روی صفحه اعضا پاک می‌شود تا ترافیک شبکه بهینه‌ماند.

const getAllUser = async () => {
try {
const [rows] = await pool.execute(
`
SELECT *
FROM users
WHERE is_active = TRUE
ORDER BY created_at DESC
`
);

return rows;
} catch (error) {
console.error("Error finding active users:", error);
throw error;
}
};

const user = await userModel.find({

isActive: true,
});

کروم ۱۵۲ جدیدترین آپدیت مرورگر گوگله (که در اواخر آگوست ۲۰۲۶ منتشر شده) و دست پر اومده تا کار ما توسعه‌دهنده‌ها رو راحت‌تر کنه. هدف اصلی این آپدیت اینه که کدهامون تمیزتر بشه و برای کارهای ظاهری، خیلی کمتر به جاوااسکریپت وابسته باشیم.
بیایید قابلیت‌های جدید CSS تو این نسخه رو بررسی کنیم و ببینیم چطور جای جاوااسکریپت رو گرفتن:

۱. استایل دادن به ویدیو و موزیک در حال پخش
قبلاً با جاوااسکریپت: اگه می‌خواستید وقتی یک ویدیو پخش می‌شه، سایه دورش بیفته یا وقتی متوقف (Pause) می‌شه تاریک بشه، باید با جاوااسکریپت رویدادهای play و pause رو ردیابی می‌کردید و کلاس‌های CSS رو به صورت دستی به تگ ویدیو اضافه یا کم می‌کردید.
الان با CSS: کروم ۱۵۲ انتخابگرهای جذابی مثل :playing، :paused و :muted رو معرفی کرده. خیلی ساده تو فایل استایل می‌نویسید video:playing و استایل دلخواهتون رو می‌دید! مرورگر خودش بقیه کارها رو هندل می‌کنه.

۲. کنترل شفافیت رنگ‌ها بدون دردسر
قبلاً با جاوااسکریپت: فرض کنید یک متغیر رنگی مثل --main-color داشتید و می‌خواستید همون رنگ رو با شفافیت ۵۰٪ تو یک بخش دیگه استفاده کنید. مجبور بودید کد رنگ رو تغییر بدید یا با جاوااسکریپت اون رو محاسبه کنید.
الان با CSS: با تابع جدید alpha()، می‌تونید همون لحظه شفافیت هر رنگی رو تغییر بدید. یعنی به CSS می‌گید "همون رنگ اصلی رو بردار، فقط شفافیتش رو کم کن". این کار ساخت تم‌های تاریک و روشن (Dark/Light mode) رو بی‌نهایت ساده می‌کنه.

۳. جابه‌جا کردن پنجره اپلیکیشن‌ها (window-drag)
قبلاً با جاوااسکریپت: وقتی یک وب‌اپلیکیشن دسکتاپ (PWA) می‌ساختید، برای اینکه کاربر بتونه با کلیک روی هدر برنامه، کل پنجره رو بکشه و جابه‌جا کنه، باید کلی کد جاوااسکریپت برای مدیریت کلیک و حرکت موس می‌نوشتید.
الان با CSS: فقط کافیه به عنصری که نقش هدر رو داره ویژگی window-drag: drag; رو بدید! خود مرورگر می‌فهمه که این بخش برای جابه‌جا کردن پنجره است و بدون یک خط کدنویسی اضافه، کار می‌کنه.

۴. مدیریت کلیک روی پس‌زمینه مودال‌ها
قبلاً با جاوااسکریپت: وقتی یک پاپ‌آپ باز می‌شد، برای اینکه کاربر با کلیک روی فضای تاریک پشتش بتونه اون رو ببنده، باید تو جاوااسکریپت چک می‌کردید که کاربر دقیقاً کجا کلیک کرده تا تداخلی با محتوای اصلی پاپ‌آپ پیش نیاد.
الان با CSS: با پشتیبانی جدید کروم از ::backdrop، کلیک کردن روی پس‌زمینه دیالوگ‌ها خیلی هوشمندانه‌تر مدیریت می‌شه و دیگه نیازی به نوشتن منطق‌های پیچیده تو جاوااسکریپت برای پیدا کردن محل کلیک ندارید.

class

وارد یک وب‌سایت می‌شوی. یک گردونه شانس جذاب یا یک دکمه بزرگ و درخشان وسط صفحه خودنمایی می‌کند: «برای دریافت 10 گیگابایت اینترنت رایگان کلیک کن 🎁»..