Drag and Drop in React - Building a Music Playlist with dndkit
Offered By: Dave Gray via YouTube
Course Description
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
Related Courses
Introduction to Programming for Musicians and Digital ArtistsCalifornia Institute of the Arts via Coursera ¡A Programar! Una introducción a la programación
University of Edinburgh via Coursera Interactivity with JavaScript
University of Michigan via Coursera Windows可视化程序设计
Xi'an Jiaotong University via Coursera Android Basics: User Input
Google via Udacity