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
Смотрите видео Drag and Drop in React - the missing example онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dave Gray 06 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,253 раз и оно понравилось 406 людям.