در سه ماه آینده سه پلی لیست React و Angular و Vue رو میخوام تکمیل بکنم با React شروع میکنم بعد انگولار و ویو. دوست دارم در کنار مفاهیم اصلی، پروژه متوسطی رو هم با هم ببریم جلو.این پروژه غیر از مینی ترلو خواهد. خوشحال میشم که این پروژه رو شما پیشنهاد بدید که چی باشه.

جلسه هشتم React - Props

در این ویدیو از آموزش React به این سوال پاسخ دادیم که Props چیست و چکونه استفاده می شود؟ برای این منظور ابتدا به بررسی مفهوم mutation و immutable پرداختیم و ضرورت جلوگیری از تغییر داده های به اشتراک گذاشته شده را بررسی کردیم سپس اولین class component را در react ایجاد کردیم.

https://youtu.be/1fyQFbAvuj4

جلسه نهم:
در این ویدیو از آموزش React به بررسی Prop Type ها و شیوه تعریف آنها پرداختیم


https://youtu.be/1lZDhEBALT0

جلسه دهم آموزش ری اکت
در این ویدیو از پلی لیست آموزش ری اکت به این سوال پاسخ دادیم State چیست؟ در کلاس کامپوننت‌های React چگونه تعریف می‌شوند و این تغییر چگونه باعث به‌روز رسانی UI می شود.


https://youtu.be/RD_v2BeoorM

آموزش ری اکت - React Component Lifecycle
در این ویدیو از پلی لیست آموزش ری اکت به بررسی React Component Lifecycle پرداختیم و فرایندی که React برای mount و update و unmount کامپوننت ها انجام می دهد را بررسی کردیم. در نهایت مثالی را برای استفاده از متدهای React Component Lifecycle را به منظور جلوگیری از بروز Memory leak در برنامه بررسی کردیم.


https://youtu.be/dhanlo63kpg

مصاحبه فنی جاوا اسکریپت: Closure چیست؟

در اغلب مصاحبه‌های فنی جاوا اسکریپت سوالی مطرح می شود که Closure چیست؟ در این ویدیو با یک مثال ساده مفهوم Closure رو توضیح دادیم و چند مورد از کاربردهای آن را مطرح کردیم

https://youtu.be/YxiVCSNlC7E

آموزش ری اکت - React Function Components With TypeScript


در این ویدیو از آموزش ری اکت به بررسی و ساخت کامپوننت های React بوسیله TypeScript پرداختیم و مبانی تعریف نوع برای props های کامپوننت ها را مطرح کردیم. React Function Components With TypeScript اولین گام در شروع کار به react مدرن است.

https://youtu.be/WuC-WH8acD8

در این ویدیو از پلی لیست مصاحبه فنی #javascript و #typescript به بررسی کاربرد Map Reduce پرداختیم. map و reduce دو تابع مستقل در جاوا اسکریپت هستند که برای درک بهتر کاربرد آنها مثالی را برای شمارش تکرار کلمات در حجم زیاد را بررسی کردیم.

https://youtu.be/7THZrV8a6fo

در اغلب مصاحبه های فنی جنگو سوال کاربرد select_related پرسیده می‌شود با این وجو اغلب اهمیت این فانکشن نادیده گرفته می شود. عدم استفاده ویژگی مهم select_related در Django ORM میتواند تاثیر منفی سنگینی در اپلیکیشن داشته باشد. در این ویدیو کوتاه با یک مثال ساده سعی کردم تفاوت استفاده و عدم استفاده از django select_related را توضیح دهم

Video Link: https://youtu.be/TK3P4Cy5fNg

یادآوری ذکر شده در ویدیو:
** همه چیز در مورد لاگ زدن در پایتون - Python Logging
https://youtu.be/32l7Wogtsxk

** پیکربندی لاگ زدن در جنگو - django logging
https://youtu.be/LGatKmpL7k8


〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در اغلب مصاحبه های فنی جنگو سوال کاربرد prefetch_related پرسیده می‌شود با این وجود اغلب اهمیت این فانکشن نادیده گرفته می شود. عدم استفاده ویژگی مهم prefetch_related در Django ORM میتواند تاثیر منفی سنگینی در اپلیکیشن داشته باشد. در این ویدیو با یک مثال ساده سعی کردم تفاوت استفاده و عدم استفاده از django prefetch_related را توضیح دهم

Video Link: https://youtu.be/lkThOygE8LM

** پلی لیست نکته ها و ترفندهای جنگو:
https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwdrfdaoOqbYev3_ocuBOfv

** کلاس آنلاین آموزش جنگو
https://www.youtube.com/playlist?list=PLJ9zDGwhhsByH5tcpM9H3VzdHYpne3bSa


〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

بهینه سازی جنگو از طریق defer و only

در ادامه بحث بهینه سازی جنگو در این ویدیو ابتدا به بررسی شیوه ترکیب prefetch_related و select_related در Django برای روابط سطوح بالاتر پرداختیم سپس برای جداول بزرگ کاربرد تابع های only و defer را بررسی گردیم که میتوان بر اساس آن حجم داده های خروجی را کنترل کرد.

Video Link: https://youtu.be/u629fDW5drM

Django Tips Playlist:
https://www.youtube.com/playlist?list=PLJ9zDGwhhsBwdrfdaoOqbYev3_ocuBOfv


〰️〰️〰️〰️〰️〰️
© @microfrontend_ir

جلسه سیزدهم آموزش ری اکت:‌useState Hook

در این ویدیو از آموزش React به بررسی useState Hook پرداختیم. ابتدا اصول اولیه استفاده از هوک ها را بررسی سپس شیوه تعریف هوک useState و شیوه به روزرسانی مقادیر و خطاهای احتمالی در استفاده از هوک ‌را بررسی کردیم

https://youtu.be/81rf5iVyEm4

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش ری‌ اکت :‌ کاربرد React useState Hook



در این ویدیو از آموزش ری اکت به بررسی کاربرد React useState Hook پرداختیم. برای این منظور به عنوان یک مثال ساده یک دفتر تلفن ساده را طراحی کردیم که امکان مشاهده و ایجاد کردن آیتم و همچنین مرتب سازی آیتم ها را دارد. همچنین مفاهیمی همچون دیتا مدلینگ و تعریف توابع callback و typescript را بررسی کردیم.


https://youtu.be/jf2Lzz0I-bA

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

useReducer React Hook - آموزش React

در این ویدیو از آموزش React به بررسی useReducer Hook پرداختیم. ابتدا به بررسی شیوه نگرش و برنامه نویسی react از طریق مفهوم reducer پرداختیم و با یک مثال ساده سعی کردیم این شیوه را توضیح دهیم. مهمترین مساله در این شیوه جداسازی منطق برنامه از واسط کاربری است

https://youtu.be/0blUIenkf6E

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

در این ویدیو از آموزش ری اکت به بررسی کاربرد React useReducer Hook پرداختیم. برای این منظور به عنوان یک مثال ساده لیستی از نوت ‌ها را با امکان اضافه و حذف کردن ایجاد کردیم. تمرکز اصلی در این ویدیو بر روی شیوه تعریف action ها و reducer با زبان typescript است.


https://youtu.be/oWEjKYW2HoU
〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

React Custom Hooks - آموزش ری اکت

در این ویدیو از آموزش ری اکت به بررسی React Custom Hooks پرداختیم. و در ادامه ویدیو قبل برای اضافه کردن امکان undo و redo کردن اکشن ها یک تابع مرتبه بالاتر یا Higher Order Function ایجاد و بر اساس آن یک Custom Hook در ریاکت ایجاد کردیم که با استفاده از آن میتوان به هر کامپوننت دلخواه با state های متفاوت امکان undo و redo را اضافه کنیم.

https://youtu.be/X0GhyXSuxHs

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش ری اکت - بررسی انواع Effect در React

در این ویدیو از آموزش ری اکت به بررسی انواع Effect در React پرداختیم. ری اکت به تمام اتفاقاتی که در روند اجرا برایش اتفاق می افتد مجموعه از از Effect ها را ایجاد و مدیریت میکند و به برنامه نویس اجازه می دهد Effect های خودش را برای مدیریت Side Effect ها تعریف کند. ابتدا مراحل و فازهای اجرا و به روزسانی برنامه در React.js را بررسی و دو هوک useEffect و useLayoutEffect را معرفی کردیم

https://youtu.be/3pBAhgvMUW0

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React useEffect Hook

در این ویدیو از سری آموزش ریاکت به بررسی و آموزش React useEffect Hook پرداختیم. useEffect مکانیزم مدیریت منابع خارجی و Side Effect هاست. روش‌های مختلفی از استفاده از هوک useEffect قابل پیاده سازی است. اجرا به ازای هر رندر، اجرا بعد از اولین ماونت و اجرا وابسته به مقادیر و نهایتا cleanup کردن منابع. در انتهای ویدیو هم بامثالی شیوه گرفتن ابعاد صفحه از طریق useEffect را بررسی کردیم.

https://youtu.be/e4_9IHQFwSk

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش ری اکت - بررسی وضعیت اتصال شبکه به کمک React useEffect Hook

در این ویدیو آموزش ری اکت - بررسی وضعیت اتصال شبکه به کمک React useEffect Hook پرداختیم. برای این کار از از API مرورگر برای بررسی وضعیت استفاده کردیم و به کمک هوک useEffect اتصال و قطع شدن را مانیتور کردیم و نهایتا آن را تبدیل یک custom hook کردیم که بتوانیم در جاهای مختلف از آن استفاده کنیم.


https://youtu.be/jGILiWKghlU


〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش ری‌اکت - اتصال به وب سرویس با React useEffect Hook



در این ویدیو از پلی لیست آموزش React شیوه اتصال به وب سرویس از طریق React و useEffect hook را بررسی کردیم . ابتدا شیوه تعریف دیتا مدل را بررسی سپس برای استایل دهی کامپوننت ها TailwindCSS را به پروژه اضافه کردیم و یک اسپینر ساده ایجاد کردیم و برای اضافه کردن انیمیشن از react-spring استفاده کردیم. در نهایت یک Custom Hook ایجاد کردیم که برای ارسال درخواست های وب از آن استفاده کنیم

https://youtu.be/i1ciUZcr97o

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

آموزش React - بهینه سازی درخواست‌های وب با Debounce

بهینه سازی درخواست‌های وب با Debounce
در ادامه آموزش React و ادامه ویدیو قبلی پلی لیست در این ویدیو امکان جستجو در محتوا را با ارسال پارامتر به سرویس را پیاده سازی کردیم. اما مشکلی که در فرایند جستجو حجم عظیمی از  درخواست سرویس هاست که بایستی تا حد امکان بهینه باشد. برای این منظور رویکرد بهینه سازی درخواست‌های وب با Debounce
از پکیج lodash را معرفی کردیم

https://youtu.be/ICP0Qi3xNqQ

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir