⚛️ قبل از شروع آموزش 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 #برنامه_نویسی

فرق slice و splice رو قاطی نکن!

این دو تا اسمشون شبیه همدیگه‌ست ولی رفتار متفاوتی دارن.




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

numbers.slice(1, 3);



خروجی:




[2, 3]  



و Array اصلی تغییر نمی‌کنه.
اما:




numbers.splice(1, 2);



آیتم‌ها رو از خود Array حذف می‌کنه.
📌 خلاصه:

slice → بخشی از Array رو برمی‌داره،
بدون تغییر اصل آرایه

splice → خود Array رو تغییر میده

#JavaScript #Array #JS #Frontend
#Programming

🔥 ۷ چیزی که قبل از استخدام شدن به‌عنوان Frontend Developer باید بلد باشی

Git و GitHub
کار با API
Authentication
مدیریت State
Error Handling
Debugging
Deploy کردن پروژه

ولی نکته اینجاست 👇
خیلی‌ها اینا رو تئوری بلدن.

ولی وقتی میگی:
«خب حالا یه پروژه از صفر بساز.»

اینجاست که تفاوت بلد بودن و تونستن مشخص میشه.

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

#برنامه_نویسی #فرانت_اند #جاوااسکریپت #Frontend #JavaScript #React #Git #GitHub #برنامه_نویس #بازار_کار #استخدام #Codelines

🔥 این ترفند JavaScript رو خیلی‌ها نمی‌دونن

فرض کن اینو داری:

const user = {
  name: "Ali",
  age: 22
};



می‌خوای name رو ازش بگیری.
احتمالاً می‌نویسی:

const name = user.name;



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

const { name } = user;



این قابلیت اسمش Destructuringـه.

حتی می‌تونی چندتا مقدار بگیری:

const { name, age } = user;



و جالب‌تر اینکه می‌تونی اسم متغیر رو هم عوض کنی:

const { name: username } = user;





console.log(username);



📌 اینو زیاد توی React، کار با API و پروژه‌های واقعی می‌بینی.
اگر JavaScript می‌زنی، Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.

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

🔥 ۵ قابلیت JavaScript که کدت رو تمیزتر می‌کنه

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

1. Optional Chaining



user?.profile?.name



2. Nullish Coalescing



const name = user.name ?? "Guest";



3. Destructuring



const { name, age } = user;



4. Spread



const newUser = { ...user, age: 25 };



5. Default Parameter



function greet(name = "Guest") {}



📌 اینا چیزهای کوچیکین، ولی توی پروژه‌های واقعی خیلی زیاد استفاده میشن.

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

🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

قبل از اینکه این دستور رو بزنی:
git push

اینارو ببین:

☑️ console.log
اضافی نداری؟

☑️ فایل .env اشتباهی Push نمی‌شه؟

☑️ Error
توی Console نداری؟

☑️ اسم متغیرهای تستی باقی نمونده؟

☑️ پروژه روی سیستم خودت واقعاً کار می‌کنه؟

همین ۳۰ ثانیه می‌تونه جلوی یک دردسر واقعی رو بگیره.

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines

🚨 ۵ موردی که قبل از Push کردن کدت باید چک کنی

قبل از اینکه این دستور رو بزنی:
git push

اینارو ببین:

☑️ console.log
اضافی نداری؟

☑️ فایل .env اشتباهی Push نمی‌شه؟

☑️ Error
توی Console نداری؟

☑️ اسم متغیرهای تستی باقی نمونده؟

☑️ پروژه روی سیستم خودت واقعاً کار می‌کنه؟

همین ۳۰ ثانیه می‌تونه جلوی یک دردسر واقعی رو بگیره.

#Git #GitHub #Programming #Developer #Frontend #JavaScript #کدنویسی #Codelines

🔥 این ترفند JavaScript رو خیلی‌ها نمی‌دونن

فرض کن اینو داری:

const user = {
  name: "Ali",
  age: 22
};



می‌خوای name رو ازش بگیری.
احتمالاً می‌نویسی:

const name = user.name;



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

const { name } = user;



این قابلیت اسمش Destructuringـه.

حتی می‌تونی چندتا مقدار بگیری:

const { name, age } = user;



و جالب‌تر اینکه می‌تونی اسم متغیر رو هم عوض کنی:

const { name: username } = user;





console.log(username);



📌 اینو زیاد توی React، کار با API و پروژه‌های واقعی می‌بینی.
اگر JavaScript می‌زنی، Destructuring از اون چیزهاییه که باید واقعاً بلد باشی، نه فقط اسمش رو شنیده باشی.

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

چرا 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 #برنامه_نویسی #کدنویسی

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines

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

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

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

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

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

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

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

⚡️ Arrow Function

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

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

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

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

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

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

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

#JavaScript #Frontend