Drag and Drop in React with React Query and react-beautiful-dnd скачать в хорошем качестве

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