Drag and Drop in React with React Query and React-Beautiful-Dnd

Drag and Drop in React with React Query and React-Beautiful-Dnd

Dave Gray via YouTube Direct link

Intro

1 of 23

1 of 23

Intro

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

Drag and Drop in React with React Query and React-Beautiful-Dnd

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Intro
  2. 2 Welcome
  3. 3 What We're Adding
  4. 4 Starter Code
  5. 5 Updating & Adding Dependencies
  6. 6 json-server
  7. 7 Starting the project
  8. 8 Initial DnD imports
  9. 9 DragDropContext
  10. 10 Bracket Pair Colorization
  11. 11 Droppable
  12. 12 Parent section
  13. 13 Assigning content
  14. 14 Mapping todos
  15. 15 Draggable
  16. 16 Droppable placeholder
  17. 17 React 18 Strict Mode issue & solution
  18. 18 Creating intermediate state
  19. 19 onDragEnd destination
  20. 20 Persisting DnD order with useEffect & localStorage
  21. 21 Update handleOnDragEnd
  22. 22 handleDelete
  23. 23 Testing CRUD Ops and refresh / reload

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.