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
Watch video Drag and Drop in React with React Query and react-beautiful-dnd online without registration, duration hours minute second in high quality. This video was added by user Dave Gray 13 January 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 25,169 once and liked it 673 people.