قبل از مصاحبه React اینارو مرور کن

useState
useEffect
useMemo
useCallback
React.memo
Context API
Lazy Loading
Suspense
Virtual DOM
Reconciliation

اگر اینا رو بلد باشی، نصف راه رو رفتی.

❓ Hoisting
چیه؟

رفتار جاوااسکریپت که اعلان‌ها قبل از اجرا پردازش میشن، ولی مقداردهی نه.

⚠️کی دیروز به خاطر شرایط مالی نتونست ثبت نام کنه؟؟⚠️

به این آیدی پیام بده👇
@codelines_support
@codelines_support

🍪 فرق Cookie و Session چیست؟

وقتی وارد یک سایت می‌شی، سایت باید تو رو بشناسه. این کار معمولاً با Cookie و Session انجام می‌شه.

Cookie
: اطلاعات کوچکیه که داخل مرورگر ذخیره می‌شه؛ مثل زبان سایت یا شناسه ورود.

Session:
اطلاعات روی سرور نگهداری می‌شن و مرورگر فقط شناسه Session رو ذخیره می‌کنه.

📌 تفاوت اصلی:
Cookie داخل مرورگر ذخیره می‌شه.
Session معمولاً روی سرور ذخیره می‌شه.
Cookie می‌تونه مدت بیشتری باقی بمونه.
Session معمولاً بعد از مدتی منقضی می‌شه.

⚠️ اطلاعات حساس مثل رمز عبور را نباید مستقیماً داخل Cookie ذخیره کرد.
Cookie و Session از سؤال‌های پرتکرار مصاحبه‌های برنامه‌نویسی هستند.

Tab Network
فقط برای API نیست!

در تب Network می‌تونی این موارد رو ببینی:

✅ تصاویر
✅ فونت‌ها
✅ فایل‌های JS
✅ فایل‌های CSS
✅ درخواست‌های API

📌 یکی از مهم‌ترین ابزارهای هر Front-End Developer این تب توی مرورگره .

همه عاشق موفقیت‌اند،

اما کمتر کسی عاشق شب‌هاییه که با یک باگ تا صبح بیدار بمونه

همین شبا آینده کاری تو میسازه 👌🏻

🎯 چرا React از Virtual DOM استفاده می‌کنi؟

اگه هر تغییر مستقیماً روی DOM واقعی اعمال بشه، سرعت برنامه پایین میاد.

React
ابتدا تغییرات را روی Virtual DOM اعمال می‌کنه، سپس فقط بخش‌هایی که تغییر کردن رو به DOM واقعی منتقل می‌کنه.

✅ نتیجه:

رندر سریع‌تر
Performance بهتر
تجربه کاربری روان‌تر

📌 ترفند: Virtual DOM یک نسخه مجازی از DOM هستش ، نه جایگزین کامل اون.

🎯 چرا [] == ![] خروجی true می‌دهد؟

console.log([] == ![])
// true

اول ![] تبدیل می‌شود به false و بعد JavaScript موقع مقایسه نوع داده‌ها را تبدیل می‌کند.

📌 نتیجه نهایی:

[] == false // true

💡 یکی از سوال‌های WTF در مصاحبه‌های JavaScript.

🤯 می‌دونستی؟

NaN
تنها مقداری در JavaScript است که حتی با خودش هم برابر نیست!

console.log(NaN === NaN)
// false

اگر خواستی بررسی کنی مقدار NaN است یا نه:

Number.isNaN(value)

📌 این سؤال بارها در مصاحبه‌های JavaScript پرسیده شده.

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.

لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایل‌ها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉

❌یادتون باشه دامنه و هاست رو همیشه به اسم خودِ مشتری بگیرید.

فردا روز مشکلی پیش اومد پاتون گیر نباشه

📄 رزومه برنامه‌نویسی رو چطوری بنویسیم؟

رزومه‌ت لازم نیست ۵ صفحه باشه؛ فقط باید حرفه‌ای باشه.

این چیزا رو حتماً داخلش بذار: ✅ مهارت‌هایی که بلدی ✅ پروژه‌هایی که انجام دادی ✅ لینک GitHub و پورتفولیو ✅ اطلاعات تماس
❌ لازم نیست هر دوره‌ای که گذروندی یا هر مهارتی که اسمش رو شنیدی داخل رزومه بنویسی!

یادت باشه، خیلی وقت‌ها یه پروژه خوب بیشتر از ۱۰ تا مدرک به چشم میاد. 🚀

🤯 می‌دونستی؟

در JavaScript آرایه هم در واقع یک Object محسوب می‌شه!

console.log(typeof [])
// "object"

برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:

Array.isArray([])

📌 نکته مصاحبه: typeof نمی‌تواند Array را از Object تشخیص دهد.

استفاده زیاد از:

position: absolute;

معمولاً نشونه طراحی ضعیفه.
اول سعی کن مشکلت رو با:
✅ Flexbox
یا
✅ CSS Grid
حل کنی.
Absolute باید آخرین انتخابت باشه، نه اولین.

🚀 ترفند CSS

اگر دکمه‌ای داری که متنش ممکنه طولانی بشه:

button{
min-width:max-content;
}

باعث میشه دکمه به اندازه محتوا بزرگ بشه و متن نشکنه.

💸 حقیقت بازار کار

حقوق بالا رو کسی نمی‌گیره که بیشترین Framework روبلده.

حقوق بالا رو کسی می‌گیره که:

* بتونه باگ پیدا کنه.
* کد تمیز بنویسه.
* Performance
رو بهبود بده.
* مشکل واقعی پروژه رو حل کنه.

Framework
ها عوض می‌شن، مهارت حل مسئله نه.

📦 کتابخونه React | Framer Motion

می‌خوای انیمیشن‌های حرفه‌ای بسازی؟

Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام می‌ده.

✅ Fade
✅ Slide
✅ Drag
✅ Layout Animation

📌 انتخاب اول خیلی از پروژه‌های مدرن React.

🤖 پرامپت کاربردی برای برنامه‌نویس‌ها

اگر یک پروژه جدید React شروع کردی، این پرامپت رو به ChatGPT بده:

You are a Senior React Developer.

Review my code like a senior engineer.
Find bugs, performance issues, bad practices, security problems and suggest a cleaner architecture.

Explain every suggestion with examples.

📌 به‌جای اینکه فقط کد رو اصلاح کنه، مثل یک Code Reviewer رفتار می‌کنه و ایرادهای واقعی پروژه رو بهت می‌گه.

💡 نکته JavaScript | چرا از Object.freeze() استفاده می‌کنیم؟

اگر نمی‌خوای کسی مقدار یک Object رو تغییر بده، از Object.freeze() استفاده کن.

const user = {
  name: "Ali",
};

Object.freeze(user);

user.name = "Reza";

console.log(user.name);
// Ali

بعد از freeze، امکان:

❌ تغییر مقدار
❌ اضافه کردن Property
❌ حذف Property
وجود نداره.

📌 نکته مصاحبه: Object.freeze() فقط روی سطح اول Object اعمال می‌شه. اگر داخل Object، آبجکت دیگه‌ای وجود داشته باشه، همچنان قابل تغییره.