#reactjs #youtube #reactjs_tutorial

جلسه دوم دوره ReactJS - کامپوننت ها در ری‌اکت

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

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


توی این جلسه چیا قراره یادبگیریم ؟

1️⃣ - مزایای استفاده از کامپوننت ها در ری‌اکت جی‌اس

2️⃣ - تاریخچه کامپوننت ها

3️⃣ - نحوه پیاده سازی کامپوننت ها در ری‌اکت جی‌اس

4️⃣ - استفاده از props در کامپوننت ها

5️⃣ - تفاوت استفاده از کامپوننت به صورت Self-Closing و Open-Close 

6️⃣ - مینی پروژه کارد محصول در ری‌اکت جی‌اس با استفاده از کامپوننت ها


مشاهده ویدیو ▶️

ریپازیتوری گیت‌هاب پروژه این جلسه 🧑‍💻

جلسه قبلی

Channel | YouTube | Instagram

سلام و درود به همگی 👋

ما تصمیم گرفتیم از این به بعد داخل چنل کولی کد نکات کاربردی، آموزش‌های کوتاه و چلنج های مختلف رو هم پوشش بدیم تا بتونیم روز به روز بیشتر و بیشتر یاد بگیریم و باهم دیگه این مسیر جذاب رو طی بکنیم 🤩⚡

برای دسترسی به مطالب هم میتونید از هشتگ های زیر استفاده کنید و هشتگ های کلی مثل :

#javanoscript_tutorial, #reactjs_tutorial

جهت آموزش های جامع تر و ویدیویی استفاده میشه مثل دوره ری‌اکت جی‌اس، و هشتگ هایی مانند :

#javanoscript #reactjs #trick #js_challenge #reactjs_challenge #fun

برای مباحث مختصر و مفید تر استفاده میشه 😉

امیدوارم که از مطالب کانال نهایت استفاده رو ببرید 🔥

این هم @MohammadTazaroie آیدی من هستش، هر موردی بود درخدمتم، منتظر پیشنهادات و چالش های برنامه نویسی و انتقاداتتون هستم ❤️‍🔥

چنل یوتبمون رو هم حتما داشته باشید چون مصالب مهم و آموزش های مفیدی رو براتون میزاریم که مطمئنم به کارتون میاد :

https://youtube.com/@coolycode

#reactjs #youtube #reactjs_tutorial

جلسه سوم دوره ReactJS - استیت ها در React، به همراه مینی پروژه افزودن به سبد خرید

استیت یکی از مهم ترین مفاهیم در ری اکت هست و بدون وجود اون تقریبا توسعه اپلکیشین های تعاملی با ری اکت امکان پذیر نیست.

توی این ویدیو، به آموزش کامل استفاده از استیت ها در ری اکت جی اس می‌پردازیم و استیت هارو به صورت کامل مورد بررسی قرار میدیم‌ و تمام نکات کلیدی استیت ها رو به همراه یک مینی پروژه کاربردی یاد میگیریم ⚡


توی این جلسه چیا قراره یادبگیریم ؟

1️⃣ - استیت ها چی هستند داخل ReactJS و چه ویژگی هایی دارند ؟

2️⃣ - نحوه استفاده از استیت ها ReactJS

3️⃣ - مینی پروژه دکمه افزودن به سبد خرید با استفاده از استیت ها

مشاهده ویدیو ▶️

ریپازیتوری گیت‌هاب پروژه این جلسه 🧑‍💻

جلسه قبلی

Channel | YouTube | Instagram

#WhatsThat #reactjs

ویر‌چوال دام چیست ؟ 🚀

اگر با ReactJS کار کرده باشید، احتمالا اسم ویرچوال دام ( VirtualDOM ) رو زیاد شنیده باشید

توی این ویدیو به صورت کامل بهتون توضیح دادم که ویرچوال دام چیه و چه کاری برای ما انجام میده ؟

📷 مشاهده در اینستاگرام

Channel | YouTube | Instagram

#reactjs #NEWPost

سه تا فکت جالب در مورد React Js 😉🔥


برای حمایت بیشتر میتونید از پیج اینستا مشاهده کنید :
https://www.instagram.com/reel/C9plLPrM5fE/?igsh=dnFicnZja2V5Y2Qz

Channel | YouTube | Instagram

#NEWPost

این ویدیو دلی بود امیدوارم که خوشتون بیاد ؛)

بالاخره یکی باید نشون میداد که برنامه نویسا همش تو یه اتاق تاریک با یه فنجون قهوه کد نمیزنن 😎😂

https://www.instagram.com/reel/C90OYbmMxgL

Channel | YouTube | Instagram

#tools #website #css #grid #tailwind

● با این سایتا لنگ گرید نمیمونی ●

وقتی با گرید در CSS کار می‌کنیم، خیلی پیش میاد که بعضی از پروپرتی های مهم رو فراموش کنیم و نتونیم طرحی که در ذهن خودمون داریم رو به درست ایجاد کنیم 🫠

میخوام سه تا سایت جالب بهتون معرفی بکنم که میتونید خیلی ساده با UI خوبی که براتون آماده کردند Grid مد نظر خودتون رو پیاده سازی کنید 😎

1️⃣ https://cssgrid-generator.netlify.app

2️⃣ https://grid.layoutit.com

3️⃣ https://visual-grid-generator.netlify.app

اگر هم دوست داشتید به طور کامل تر در مورد Grid داخل CSS اطلاعات کسب کنید میتونید از طریق داکیومنت زیر اقدام کنید 📄

https://learncssgrid.com


البته هنوز تموم نشده، اگر از tailwind استفاده میکنید میتونید از سایت tailwindgen استفاده بکنید که میاد گرید دلخواهتون رو با استفاده از class های tailwind براتون ایجاد میکنه و با فرمت HTML یا JSX خروجی رو براتون می‌فرسته 🤩 🔥

https://www.tailwindgen.com


Channel | YouTube | Instagram

اگر نیاز دارید که خیلی سریع کد های خودتون
رو بدون نیاز به هیچ نیازمندی خاصی به صورت آنلاین اجرا کنید و خروجیش رو در لحظه ببینید میتونید از سایت JSFiddle استفاده کنید ⚡

#javanoscript | #website

✅ با این سایت میتونید در عین سادگی خروجی کدتون رو خیلی سریع و در لحظه ببینید، که می‌تونه برای :

آموزش، تست کد و دیباگ کردن

بسیار کارآمد باشه 🤩

نحوه استفاده ازش هم خیلی ساده هست و فقط کافیه که وارد سایت JSFiddle بشید و Boilerplate ( متن/کد از پیش تعریف شده ) مد نظرتون رو انتخاب کنید مثل Typenoscript ,Reactjs و Sass و شروع کنید به کد زدن و در نهایت هم از بالای صفحه کدتون رو ران بکنید 💥

برای اشتراک گذاری آنلاین کدتون هم کافیه که روی دکمه Fork بالای صفحه کلیک کنید تا لینک اختصاصی خودتون رو بسازه 👀

یک سری قابلیت های پولی هم داره که میتونید داخل خود سایت JSFiddle مشاهده بکنید 🔗

Channel | YouTube | Instagram

#javanoscript #tricks

یکی از روش های جالب و سریع تبدیل Number به String داخل جاوااسکریپت به این شکل هست که میایم و یک عدد رو با یک رشته خالی جمع میکنیم.

5 + ' '  -->‌ ‌  ' 5 '

با این کار در واقع داریم عدد 5 رو به یک رشته خالی (' ') اضافه می‌کنیم.

حالا چرا این اتفاق می‌افته ؟ 🤔

جاوا اسکریپت یک زبان برنامه‌نویسی Dynamic Type هست و این به این معنی هست که نوع یک متغیر در زمان اجرا تعیین می‌شود و جاوا اسکریپت به طور خودکار تلاش می‌کنه تا انواع مختلف داده‌ها رو با هم سازگار کنه.
داخل جاوا اسکریپت، وقتی عملگر + بین دو رشته استفاده می‌شود، عمل الحاق (concatenation) انجام میشه؛ یعنی دو رشته به هم چسبیده و یک رشته جدید ایجاد می‌کنند.

حالا تبدیل عدد به رشته به چه شکلی اتفاق میفته ؟

وقتی یک عدد با یک رشته جمع می‌شود، جاوا اسکریپت به طور خودکار عدد رو به یک رشته تبدیل می‌کنه و سپس دو رشته رو به هم الحاق می‌ده.

⚡ نتیجه نهایی

در عبارت 5 + ' '، عدد 5 به رشته "5" تبدیل می‌شود و سپس به رشته خالی " " الحاق می‌شود. در نتیجه، خروجی عبارت "5" خواهد بود.

💥 مثال‌های دیگر

'Hello' + ' World' -> "Hello World"
'My age is ' + 30 -> "My age is 30"

کاربرد این روش 🚀

در کل این روش معمولاً برای ایجاد رشته‌های دینامیک استفاده میشه. ولی برای تبدیل عدد به رشته هم میتونید ازش استفاده بکنید 😉

Channel | YouTube | Instagram

#javanoscript #trcks

* حذف آیتم از Object داخل جاوااسکریپت *

برای حذف یک آیتم از آبجکت داخل جاوااسکریپت میتونید از عملگر delete استفاده کنید.

نحوه استفاده ازشم به این شکل هست که ابتدا عملگر delete رو مینویسید و بعد از اون property که میخواهید حذف کنید رو از آبجکت مد نظرتون سلکت میکنید طبق مثال زیر 👇👇👇

const user = {
   firstName: "Ali",
   lastName: "Asadi",
   email: "coolycode.dev@gmail.com"
}

delete user.email

console.log(user) // -> { firstName: "Ali", lastName: "Asadi", }

Channel | YouTube | Instagram

آیا وبسایت javanoscript.info رو میشناسید ؟

#javanoscript #website

●● معرفی وبسایت javnoscript.info ●●

اگر با زبان برنامه نویسی JavaScript کار میکنید احتمالا اسم این سایت رو زیاد شنیده باشید. javnoscript.info یک منبع آنلاینِ رایگان، جامع و تعاملی برای یادگیری زبان برنامه‌نویسی جاوااسکریپت است. این وب‌سایت به شما کمک می‌کند تا مفاهیم جاوااسکریپت را به صورت ساده و روان یاد بگیرید.

ویژگی‌های کلیدی این وب‌سایت‌ 🚀

➊ محتوای باکیفیت: مطالب این وب‌سایت به‌روز هستند و با استانداردهای جدید جاوااسکریپت مطابقت دارند. 💯

➋ زبان ساده: مفاهیم به زبانی ساده و قابل فهم توضیح داده شده‌اند تا برای مبتدیان و افراد با تجربه مناسب باشد.

➌ تعاملی بودن: می‌توانید مستقیماً در مرورگر خود کد بنویسید و نتیجه را ببینید تا درک بهتری از مفاهیم پیدا کنید.

➍ چندزبانه بودن: این وب‌سایت به زبان‌های مختلف از جمله فارسی ترجمه شده است. ( مشاهده ترجمه فارسی وبسایت ) 🌐

چه کسانی می‌توانند از این وب‌سایت استفاده کنند ؟ 🤔

➊ مبتدیان: اگر هیچ تجربه قبلی در برنامه‌نویسی ندارید، این وب‌سایت می‌تواند شروع خوبی برای شما باشد.

➋ برنامه‌نویسان با تجربه: اگر قبلاً با جاوااسکریپت کار کرده‌اید، می‌توانید از این وب‌سایت برای یادگیری مفاهیم پیشرفته‌تر یا مرور مفاهیم قبلی استفاده کنید.

💢 برای عمیق شدن توی زبان جاوااسکریپت هم میتونه بسیار کمک کننده باشه. ⚡

✅ در کل javnoscript.info یک منبع ارزشمند برای هر کسی است که می‌خواهد جاوااسکریپت یاد بگیرد.

Channel | YouTube | Instagram

#chalange #js_challenge

CHALLENGE ❓

const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'b', { value: 3, writable: false });

obj.b = 4;
console.log(obj.b);

* عوامل موثر توی علاقه ما به برنامه نویسی *

اگر میخواید برنامه نویسی رو شروع کنید پیشنهاد میکنم این ویدیو رو ببینید 🚀

مشاهده در پیج اینستاگرام کولی کد

#NEWPost
Channel | YouTube | Instagram

#اطلاع_رسانی قرار بود امروز تحلیل چالشی که داشتیم رو هم بزاریم ولی متاسفانه به دلیل کندی نت تا الان درگیر اپلود این بزرگوار بودم 😂🤦🏼‍♂️

ایشالا فردا پر قدرت میریم برای تحلیل متد defineProperty 🚀

#WhatsThat #javanoscript #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part1

یکی از روش‌های قدرتمند در جاوااسکریپت برای تعریف یا تغییر ویژگی‌های یک شیء به صورت دقیق و کنترل شده Object.defineProperty است. با استفاده از این متد، می‌توانید ویژگی‌های جدیدی به یک آبجکت اضافه کنید یا ویژگی‌های موجود را تغییر دهید و حتی رفتارهای سفارشی مدنظر خودتون رو برای آن‌ها تعریف کنید.

ویژگی های کلیدی Object.defineProperty 🚀

➊ کنترل کامل بر روی ویژگی‌ها : شما می‌توانید مشخص کنید که آیا یک ویژگی قابل خواندن، نوشتن یا حذف شدن است یا خیر.

➋ تعریف getter و setter : می‌توانید فانکشنالیتی کاستوم خودتون رو برای خواندن (getter) و نوشتن (setter) مقدار یک ویژگی تعریف کنید. این به شما اجازه می‌دهد تا عملیات پیچیده‌تری را قبل یا بعد از تغییر مقدار یک ویژگی انجام دهید.

➌ ایجاد ویژگی‌های غیر قابل تغییر : می‌توانید ویژگی‌هایی ایجاد کنید که پس از مقداردهی اولیه قابل تغییر نباشند ( در چالش قبلی از این این ویژگی استفاده شده بود ).

➍ بهینه سازی عملکرد : در برخی موارد، استفاده از Object.defineProperty می‌تواند به بهبود عملکرد کد کمک کند.

✅ ساختار کلی Object.defineProperty

Object.defineProperty(obj, prop, denoscriptor);

1️⃣ obj : آبجکتی که می‌خواهید ویژگی آن را تعریف یا تغییر دهید.

2️⃣ prop : نام ویژگی‌ای که می‌خواهید تعریف کنید.

3️⃣ denoscriptor : یک آبجکت که ویژگی‌های مورد نظر برای ویژگی جدید را توصیف می‌کند.

⚡ در کل Object.defineProperty یک ابزار قدرتمند برای کنترل دقیق پروپرتی‌ها در جاوا اسکریپت است. با درک کامل این متد، می‌توانید کدهای تمیزتر و انعطاف‌پذیرتری بنویسید. هدف این پست صرفا معرفی این متد بود، توی پست های بعدی به صورت جزئی بخش های جزئی و حرفه ای تر این متد رو بررسی میکنیم ✅

⚠️ ( حتما به این نکته توجه کنید که استفاده بیش از حد از Object.defineProperty می‌تواند کد را پیچیده‌تر کند. بنابراین، بهتر است از آن در مواردی استفاده کنید که واقعا نیاز به کنترل دقیق بر روی ویژگی‌های یک شیء دارید )

Channel | YouTube | Instagram

#fun

وقتی 6 ساعته داری کد میزنی ولی بازم کدت درست کار نمیکنه :

Channel | YouTube | Instagram

#tools #website #api #fake_api

💎 معرفی وبسایت 💎

اگر front-end دولوپر هستید و نیاز به api با دیتای فارسی دارید برای ساخت نمونه کار و پروژه های تمرینی خودتون میتونید از وبسایت http://iransweb.com استفاده کنید که توسط یکی از هموطن های خوبمون ساخته شده 🤞🚀


به درد کیا میخوره ؟ 🤔

این وبسایت برای افرادی که نیاز به api فارسی دارند برای پروژه های خودشون میتونه گزینه بسیار خوبی باشه زیرا دسته بندی های مختلفی را مانند فروشگاه موبایل، قهوه، پوشاک و ... را برای api ها در نظر گرفته که تنوع خوبی ایجاد میکنه برای استفاده شما 🔥

این هم پست لینکدین سجاد عزیز، سازنده این وبسایت هست که میتونید برای حمایت از ایشون از صفحه خودشون وارد سایت بشید ⚡

Channel | YouTube | Instagram

#javanoscript #js_trick #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part2

توی پارت قبلی به معرفی متد Object.defineProperty پرداختیم و ویژگی های کلیدی و ارگومان های مختلف این متد رو بررسی کردیم :

obj | prop | denoscriptor

و متوجه شدیم که با آرگومان denoscriptor میتونیم یسری ویژگی های جدید رو به پروپرتی خودمون اضافه کنیم تا کنترل بهتری روی پروپرتی خودمون داشته باشیم، حالا توی این پارت قراره که به صورت جزئی تر به مقادیر آرگومان denoscriptor بپردازیم و دونه به دونه با هم دیگه بررسی‌شان کنیم ⚡


مقادیر آرگومان denoscriptor 🚀

➊ value : مقدار اولیه ویژگی.

➋ configurable : مقدار بولینی که مشخص می‌کند آیا می‌توان ویژگی را حذف کرد یا تعریف آن را تغییر داد. 🛑🔁

➌ enumerable : یک مقدار بولین که مشخص می‌کند آیا ویژگی در یک حلقه for...in ظاهر می‌شود یا خیر. 👁️‍🗨️

➍ writable : یک مقدار بولین که مشخص می‌کند آیا می‌توان مقدار ویژگی را تغییر داد. 📝

➎ get : یک تابع که بعنوان گِتِر برای پروپرتی ما عمل میکند.

➏ set : یک تابع که به عنوان سِتِر برای پروپرتی ما عمل می‌کند.

✅ مثال عملی :

const person = {};

Object.defineProperty(person, 'name', {
  value: 'علی',
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(person.name); // خروجی: علی

person.name = 'حسن' ;

ℹ️ در این مثال، ما یک ویژگی جدید به نام name با مقدار اولیه علی به آبجکت person اضافه کردیم. همچنین مشخص کردیم که این ویژگی قابل تغییر نیست، در حلقه‌های for...in قابل مشاهده است و نمی‌توان آن را حذف کرد.

⚠️ در نتیجه خط اخر با خطا مواجه میشود زیرا ویژگی writable را برابر با false قرار دادیم و پروپرتی name قابل تغییر نیست.

💥 توی پارت بعدی که پارت پایانی هستش درمورد دو پروپرتی set و get در denoscriptor به صورت کامل صحبت میکنیم و به صورت جزئی به بررسی این دو ویژگی می‌پردازیم ☕

Channel | YouTube | Instagram