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

Dave Gray
Add to list
0:00 / 0:00