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