📌مفهوم Node.js

محیطی برای اجرای JavaScript خارج از مرورگره
ابزارهایی مثل "npm" برای اجرا شدن به Node.js نیاز دارن

📌مفهوم npm
مدیر پکیج‌های JavaScript محسوب میشه
با npm می‌تونیم کتابخانه‌ها و ابزارهای موردنیاز پروژه رو نصب و مدیریت کنیم
مثلاً با اجرای دستور زیر:
npm install react
پکیج React به پروژه اضافه می‌شه

📌مفهوم Vite
ابزاری برای ساخت، اجرا و Build پروژه‌های Frontend محسوب میشه

این ابزار در زمان توسعه، پروژه رو سریع اجرا می‌کنه و تغییرات کد رو خیلی سریع داخل مرورگر نمایش میده

📌تفاوت این سه مورد
به طور خلاصه:

🔸 محیط اجرا: "Node.js" → اجرای JavaScript خارج از مرورگر

🔸 مدیریت پکیج: "npm" → نصب و مدیریت کتابخانه‌ها و ابزارها

🔸 ابزار توسعه: "Vite" → اجرای محیط توسعه و آماده‌سازی پروژه برای انتشار

📌 یک مثال ساده

وقتی دستور زیر رو اجرا می‌کنیم:

npm create vite@latest

در واقع با استفاده از npm، ابزار Vite رو اجرا می‌کنیم تا ساختار اولیه پروژه رو ایجاد کنه

یعنی این سه مورد جایگزین هم نیستن
هرکدوم وظیفه متفاوتی در اکوسیستم Frontend دارن

وقتی یک کامپوننت React رو می‌نویسیم، مرورگر مستقیماً کد JSX ما رو اجرا نمی‌کنه

1⃣ ابتدا JSX چه می‌شه؟
کدی مثل:

function App() {
return <h1>Hello</h1>;
}

در ابتدا توسط ابزارهای مربوط به Build پردازش می‌شه و JSX به JavaScript تبدیل میشه

2⃣ مفهوم React Element

بعد از پردازش JSX، یک ساختار داده‌ای به نام React Element ایجاد میشه
این ساختار فقط توصیف می‌کنه که UI باید چه شکلی باشه

مثلاً به صورت مفهومی:
{
type: "h1",
props: {
children: "Hello"
}
}
📌 این Object خودش DOM واقعی نیست، فقط توصیفی از UI موردنظره

3⃣ مفهوم Virtual DOM

ری‌اکت برای مدیریت UI، یک نمایش از ساختار UI رو در حافظه نگه می‌داره که بهش معمولاً Virtual DOM گفته می‌شه

وقتی State یا Props تغییر می‌کنن، ری‌اکت خروجی جدید کامپوننت رو محاسبه می‌کنه

4⃣ مفهوم Reconciliation

بعد از ایجاد خروجی جدید، ری‌اکت وضعیت جدید رو با وضعیت قبلی مقایسه می‌کنه
به این فرآیند Reconciliation میگن

در این مرحله ری‌اکت بررسی می‌کنه کدوم قسمت‌های UI واقعاً تغییر کردن و نیاز به به‌روزرسانی دارن

5⃣ مفهوم Fiber

در معماری مدرن ری‌اکت، ساختار داخلی مهمی به نام Fiber وجود داره

فایبر به ری‌اکت اجازه می‌ده کارهای مربوط به رندرینگ رو به واحدهای کوچک‌تر تقسیم و مدیریت کنه

این معماری به ری‌اکت کمک می‌کنه کارهای مختلف رو بهتر زمان‌بندی و اولویت‌بندی کنه

6⃣ مفهوم Render Phase

در مرحله Render Phase، ری‌اکت کامپوننت‌ها رو اجرا می‌کنه تا مشخص بشه UI جدید باید چه شکلی باشه
مثلاً:
function Counter() {
return <h1>10</h1>;
}
در این مرحله بیشتر داریم UI جدید رو محاسبه می‌کنیم و هنوز الزاماً تغییری روی DOM واقعی ایجاد نشده

7⃣ مفهوم Commit Phase

بعد از اینکه ری‌اکت مشخص کرد چه تغییراتی لازمه، وارد مرحله Commit Phase میشه

در این مرحله تغییرات لازم روی DOM واقعی اعمال می‌شن

به صورت ساده:
Render
↓
Reconciliation
↓
Commit
↓
DOM Update

8⃣ بعد از تغییر DOM چه می‌شه؟

بعد از تغییر DOM، مرورگر باید صفحه رو دوباره پردازش کنه

به صورت ساده این مراحل اتفاق می‌افتن:

DOM
↓
Style Calculation
↓
Layout
↓
Paint
↓
Composite

در این مراحل مرورگر مشخص می‌کنه عناصر چه Styleای داشته باشن، کجا قرار بگیرن و چطور روی صفحه نمایش داده بشن

9⃣ مفهوم useEffect

یکی از اشتباهات رایج اینه که فکر کنیم "useEffect" هنگام Render اجرا میشه

در حالت معمول، Effectها بعد از Commit شدن تغییرات اجرا می‌شن
مثلاً:
useEffect(() => {
console.log("Effect");
}, []);

یعنی ابتدا React UI رو محاسبه می‌کنه و تغییرات لازم رو Commit می‌کنه، سپس Effect اجرا میشه

0⃣1⃣ وقتی State تغییر می‌کنه چه اتفاقی می‌افته؟
فرض کنیم این State رو داریم:

const [count, setCount] = useState(0);
وقتی این کد اجرا بشه:
setCount(count + 1);
تقریباً این مسیر اتفاق می‌افته:
State Update
↓
React Scheduling
↓
Render Phase
↓
Reconciliation
↓
Commit Phase
↓
DOM Update
↓
Browser Rendering
در نهایت کاربر UI جدید رو روی صفحه می‌بینه

📌 یک نکته مهم

ری‌اکت خودش باعث نمی‌شه DOM مرورگر جادویی سریع‌تر بشه

ری‌اکت بیشتر مدیریت تغییرات UI رو ساده‌تر می‌کنه و تصمیم می‌گیره چه تغییراتی باید روی DOM اعمال بشن

سرعت واقعی برنامه به چیزهای مختلفی مثل حجم JavaScript، تعداد Renderها، ساختار کامپوننت‌ها، اندازه DOM و هزینه‌ی Rendering مرورگر بستگی داره

🧠 جمع‌بندی

به طور خلاصه، وقتی یک State در React تغییر می‌کنه:
State Change
↓
Render
↓
Reconciliation
↓
Commit
↓
DOM Update
↓
Browser Rendering
↓
Pixels on Screen

📌 مفاهیم مهم پشت React:

React Element → توصیف UI

Virtual DOM → نمایش UI در حافظه

Reconciliation → پیدا کردن تفاوت‌های UI قبلی و جدید

Fiber → معماری داخلی برای مدیریت کارهای React

Render Phase → محاسبه UI جدید

Commit Phase → اعمال تغییرات روی DOM

Browser Rendering → تبدیل تغییرات DOM به چیزی که روی صفحه می‌بینیم

چیزی که ما فقط با یک "setState" می‌بینیم، پشت صحنه زنجیره‌ای از اتفاقاته

مهارت‌های نرم هم روی کیفیت کار، ارتباط با تیم و حتی پیدا کردن شغل تأثیر زیادی دارن

⚪️ مهارت ارتباطی

سعی کنیم وقتی درباره یک مشکل یا ایده صحبت می‌کنیم، منظورمون رو واضح و کوتاه توضیح بدیم
مثلاً به جای اینکه فقط بگیم کدم کار نمی‌کنه، مشکل، کاری که انجام دادیم و نتیجه‌ای که گرفتیم رو توضیح بدیم

⚪️ حل مسئله

قبل از اینکه سریع سراغ سرچ کردن یا پرسیدن از دیگران بریم، چند دقیقه خودمون مشکل رو بررسی کنیم
می‌تونیم مسئله رو به بخش‌های کوچک‌تر تقسیم کنیم و مرحله‌به‌مرحله جلو بریم

⚪️ مدیریت زمان

برای کارها زمان مشخص تعیین کنیم و سعی کنیم یک کار رو تا حد ممکن به پایان برسونیم، قبل از اینکه همزمان چند کار دیگه شروع کنیم

⚪️ کار تیمی
در پروژه‌های واقعی فقط کدنویسی نمی‌کنیم، باید بتونیم با طراح، Backend Developer، مدیر پروژه و بقیه اعضای تیم همکاری کنیم

⚪️ پذیرش Feedback

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

⚪️ یادگیری مستقل

هر مشکلی رو تبدیل به فرصتی برای یادگیری کنیم
گاهی به جای اینکه فقط جواب یک خطا رو پیدا کنیم، بهتره بفهمیم چرا این خطا اتفاق افتاده

📌 چطور این مهارت‌ها رو تقویت کنیم؟

بهترین روش، تمرین کردن در موقعیت‌های واقعی پروژه است

برای خودمون پروژه تعریف کنیم، درباره تصمیم‌های فنی توضیح بنویسیم، کدمون رو به دیگران ارائه بدیم، Feedback بگیریم و سعی کنیم مشکلات رو قبل از پرسیدن، خودمون بررسی کنیم.

🟡 مهارت نرم چیزی نیست که با خواندن یک مقاله به دست بیاد
مثل برنامه‌نویسی، با تمرین و تکرار ساخته میشه

⚪️ ابتدا DNS
ابتدا مرورگر باید بفهمه دامنه به کدوم آدرس IP مربوطه
در این مرحله، سیستم DNS نام دامنه رو به آدرس IP تبدیل می‌کنه

⚪️ بعد اتصال به سرور
سپس مرورگر با استفاده از آدرس IP با سرور ارتباط برقرار می‌کنه

⚪️ بعد ارسال درخواست
در ادامه، مرورگر یک درخواست HTTP یا HTTPS برای سرور ارسال می‌کنه

⚪️ بعد دریافت پاسخ
سپس سرور درخواست رو پردازش می‌کنه و پاسخ مناسب رو برای مرورگر می‌فرسته

🔹 در نهایت نمایش صفحه
بعد از دریافت فایل‌هایی مثل HTML، CSS و JavaScript، مرورگر اون‌ها رو پردازش می‌کنه و صفحه رو روی نمایشگر می‌سازه

📌 مسیر کلی
دامنه → DNS → آدرس IP → سرور → درخواست HTTP → پاسخ سرور → پردازش مرورگر → نمایش صفحه

📌 نکته جالب
چیزی که برای ما فقط چند ثانیه طول می‌کشه، در واقع نتیجه همکاری چندین بخش مختلف از شبکه و مرورگره

`  → Backtick / Grave Accent

'  → Single Quote / Apostrophe

"  → Double Quote

;  → Semicolon

:  → Colon

,  → Comma

.  → Dot / Period

... → Spread / Rest Operator

() → Parentheses / Round Brackets

[] → Square Brackets / Brackets

{} → Curly Braces / Braces

<> → Angle Brackets

=  → Assignment Operator

== → Equality Operator

=== → Strict Equality Operator

!= → Inequality Operator

!== → Strict Inequality Operator

=> → Arrow Function / Arrow Operator

+  → Plus Operator

-  → Minus Operator

*  → Multiplication Operator

/  → Division Operator

%  → Modulo Operator

++ → Increment Operator

-- → Decrement Operator

&& → Logical AND Operator

|| → Logical OR Operator

!  → Logical NOT Operator

?? → Nullish Coalescing Operator

?. → Optional Chaining Operator

?  → Ternary Operator

&  → Bitwise AND Operator

|  → Bitwise OR Operator

^  → Bitwise XOR Operator

~  → Bitwise NOT Operator

<< → Left Shift Operator

>> → Right Shift Operator

#  → Hash / Private Class Field

_  → Underscore

@  → At Sign

$  → Dollar Sign

\  → Backslash

/  → Forward Slash

// → Single-line Comment

/* */ → Multi-line Comment

🔹 "animationstart" → شروع انیمیشن
🔹 "animationend" → پایان انیمیشن
🔹 "animationiteration" → پایان هر دور از انیمیشن

🔹 "transitionstart" → شروع Transition
🔹 "transitionend" → پایان Transition
🔹 "transitioncancel" → لغو شدن Transition

🔹 "online" → اتصال دوباره مرورگر به اینترنت
🔹 "offline" → قطع شدن اتصال مرورگر از اینترنت


🔹 "load" → کامل شدن بارگذاری یک منبع یا صفحه

🔹 "copy" → کپی کردن محتوا
🔹 "cut" → بریدن محتوا
🔹 "paste" → چسباندن محتوا


🔹 "dragstart" → شروع کشیدن عنصر
🔹 "drag" → در حال کشیده شدن عنصر
🔹 "dragend" → پایان کشیدن عنصر
🔹 "dragover" → قرار گرفتن عنصر کشیده‌شده روی مقصد
🔹 "drop" → رها کردن عنصر روی مقصد


🔹 "contextmenu" → باز شدن منوی راست‌کلیک

🔹 DOMContentLoaded →
زمانی که ساختار اچ‌تی‌ام‌ال صفحه کاملاً ساخته و پردازش می‌شود، بدون اینکه منتظر بارگذاری تصاویر و منابع دیگر بماند

🔹 beforeunload → درست پیش از خروج کاربر از صفحه یا بارگذاری دوباره اجرا می‌شود

🔹 visibilitychange → زمانی که وضعیت دیده شدن صفحه تغییر می‌کند؛ برای مثال وقتی کاربر از برگه صفحه خارج می‌شود

🔹 popstate → زمانی که وضعیت تاریخچه مرورگر با رفتن به صفحه قبلی یا بعدی تغییر می‌کند

🔹 storage → زمانی که داده‌های ذخیره‌شده در حافظه محلی یا حافظه نشست، در یک برگه یا پنجره دیگر تغییر می‌کنند

🔹 beforeinput → درست قبل از اینکه تغییر جدید روی مقدار یک ورودی اعمال بشه

🔹 pointerdown → شروع تعامل با ماوس، لمس یا قلم روی یک عنصر

🔹 pointerup → پایان فشار ماوس، لمس یا قلم

🔹 pointermove → حرکت نشانگر، لمس یا قلم روی صفحه

🔹 "find()" → پیدا کردن اولین مقدار مطابق شرط

🔹 "findIndex()" → پیدا کردن موقعیت اولین مقدار مطابق شرط

🔹 "some()" → بررسی وجود حداقل یک مقدار مطابق شرط

🔹 "every()" → بررسی اینکه همه مقادیر شرط رو رعایت می‌کنن

🔹 "findLast()" → پیدا کردن اولین مقدار مطابق شرط از انتهای آرایه

🔹 "findLastIndex()" → پیدا کردن موقعیت اولین مقدار مطابق شرط از انتهای آرایه

🔹 "toReversed()" → ایجاد آرایه جدید به صورت معکوس، بدون تغییر آرایه اصلی

🔹 "toSorted()" → مرتب‌سازی و ایجاد آرایه جدید، بدون تغییر آرایه اصلی

🔹 "toSpliced()" → ایجاد آرایه جدید بعد از تغییر بخشی از آرایه، بدون تغییر آرایه اصلی

🔹 "flat()" → تخت کردن آرایه‌های تو در تو

🔹 "flatMap()" → اجرای "map()" و سپس تخت کردن نتیجه

🔹 "reduce()" → تبدیل عناصر آرایه به یک مقدار نهایی

🔹 "includes()" → بررسی وجود یک مقدار مشخص در آرایه

🔹 "keys()" → ایجاد Iterator برای پیمایش Indexهای آرایه

🔹 "values()" → ایجاد Iterator برای پیمایش مقادیر آرایه

🔹 "entries()" → ایجاد Iterator شامل Index و مقدار هر عنصر

<button type="button">

</button>

<button type="submit">

</button>

🔹 "Win + E" → باز کردن File Explorer

🔹 "Win + R" → باز کردن Run

🔹 "Win + I" → باز کردن Settings

🔹 "Win + S" → باز کردن Search

🔹 "Win + V" → باز کردن Clipboard

🔹 "Win + L" → قفل کردن سیستم

🔹 "Win + D" → نمایش یا مخفی کردن Desktop

🔹 "Win + Tab" → باز کردن Task View

🔹 "Alt + Tab" → جابه‌جایی بین پنجره‌ها

🔹 "Alt + F4" → بستن پنجره فعال

🔹 "Ctrl + Shift + Esc" → باز کردن Task Manager

🔹 "Win + Shift + S" → گرفتن Screenshot از بخشی از صفحه

🔹 "Win + PrtScn" → گرفتن Screenshot از کل صفحه

🔹 "Win + Ctrl + D" → ساخت Desktop مجازی جدید

🔹 "Win + Ctrl + ← / →" → جابه‌جایی بین Desktopهای مجازی

🔹 "Win + Ctrl + F4" → بستن Desktop مجازی

🔹 "Win + ← / →" → قرار دادن پنجره در نیمه صفحه

🔹 "Win + ↑ / ↓" → بیشینه یا کمینه کردن پنجره

🔹 "Win + Z" → نمایش Snap Layouts

🔹 "Win + Space" → تغییر زبان کیبورد

🔹 "Win + ." → باز کردن Emoji و Symbolها

🔹 "Win + P" → تغییر حالت نمایشگر

🔹 "Win + K" → اتصال به دستگاه بی‌سیم

🔹 "Win + A" → باز کردن Quick Settings

🔹 "Win + N" → باز کردن Notifications

🔹 "Win + X" → باز کردن منوی مدیریتی ویندوز

🔹 "Win + H" → فعال کردن Voice Typing

🔹 "Win + T" → جابه‌جایی بین برنامه‌های Taskbar

🔹 "Win + M" → Minimize کردن همه پنجره‌ها

🔹 "Win + Shift + M" → بازگرداندن پنجره‌های Minimize شده

🔹 "Win + Home" → Minimize کردن همه پنجره‌ها به‌جز پنجره فعال

🔹 "Win + Shift + ↑" → کشیدن پنجره تا بالا و پایین صفحه

🔹 "Win + Shift + ← / →" → انتقال پنجره به مانیتور دیگر

🔹 "Alt + Space" → باز کردن منوی پنجره فعال

🔹 "F2" → تغییر نام فایل یا پوشه

🔹 "F5" → Refresh کردن صفحه یا پنجره

🔹 "Shift + F10" → باز کردن Context Menu

🔹 "Ctrl + Shift + N" → ساخت پوشه جدید در File Explorer

🔹 "Alt + Enter" → نمایش Properties فایل یا پوشه

🔹 "Ctrl + Shift + Esc" → دسترسی سریع به Task Manager

🔹 "Ctrl + Shift + T" → بازگرداندن آخرین تب بسته‌شده در مرورگر

🔹 "Ctrl + L" → رفتن مستقیم به Address Bar مرورگر

setCount(prev => prev + 1);

setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);

[] == []

const a = [];
const b = [];

console.log(a == b); // false
console.log(a === b); // false

const a = [1, 2, 3];
const b = [1, 2, 3];

console.log(a === b); // false

const a = [1, 2, 3];
const b = a;

console.log(a === b); // true

const numbers = [1, 10, 2, 20, 3];

numbers.sort();

console.log(numbers);

numbers.sort((a, b) => a - b);
console.log(numbers);
// [1, 2, 3, 10, 20]

const users = [
  { name: "Ali", age: 22 },
  { name: "Sara", age: 25 },
  { name: "Reza", age: 20 }
];

console.table(users);

🔹 ساخت سریع ساختار HTML:

با نوشتن ! می‌تونی ساختار اولیه‌ی یک فایل HTML رو سریع ایجاد کنی

🔹 ساخت عنصر با کلاس:
با نوشتن div.container می‌تونی یک div با کلاس container بسازی

🔹 ساخت عنصر با شناسه:
با نوشتن #header می‌تونی یک div با شناسه‌ی header ایجاد کنی

🔹 ساخت چند عنصر مشابه:
با نوشتن ul>li*5 می‌تونی یک لیست شامل ۵ عنصر li بسازی

🔹 ساخت عناصر تو‌در‌تو:
با نوشتن div>h2+p می‌تونی یک div بسازی که داخلش h2 و p قرار داشته باشن

🔹 ترکیب کلاس و عناصر تو‌در‌تو:
با نوشتن div.box>p.text می‌تونی عناصر تو‌در‌تو همراه با کلاس‌های موردنظر بسازی

🔹 ساخت سریع منو:
با نوشتن nav>ul>li*4>a می‌تونی ساختار اولیه‌ی یک منوی چهارگزینه‌ای رو ایجاد کنی

🔹 شماره‌گذاری خودکار کلاس‌ها:
با نوشتن div.item$*5 می‌تونی پنج عنصر با کلاس‌های item1 تا item5 بسازی

🔹 ساخت متن آزمایشی:
با نوشتن lorem10 می‌تونی به‌صورت خودکار ۱۰ کلمه متن آزمایشی ایجاد کنی

🔹 ساخت ورودی متنی:
با نوشتن input:text می‌تونی یک ورودی از نوع متن ایجاد کنی

🔹 ساخت ورودی ایمیل:
با نوشتن input:email می‌تونی یک ورودی مخصوص ایمیل بسازی

🔹 ساخت لینک با ویژگی:
با نوشتن a[href="#"] می‌تونی یک لینک همراه با ویژگی href ایجاد کنی

🔹 ساخت تصویر با ویژگی‌ها:
با نوشتن img[src="image.jpg"][alt="تصویر"] می‌تونی یک تصویر همراه با src و alt بسازی

🔹 ساخت چند عنصر تو‌در‌تو:
با نوشتن div.container>div.item*3 می‌تونی یک ساختار شامل سه عنصر مشابه ایجاد کنی