YoVDO

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

Offered By: Dave Gray via YouTube

Tags

React Courses Web Development Courses Javascript Courses Event Handling Courses User Interfaces Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
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 Artists
California 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