Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Drag and Drop in React - Building a Music Playlist with dndkit

Dave Gray via YouTube

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

Reviews

Start your review of Drag and Drop in React - Building a Music Playlist with dndkit

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.