Drag and Drop in React (Complete Tutorial)

Cosden Solutions • November 5, 2024
Video Thumbnail
Cosden Solutions Logo

Cosden Solutions

@cosdensolutions

About

The best React content on YouTube! 🤙

Video Description

🚀 Project React → https://cosden.solutions/project-react 📥 Import React (Newsletter) → https://cosden.solutions/newsletter?s=ytd-psls Source Code → https://github.com/cosdensolutions/code/tree/master/videos/long/react-drag-drop-tutorial Join The Discord! → https://discord.cosden.solutions VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace" In this video we will be learning how to handle drag and drop in React with the dnd-kit library! We will be handling the drop end function that handles updating our state, we will be creating droppable areas and draggable items to drag into. We will be following all of the best practices and design patterns around React! TIMESTAMPS 00:00 Intro 00:58 Code overview 02:29 Creating components 08:02 Installing dnd-kit 08:53 Handling drag end function 12:55 Creating droppable column 13:59 Creating draggable box 17:47 Recap