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

💾 LocalStorage
چیه؟

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

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

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

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

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

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

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

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

⚠️ نکته مهم:

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

#JavaScript #LocalStorage #Frontend #WebDevelopment

تا حالا شده بخوای مقادیر تکراری یک آرایه رو حذف کنی؟

❌ روش قدیمی:

const unique = arr.filter((item, index) => arr.indexOf(item) === index);

✅ روش مدرن با Set:

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = 
[...new Set(numbers)];

console.log(uniqueNumbers);
// [1, 2, 3, 4, 5]

چرا از Set استفاده کنیم؟

✅ کد کوتاه‌تر و خواناتر می‌شود.
✅ عملکرد بهتری روی آرایه‌های بزرگ دارد.
✅ یکی از قابلیت‌های کاربردی ES6 است که در پروژه‌های واقعی زیاد استفاده می‌شود.

💡 هر وقت خواستی مقادیر تکراری یک آرایه را حذف کنی، Set یکی از بهترین انتخاب‌هاست.

#JavaScript #ES6 #CodeTips #WebDevelopment #Programming #Frontend

💡 یه ترفند باحال برای دیباگ کردن

اگه تا حالا یه آرایه از آبجکت‌ها رو با console.log() چاپ کردی، حتماً دیدی خروجیش یه‌کم شلوغ و اعصاب‌خردکنه. 😅

به جاش اینو امتحان کن:

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




console.table(users);



👀 به‌جای یه خروجی شلوغ، همه‌چی رو توی یه جدول مرتب بهت نشون می‌ده.
📌 دفعه بعد که خواستی داده‌های API یا یه آرایه از آبجکت‌ها رو بررسی کنی، console.table() رو فراموش نکن. احتمالاً دیگه کمتر سراغ console.log() می‌ری. 😉

#JavaScript #Programming #CodeTips

🚀 ۵ افزونه کروم که هر برنامه‌نویس فرانت‌اند باید نصب داشته باشه

🛠 Wappalyzer با یه کلیک می‌فهمی هر سایتی با چه تکنولوژی‌هایی ساخته شده؛ از React و Next.js گرفته تا CMS و سرویس‌های Analytics.

🎨 ColorZilla رنگ هر بخش از هر سایتی رو بردار، گرادینت بساز و کد HEX یا RGB رو کپی کن.

📏 Dimensions فقط با نگه داشتن Alt، فاصله بین المان‌های صفحه رو اندازه بگیر؛ خیلی به درد پیاده‌سازی دقیق از روی دیزاین می‌خوره.

⚡ React Developer Tools اگه با React کار می‌کنی، این افزونه واجبه! کامپوننت‌ها، State و Props رو راحت بررسی و دیباگ کن.

🌐 JSONVue فایل‌های JSON رو به‌جای یه متن شلوغ، به‌صورت مرتب، رنگی و قابل جمع‌کردن نمایش می‌ده.

#Frontend #React #Chrome #ChromeExtensions #JavaScript #WebDevelopment #Developer #Programming #Nextjs

⚛️ قبل از شروع آموزش React اینا رو بلد باش.

نه در حد اینکه اسمشون رو شنیده باشی:

DOM
Event
Promise
async/await
Array Methods
Destructuring
Modules
Scope
Closure
Fetch API

چون React قرار نیست JavaScript رو برات یاد بگیره.

اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیده‌تر می‌کنه.

📌 این پست رو برای کسی بفرست که تازه می‌خواد React شروع کنه.

#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی

🤔 Library
و Framework چه فرقی دارن؟

خیلی ساده:

🔹 Library → تو تصمیم می‌گیری کِی ازش استفاده کنی.
🔹 Framework → ساختار و جریان کلی پروژه بیشتر توسط Framework
مشخص میشه.

مثلاً در دنیای Front-End:
React
معمولاً به‌عنوان Library شناخته میشه،

در حالی که Next.js یک Framework بر پایه React محسوب میشه.

📌 این تفاوت رو برای مصاحبه هم بلد باش.

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

💾 LocalStorage یا SessionStorage؟

🔹 localStorage اطلاعات بعد از بستن Browser هم باقی می‌مونه.

🔹 sessionStorage اطلاعات معمولاً با پایان Session همان Tab از بین میره.

مثلاً:
تنظیمات ساده کاربر → localStorage اطلاعات موقت یک Session → sessionStorage

⚠️ هیچ‌کدوم جای مناسبی برای نگهداری Secretهای حساس نیستن.

📌 این تفاوت ساده رو خوب یاد بگیر.

#JavaScript #WebStorage #LocalStorage #SessionStorage #فرانت_اند #برنامه_نویسی

چرا filter یکی از کاربردی‌ترین متدهای JavaScriptـه؟

فرض کن فقط می‌خوای کاربران بالای ۱۸ سال رو داشته باشی:

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





const adults = users.filter(user => user.age >= 18);



حالا:

console.log(adults);


خروجی:

[
  { name: "Ali", age: 22 },
  { name: "Reza", age: 25 }
]


یعنی filter میاد از بین آیتم‌های آرایه، فقط مواردی که شرطت رو پاس می‌کنن نگه می‌داره.

📌 این دقیقاً همون کاریه که توی پروژه‌های واقعی برای فیلتر محصولات، کاربران، سفارش‌ها و کلی داده دیگه انجام میدی.

#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی

اگه می‌خوای Frontend Developer بشی:

❌ هر روز دنبال Framework جدید نباش.

✅ JavaScript رو عمیق یاد بگیر.

چون Frameworkها عوض می‌شن؛
ولی JavaScript هنوز سر جاشه. 🔥

#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی