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 ReactJS
Microsoft via edX
Front-End Web Development with React
The Hong Kong University of Science and Technology via Coursera
Multiplatform Mobile App Development with React Native
The Hong Kong University of Science and Technology via Coursera
Client-based Web Applications development: ReactJS & Angular
Universidad Politécnica de Madrid via Miríadax
React
Udacity