Learn how to implement drag and drop functionality in React using React Query and react-beautiful-dnd in this comprehensive tutorial video. Refactor a React Query todo list app to include drag and drop features, and discover how to persist reordered list items after refreshing the application. Explore key concepts such as DragDropContext, Droppable, and Draggable components, and learn how to handle React 18 Strict Mode issues. Master techniques for creating intermediate state, implementing onDragEnd functionality, and persisting drag and drop order using useEffect and localStorage. Test CRUD operations and refresh/reload functionality to ensure a smooth user experience.
Drag and Drop in React with React Query and React-Beautiful-Dnd
Overview
Syllabus
Intro
Welcome
What We're Adding
Starter Code
Updating & Adding Dependencies
json-server
Starting the project
Initial DnD imports
DragDropContext
Bracket Pair Colorization
Droppable
Parent section
Assigning content
Mapping todos
Draggable
Droppable placeholder
React 18 Strict Mode issue & solution
Creating intermediate state
onDragEnd destination
Persisting DnD order with useEffect & localStorage
Update handleOnDragEnd
handleDelete
Testing CRUD Ops and refresh / reload
Taught by
Dave Gray
