Back to Browse

Practical React #2 - Drag and Drop with react-beautiful-dnd

3.7K views
Jun 12, 2020
24:14

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