const [user, setUser] = useState({
  name: "Fateme"
});

user.name = "Sara";

setUser({
  ...user,
  name: "Sara"
});

const a = [1, 2, 3];
const b = a.map(Number);

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

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

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

.card {
  content-visibility: auto;
}

بعضی از مهم ترین Extension های Vscode 👇

📍شروع پروژه
git init

📍وضعیت فایل‌ها
git status

📍اضافه کردن فایل‌ها
git add .

📍ثبت تغییرات
git commit -m "message"

📍فرستادن تغییرات به GitHub
git push

📍دریافت تغییرات
git pull

📍دریافت یک Repository
git clone <repository-url>

📍ساخت Branch
git branch <branch-name>

📍جابه‌جایی بین Branchها
git switch <branch-name>

📍ساخت و ورود همزمان به Branch
git switch -c <branch-name>

📍دیدن Branchها
git branch

📍ادغام Branch
git merge <branch-name>

📍دیدن تاریخچه Commitها
git log

📍دیدن تغییرات
git diff

📍برگرداندن فایل به آخرین Commit
git restore <file>

برای فهمیدن این موضوع، باید با چند مفهوم مهم آشنا بشیم:
🔹 Call Stack
🔹 Web APIs
🔹 Task Queue
🔹 Event Loop
━━━━━━━━━━━━━━
🔹 ۱. Call Stack

محلیه که کدهای معمولی JavaScript برای اجرا واردش می‌شن

مثلاً:

console.log("A");

setTimeout(() => {
  console.log("B");
}, 1000);

console.log("C");

ابتدا "A" اجرا می‌شه
بعد "setTimeout" اجرا می‌شه، اما JavaScript برای یک ثانیه منتظر نمی‌مونه
مرورگر مدیریت Timer رو بر عهده می‌گیره و JavaScript می‌ره سراغ دستور بعدی

در نتیجه "C" هم اجرا می‌شه
━━━━━━━━━━━━━━
🔹 ۲. Web APIs
بعضی قابلیت‌ها مستقیماً توسط موتور JavaScript انجام نمی‌شن و محیط مرورگر مدیریت‌شون می‌کنه.
مثلاً:
⏱️ "setTimeout" و "setInterval"
🌐 درخواست‌های شبکه مثل "fetch"
🖱️ رویدادهایی مثل کلیک و تایپ
📍 بعضی قابلیت‌های مرورگر مثل Geolocation
━━━━━━━━━━━━━━
🔹 ۳. Task Queue
وقتی کارهایی مثل Timer آماده اجرا می‌شن، Callback اون‌ها در صف منتظر می‌مونه
در مثال ما، بعد از یک ثانیه:
console.log("B");
آماده اجرا می‌شه و منتظر می‌مونه
━━━━━━━━━━━━━━
🔹 ۴. Event Loop
اینجا Event Loop وارد ماجرا می‌شه
Event Loop مرتب بررسی می‌کنه:
«آیا Call Stack خالیه؟»
اگر خالی باشه و کاری در صف منتظر اجرا باشه، اون کار رو وارد Call Stack می‌کنه
بعد JavaScript اون رو اجرا می‌کنه
پس در نهایت:
A
C
B

📌 خلاصه:

Call Stack → محل اجرای کدها

Web APIs → مدیریت بعضی قابلیت‌های مرورگر

Task Queue → صف کارهای آماده اجرا

Event Loop → هماهنگ‌کننده انتقال کارها به Call Stack

نکته مهم اینه که Event Loop خودش کد رو اجرا نمی‌کنه؛ فقط زمان مناسب ورود کارهای آماده به Call Stack رو هماهنگ می‌کنه

📌مفهوم 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 → پاسخ سرور → پردازش مرورگر → نمایش صفحه

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