🔥 چرا از Template Literal استفاده کنیم؟

قبلاً برای چسبوندن متن‌ها این شکلی می‌نوشتیم:

let name = "Ali";

console.log("سلام " + name);


ولی الان یه راه تمیزتر داریم:

let name = "Ali";

console.log(`سلام ${name}`);



مزیتش چیه؟ 🤔

✅ خواناتر میشه.
✅ نوشتن متن‌های چندخطی راحت‌تره.
✅ دیگه لازم نیست هی از + استفاده کنی.
از ES6 به بعد، این روش استاندارد پروژه‌های جدیده.

#JavaScript #ES6

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

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

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

💸 پروژه فریلنسری بگیری

🏢 تو شرکت استخدام بشی

🌍 ریموت برای شرکت‌های خارجی کار کن
💰و درآمد خیلی خوبی داشته باش

فقط دوره دیدن کافی نیست؛ چیزی که کارفرما می‌خواد اینه که ببینه «بلدی کار انجام بدی».

از امروز شروع کن، پروژه بساز و نذار فرصت‌ها از کنارت رد بشن. 🚀

#فرانت_اند #برنامه_نویسی #React #JavaScript #استخدام #فریلنسری #توسعه_وب

⚡️ Arrow Function

به جای اینکه اینجوری بنویسی:

function sum(a, b) {
  return a + b;
}

میتونی خیلی خلاصه‌تر بنویسی:

const sum = (a, b) => a + b;

هم کد کوتاه‌تره، هم خواناتر.

📌 فقط یادت باشه Arrow Function همیشه جای Function معمولی رو نمی‌گیره و توی بحث this رفتار متفاوتی داره.

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

#JavaScript #Frontend

Props در React


Props
(مخفف Properties) راهی برای ارسال داده از کامپوننت والد به فرزند هستند.
مثال:

function Welcome(props) {
  return <h1>سلام {props.name}</h1>;
}

<Welcome name="علی" />

در این مثال مقدار علی از طریق name به کامپوننت ارسال شده است.

✅ Props
فقط برای دریافت داده هستند و نباید داخل کامپوننت تغییر کنند (Read Only).

تفاوت با State


Props → از والد دریافت می‌شود.

State → داخل خود کامپوننت مدیریت و تغییر می‌کند

#React #Frontend #JavaScript #برنامه_نویسی #فرانت_اند

رد شدن توی مصاحبه پایان راه نیست

تقریباً همه برنامه‌نویس‌ها چند بار توی مصاحبه رد شدن. هر مصاحبه یه تجربه جدیده که کمکت می‌کنه برای فرصت بعدی آماده‌تر باشی.

API
چیه و چرا باید یادش بگیری؟ 🌐

اگه فرانت‌اند کار می‌کنی و هنوز API رو خوب نفهمیدی، هیچی دیگه!

API
در واقع یه پل ارتباطیه بین سایت و سرور.

مثلاً وقتی اینستاگرام رو باز می‌کنی، عکس‌ها و پست‌ها از قبل داخل برنامه نیستن. برنامه یه درخواست (Request) به سرور می‌فرسته، سرور هم اطلاعات رو برمی‌گردونه (Response) و تو اون‌ها رو می‌بینی.

تقریباً هر چیزی که توی سایت می‌بینی، از API میاد:

✅ لیست محصولات فروشگاه
✅ اطلاعات کاربر
✅ پست‌های وبلاگ
✅ قیمت ارز و طلا
✅ وضعیت آب‌وهوا

اگه API رو یاد بگیری، می‌تونی سایت‌هایی بسازی که اطلاعاتشون همیشه به‌روز باشه، نه فقط چند تا متن و عکس ثابت!

#API #Frontend #JavaScript #React

REST API
یه استاندارد برای ارتباط بین فرانت‌اند و بک‌اند هست.

وقتی React یا هر فرانت‌اند دیگه‌ای اطلاعاتی مثل محصولات یا اطلاعات کاربر رو می‌خواد، معمولاً از طریق REST API درخواست می‌فرسته و جواب می‌گیره.

💾 LocalStorage
چیه؟

اگه بخوای یه سری اطلاعات رو داخل مرورگر کاربر ذخیره کنی تا حتی بعد از بستن تب یا مرورگر هم باقی بمونن، LocalStorage بهترین گزینه است.

مثلاً می‌تونی این موارد رو داخلش نگه داری:

✅ تنظیمات سایت (مثل حالت تاریک)
✅ زبان انتخابی کاربر
✅ اطلاعات غیرحساس

چند دستور پرکاربرد:

// ذخیره
localStorage.setItem("name", "Ali");

// دریافت
localStorage.getItem("name");

// حذف یک مقدار
localStorage.removeItem("name");

// پاک کردن همه
localStorage.clear();

⚠️ نکته مهم:

LocalStorage
جای مناسبی برای ذخیره اطلاعات حساس مثل رمز عبور یا JWT نیست؛ چون هر اسکریپتی که روی صفحه اجرا شود، می‌تواند به آن دسترسی داشته باشد.

#JavaScript #LocalStorage #Frontend #WebDevelopment