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

Veröffentlicht am: 13 Januar 2023
auf dem Kanal: 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

Auf dieser Seite können Sie das Online-Video Drag and Drop in React with React Query and react-beautiful-dnd mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Dave Gray 13 Januar 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 25,169 Mal angesehen und es wurde von 673 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!