Overview
Learn how to implement drag and drop functionality in React using dndkit in this 19-minute tutorial video. Discover the missing example often overlooked in other drag and drop tutorials as you build a music playlist that allows users to rearrange songs by dragging and dropping. Follow along as the instructor guides you through installing dependencies, exploring dndkit, providing data for the app, and implementing key functions for drag and drop functionality. Gain insights into handling Next.js hydration mismatches and creating sortable components. By the end of this comprehensive guide, you'll have a solid understanding of how to incorporate drag and drop features into your React applications.
Syllabus
Introduction
Explore the Example App
Install Dependencies
dndkit
Providing data for the app
The Missing Example
List component imports
Next.js Hydration Mismatch fix
4 Key Functions for Drag n Drop
List component return
Sortable Row component
Wrap-up
Taught by
Dave Gray