CodeTrail🚀

📅 چند متد کاربردی Date در JavaScript

کار با تاریخ توی JavaScript اولش یه کم گیج‌کننده به نظر میاد ولی چندتا متد هست که خیلی جاها واقعاً به کارت میاد 👇

🔹 "getTime()"
زمان رو به صورت تعداد میلی‌ثانیه از تاریخ ۱ ژانویه ۱۹۷۰ برمی‌گردونه
برای مقایسه تاریخ‌ها و محاسبه فاصله بین دو تاریخ خیلی کاربردیه

🔹 "toISOString()"
تاریخ رو به فرمت استاندارد ISO تبدیل می‌کنه
مخصوصاً وقتی با API کار می‌کنی خیلی به درد می‌خوره

🔹 "toLocaleDateString()"
تاریخ رو بر اساس زبان و منطقه کاربر نمایش میده
برای نمایش تاریخ به شکل قابل فهم برای کاربر گزینه خوبیه

🔹 "getDay()"
شماره روز هفته رو برمی‌گردونه
عدد "0" یعنی یکشنبه و عدد "6" یعنی شنبه

🔹 "getMonth()"
شماره ماه رو برمی‌گردونه ولی حواست باشه شمارش ماه‌ها از "0" شروع میشه
یعنی "0" برای ژانویه و "11" برای دسامبره

🔹 "setDate()"
روز ماه رو تغییر میده
جالب اینجاست که اگر عددی بیشتر از تعداد روزهای ماه بدی خودش وارد ماه بعد میشه

مثلاً 👇

const date = new Date()

date.setDate(35)

console.log(date)

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

📌 این متدها رو ذخیره کن چون موقع کار با تاریخ و API خیلی زود بهشون نیاز پیدا می‌کنی👌

📚 یک منبع مفید برای یادگیری JavaScript
اگر در حال یادگیری یا کار با JavaScript هستید، JavaScript.info می‌تونه یکی از منابع کاربردی برای یادگیری و مرور مطالب باشه
مطالب سایت از مباحث پایه شروع میشن و به موضوعات پیشرفته‌تری مثل Closure، Promise، async/await، Prototype و Event Loop می‌رسن
بخش‌هایی برای کار با DOM، رویدادها و APIهای مرورگر هم در سایت وجود داره
📌 یکی از نکات خوب این سایت، وجود نسخه فارسی مطالب هست که مطالعه بعضی مباحث رو راحت‌تر می‌کنه
🔗 javascript.info

این سایت رو ذخیره داشته باشید برای مرور یک مبحث یا پیدا کردن توضیح یک موضوع خاص، می‌تونه منبع مفیدی باشه

⚡ چند ترفند کاربردی Emmet در VS Code

اگر با HTML و CSS کار می‌کنی، ابزار Emmet می‌تونه کلی تایپ اضافه رو برات حذف کنه
چندتا از کاربردی‌ترین‌ها 👇

🔹 ساخت سریع ساختار 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 می‌تونی یک ساختار شامل سه عنصر مشابه ایجاد کنی

📌 این پست رو ذخیره کن
موقع کدنویسی HTML کلی تایپ اضافه رو ازت می‌گیره⌨

📍 یه قابلیت جالب JavaScript

می‌دونستی به‌جای اینکه آرایه‌ای از Objectها رو با ()console.log ببینی، می‌تونی خیلی تمیز به شکل جدول نمایش‌شون بدی؟

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

console.table(users);

⬅️ نتیجه: اطلاعات داخل Console به شکل یک جدول مرتب نمایش داده میشه

⬅️ این قابلیت موقع Debug کردن داده‌های API خیلی به درد می‌خوره، مخصوصاً وقتی تعداد Objectها زیاده

📌 اینو ذخیره کن، دفعه بعد که خواستی Object رو بررسی کنی، از ()console.table استفاده کن👌

💡JavaScript

چرا وقتی این کد رو اجرا می‌کنیم، ترتیب اعداد درست درنمیاد؟ 🤔

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

numbers.sort();

console.log(numbers);

نتیجه: → "[1, 10, 2, 20, 3]"

📍 دلیلش: → متد ()sort به‌صورت پیش‌فرض اعداد رو به شکل String در نظر می‌گیره و بعد اون‌ها رو مقایسه میکنه

یعنی مثلاً "10" از نظر مقایسه‌ی متنی قبل از "2" قرار می‌گیره، چون مقایسه از اولین کاراکتر شروع میشه

📍 راه‌حل: اگر می‌خوایم اعداد رو واقعاً به صورت عددی مرتب کنیم، باید روش مقایسه رو به ()sort بدیم:

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

📌 پس هر وقت خواستی یک آرایه از اعداد رو مرتب کنی، حواست باشه()sort به‌تنهایی ممکنه نتیجه‌ای که انتظار داری رو بهت نده

⭕️ اینو ذخیره کن، یه وقت وسط پروژه به کارت میاد👀

🔗https://t.me/codetrailWeb

💡 جواب چالش JavaScript 👆

⬅️ جواب false هست چون در JavaScript، Objectها و Arrayها با Reference مقایسه میشن، نه با محتوای داخلشون

⬅️ در این کد:

[] == []

هر [] یک Array جدید می‌سازه
یعنی هر کدوم به یک Object متفاوت در حافظه اشاره می‌کنن

⬅️ برای درک بهتر، این مثال رو ببینید:

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

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

⬅️حتی اگر محتویات کاملاً یکسان باشن، باز هم نتیجه false میشه:

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

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

⬅️ اما اگر هر دو متغیر به یک Array اشاره کنن، نتیجه "true" میشه:

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

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

⬅️ دلیلش اینه که اینجا "a" و "b" به یک Reference اشاره می‌کنن

📌 پس یادتون باشه: برای Objectها و Arrayها، یکسان بودن محتوا به معنی یکسان بودن Reference نیست

⚛️ نکته کاربردی React

⭕️ مشکل State

وقتی چند بار پشت‌سرهم به state قبلی وابسته هستید، استفاده مستقیم از مقدار state ممکنه نتیجه‌ای غیرمنتظره بده

📌 برای این حالت از Functional Update استفاده کنید:

setCount(prev => prev + 1);

مثلاً برای سه بار افزایش:

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

📌 این روش باعث میشه هر آپدیت، مقدار به‌روز قبلی رو دریافت کنه👌

🔗 https://t.me/codetrailWeb

بالاخره پیج اینستاگرام CodeTrail هم راه‌اندازی شد✨

اونجا هم قراره یه سری محتواهای متفاوت و جذاب منتشر کنم💻

📌 اگه دوست داشتید، خوشحال میشم در اینستاگرام هم همراهم باشید 🌱

🔗 https://www.instagram.com/helali.dev?igsi=MTB6YWVsenY1NDh0eA==

⌨ میانبر کاربردی و حرفه‌ای ویندوز

از مهم ترین کلید های میانبر Windows 👇

🔹 "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 مرورگر

📌 این پست رو برای خودت ذخیره کن و برای دوستات هم فوروارد کن🚀
🔗 https://t.me/codetrailWeb

💡HTML

📍 تأثیر "button" داخل "form" → اگر برای یک "button" مقدار "type" مشخص نکنید، مرورگر به‌صورت پیش‌فرض اون رو "submit" در نظر می‌گیره

📍 مشکل رایج → اگر دکمه فقط برای اجرای یک عملیات JavaScript باشه، ممکنه با کلیک روی اون فرم ناخواسته Submit بشه

📍 راه‌حل ساده → برای دکمه‌هایی که قرار نیست فرم رو ارسال کنن، "type="button"" قرار بدید:

<button type="button">

  باز کردن منو

</button>

🔹 دکمه ارسال فرم → برای ارسال اطلاعات فرم، از "type="submit"" استفاده کنید:

<button type="submit">

  ارسال فرم

</button>

📌 مشخص کردن "type" برای "button" جلوی رفتارهای ناخواسته در فرم‌ها رو می‌گیره

🔗 https://t.me/codetrailWeb

💡 متدهای کاربردی Array در JavaScript

آرایه‌ها یکی از پرکاربردترین ساختارها در JavaScript هستن و شناخت متدهای مختلفشون می‌تونه خیلی از کارها رو ساده‌تر کنه

برخی از متدهای مهم 👇

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


📌 این پست رو ذخیره یا فوروارد کنید، ممکنه موقع کدنویسی به کارتون بیاد❕

🔗 https://t.me/codetrailWeb

💡 رویدادها یکی از مهم‌ترین بخش‌های JavaScript برای واکنش به اتفاقاتی هستن که هنگام تعامل کاربر یا اجرای صفحه رخ میدن

برخی از رویداد های مهم👇

🔹 "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 → حرکت نشانگر، لمس یا قلم روی صفحه

🔗 https://t.me/codetrailWeb

.
.
خیلی از علامت‌هایی که هر روز توی کد استفاده می‌کنیم، اسم تخصصی دارن و دونستن اسمشون برای سرچ کردن و خوندن مستندات خیلی کاربردیه👌

`  → 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



📌 نکته: اسم دقیق بعضی نمادها با توجه به زبان برنامه‌نویسی و کاربردشون می‌تونه متفاوت باشه

⭕️ این پست رو برای هر برنامه‌نویسی که میشناسی بفرست تا یاد بگیرن⚡️

🔗 https://t.me/codetrailWeb

اسم تخصصی نمادهای برنامه‌نویسی⌨
.
.
.

🌐 پشت صحنه باز شدن یک سایت

وقتی آدرس یک سایت رو وارد می‌کنیم و Enter می‌زنیم، مرورگر فقط صفحه رو باز نمی‌کنه

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

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

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

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

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

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

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

🔗 https://t.me/codetrailWeb

🐸 یک نکته برای برنامه‌نویس‌ها

در کتاب قورباغه‌ات را قورت بده، یکی از ایده‌های اصلی اینه که سخت‌ترین و مهم‌ترین کار رو اول انجام بدی✅

این موضوع توی برنامه‌نویسی هم خیلی کاربردیه
اگر امروز قرار باشه JavaScript بخونی، پروژه تمرین کنی، Git یاد بگیری و چند ساعت هم آموزش ببینی، ممکنه آخر روز هیچ‌کدوم رو درست انجام نداده باشی

📌 بهتره اول مهم‌ترین کاری رو که بیشترین تأثیر رو روی پیشرفتت داره مشخص کنی و همون رو انجام بدی👌

مثلاً اگر هدفت یادگیری Javascript هست ، قبل از اینکه چند ساعت بین آموزش‌ها و ویدئوهای مختلف بچرخی، یک بخش مشخص از JavaScript رو انتخاب کن و همون روز عمیق یادش بگیر و باهاش تمرین کن

🎯 پیشرفت همیشه از انجام کارهای زیاد نمیاد، گاهی از انجام دادن مهم‌ترین کار در زمان درست میاد👌

🔗 https://t.me/codetrailWeb

💡 Soft Skills در مسیر Frontend

برای تبدیل شدن به یک برنامه نویس خوب، فقط یادگیری زبان های برنامه نویسی و فریمورک ها کافی نیست❕

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

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

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

⚪️ حل مسئله

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

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

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

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

⚪️ پذیرش Feedback

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

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

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

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

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

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

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

اگر فکر می‌کنید این نکته می‌تونه برای کسی که در مسیر یادگیری برنامه‌نویسیه مفید باشه، براش بفرستید 🌱

🔗 https://t.me/codetrailWeb

⚛️ React

پشت صحنه اجرای کدهای React چه اتفاقی می‌افته؟🤔

وقتی یک کامپوننت 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" می‌بینیم، پشت صحنه زنجیره‌ای از اتفاقاته


🔗 https://t.me/codetrailWeb
#Frontend

💡 Frontend Insight

⭕️ مفهوم Node.js ، npm ، vite

📌مفهوم 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 دارن