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

Published: 13 January 2023
on channel: Dave Gray

25,169

673

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

On this page of the site you can watch the video online Drag and Drop in React with React Query and react-beautiful-dnd with a duration of hours minute second in good quality, which was uploaded by the user Dave Gray 13 January 2023, share the link with friends and acquaintances, this video has already been watched 25,169 times on youtube and it was liked by 673 viewers. Enjoy your viewing!

6,739