Video Belajar
Tonton dan pelajari berbagai topik menarik melalui video pembelajaran eksklusif dari Channel Dave Gray.
Dave Gray
9334
Drag and Drop in React - the missing example
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn drag and drop in React with the example missing from most drag n drop tutorials. We'll use dndkit to build our own music playlist that lets users drag and drop songs to rearrange the order of the list.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/react-drag-n-drop
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Drag and Drop in React - the missing example
(00:00) Introduction
(00:18) Explore the Example App
(02:02) Install Dependencies
(03:05) dndkit
(03:30) Providing data for the app
(04:53) The Missing Example
(06:47) List component imports
(08:03) Next.js Hydration Mismatch fix
(09:38) 4 Key Functions for Drag n Drop
(14:20) List component return
(15:31) Sortable Row component
(18:00) Wrap-up
📚 Tutorial References:
🔗 dndkit: https://docs.dndkit.com/
Was this tutorial about Drag and Drop in React helpful? If so, please share. Let me know your thoughts in the comments.
#react #drag #drop
Learn drag and drop in React with the example missing from most drag n drop tutorials. We'll use dndkit to build our own music playlist that lets users drag and drop songs to rearrange the order of the list.
💖 Support me on Patreon ➜ https://patreon.com/davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
📬 Course Updates ➜ https://courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ https://discord.gg/neKghyefqh
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/react-drag-n-drop
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Drag and Drop in React - the missing example
(00:00) Introduction
(00:18) Explore the Example App
(02:02) Install Dependencies
(03:05) dndkit
(03:30) Providing data for the app
(04:53) The Missing Example
(06:47) List component imports
(08:03) Next.js Hydration Mismatch fix
(09:38) 4 Key Functions for Drag n Drop
(14:20) List component return
(15:31) Sortable Row component
(18:00) Wrap-up
📚 Tutorial References:
🔗 dndkit: https://docs.dndkit.com/
Was this tutorial about Drag and Drop in React helpful? If so, please share. Let me know your thoughts in the comments.
#react #drag #drop