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 ➜ / 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 ➜ / discord
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray
🔗 Source Code Example: https://github.com/gitdagray/react-dr...
👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / 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
On this page of the site you can watch the video online Drag and Drop in React - the missing example with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 06 September 2024, share the link with friends and acquaintances, this video has already been watched 12,826 times on youtube and it was liked by 436 viewers. Enjoy your viewing!
