Drag and Drop in React with React Query and react-beautiful-dnd

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Learn how to add drag and drop in React with React Query and react-beautiful-dnd. This drag and drop tutorial refactors a React Query todo list app with react-beautiful-dnd and shows how to persist the reordered list items after refreshing the app.

🚀 Become a full-stack web dev with Zero To Mastery Courses:
Advanced React: https://bit.ly/AdvReactDev
The Complete Web Developer: https://bit.ly/WebDevMaster
Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions - Please post them to my Discord ➜   / discord  

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

👇 Follow Me On Social Media:
Github: https://github.com/gitdagray
Twitter:   / yesdavidgray  
LinkedIn:   / davidagray  

🔗 Starter Code: https://github.com/gitdagray/react_query
🔗 Completed Code: https://github.com/gitdagray/react-qu...

Drag and Drop in React with React Query and react-beautiful-dnd

(00:00) Intro
(00:11) Welcome
(00:32) What We're Adding
(01:28) Starter Code
(02:43) Updating & Adding Dependencies
(05:02) json-server
(06:06) Starting the project
(07:31) Initial DnD imports
(08:45) DragDropContext
(09:57) Bracket Pair Colorization
(10:27) Droppable
(11:55) Parent section
(13:02) Assigning content
(13:39) Mapping todos
(14:30) Draggable
(18:03) Droppable placeholder
(18:46) React 18 Strict Mode issue & solution
(23:24) Creating intermediate state
(25:31) onDragEnd destination
(29:16) Persisting DnD order with useEffect & localStorage
(36:05) Update handleOnDragEnd
(37:20) handleDelete
(41:05) Testing CRUD Ops and refresh / reload

📚 Tutorial References:
🔗 react-beautiful-dnd: https://www.npmjs.com/package/react-b...
🔗 React Official Website: https://reactjs.org/
🔗 React Query: https://react-query-v3.tanstack.com/
🔗 Note: TanStack Query for React now available: https://tanstack.com/query/latest
🔗 JSON Server: https://www.npmjs.com/package/json-se...

📚 React 18 & react-beautiful-dnd solution resources:
🔗 "Getting React 18's Strict Mode to work with react-beautiful-dnd" by William Bernting:   / getting-react-18s-strict-mode-to-work-with...  
🔗 Code solution from GiovanniACamacho and modified by Meligy: https://github.com/atlassian/react-be...

Was this React Drag and Drop tutorial with React Query helpful? If so, please share. Let me know your thoughts in the comments.

#react #drag #drop