Hello guys, this is the second video in the practical react series. In this we will look at how to add drag and drop functionailty with react-beautiful-dnd library. We will create a favourite movies list with material ui and implement vertical list reordering on it.
You can view the part 1 of the react practical series using this link - https://www.youtube.com/watch?v=ou8P0cvOu_Q&t=5s
Github Link - https://github.com/vivekjne/drag-and-drop-youtube
Link to the moviesList gist - https://gist.github.com/vivekjne/90f688a1ac658e6fb4f3238690bd2eb2
react-beautiful-dnd - https://github.com/atlassian/react-beautiful-dnd
Material UI - https://material-ui.com/getting-started/installation/
Timestamps
0:00 introduction and demo
0:46 Initializing the project
1:45 Material UI installation
2:53 Cleanup of code structure
3:20 UI development
9:37 Movie card component
15:36 drag and drop implementation and explanation
19:56 reordering implementation
23:46 Final demo and conclusion
Download
0 formats
No download links available.
Practical React #2 - Drag and Drop with react-beautiful-dnd | NatokHD