Скачать или смотреть ‫پیاده‌سازی Drag and Drop پیشرفته در Kanban - دوره‌ی آموزش رایگان React - قسمت 10

تالا شده بخواید Drag and Drop رو تو React پیاده‌سازی کنید؟ 🤔
لابد فک میکنید خیلی راحت میشه از dnd kit استفاده کرد؟ 🤷‍♂️
خب اگه چند تا Container داشته باشیم که آیتم‌ها بتونن بینشون جابه‌جا بشن چی؟ 🤯
اگه خودِ Containerها هم بتونن جابه‌جا بشن چی؟ 😳

تو این قسمت جواب تمام این سوالات رو میدیم و درک عمیقی از این مفاهیم پیدا می‌کنیم:
🔥 dnd kit (Drag and Drop)
🔥 Immer

در نهایت یه Kanban Board خواهیم داشت که با استفاده از Drag and Drop میشه تمام آیتم‌ها و لیست‌ها رو جابه‌جا کرد.
همچنین از React Compiler استفاده می‌کنیم که همیشه بتونیم 60 فریم در ثانیه به کاربر نمایش بدیم.

🌐 لیست کامل مباحث رو اینجا ببینید:
https://gist.github.com/BijanProgramm...

شرکت در این دوره کاملاً رایگانه و فقط کافیه به ازای هر قسمت که مشاهده میکنید یک صلوات بفرستید و ثوابش رو هدیه کنید به شهیدی که در زیرنویس ویدئو یا کپشن نوشته میشه
این قسمت تقدیم به شهید حسن طهرانی مقدم ❤

0:00 Intro
1:13 Prep
4:42 Add More Lists Data
6:30 Provide Dispatch Instead of Individual Methods
14:09 Remove Active Logic
17:56 Install Immer
24:18 Use Immer in Lists Reducer
36:26 dnd kit Docs
1:17:32 Install dnd kit
1:18:13 Drag and Drop Basic Setup
1:36:46 Refactor List Into Smaller Components
1:43:53 List Item Drag Overlay
2:03:21 Reorder Items in the Same List
2:11:20 Move Item to Another List
2:22:38 Custom Collision Detection Algorithm
2:48:12 Why We Need React Compiler?
3:01:06 Add React Compiler to Project
3:05:52 Reorder Lists
3:20:28 Horizontal Collision Detection
3:28:06 Fix Temporary Scrollbar

با لایک و کامنت ازم حمایت کنید تا بتونم آموزش‌های بیشتری درست کنم 🤝

کانال اطلاع‌رسانی و گروه پرسش‌وپاسخ در تلگرام:
https://t.me/Codective