Это видео недоступно.
Сожалеем об этом.
React Drag and Drop using react-beautiful-dnd
HTML-код
- Опубликовано: 14 авг 2024
- 🚀 React Beautiful Drag and Drop List Tutorial in Hindi | Build a Simple Drag-and-Drop List with react-beautiful-dnd
In this step-by-step tutorial, we'll explore the power of drag-and-drop functionality in React using the popular library react-beautiful-dnd. Follow along as we create a simple list with one droppable area and 10 draggable list items, enhancing the user experience in your React applications.
🔗 GitHub Repository: github.com/Gee...
👉 Live Preview: react-simple-d...
🕐 Timestamps:
0:00 Introduction
2:40 Splice Method in Javascript
9:00 Creating React - Vite Application
10:45 Installing react-beautiful-dnd
13:00 Implementing DragDropContext & Droppable & Draggable Components
31:40 Snapshot Explanation
36:10 Adding CSS
37:20 Resolving library's issue with React v18
40:00 Understanding Source and Destination
42:00 Writing Business Logic
👨💻 Prerequisites:
Basic knowledge of React and JavaScript
Familiarity with Vite
📁 Project Files: github.com/Gee...
🚨 Important Note: Make sure to install the required dependencies and follow the steps carefully to successfully build the drag-and-drop list in React.
👍 If you find this tutorial helpful, don't forget to like the video, subscribe to the channel, and hit the notification bell to stay updated with more React tutorials in Hindi!
📌 Connect with me:
Instagram: @chitrang_sharma__
LinkedIn: / chitrang-sharma-6347151a7
🔗 Useful Links:
Vite: vitejs.dev/
react-beautiful-dnd: github.com/atl...
Issue Link: github.com/atl...
Medium: / getting-react-18s-stri...
🙏 Thank you for watching! Happy coding! 🚀
#React #ReactJS #DragAndDrop #Tutorial #HindiTutorial #WebDevelopment #Coding #Vite #ReactBeautifulDnD
Nicely explained brother
Thank you so much :)
explained very well
😊Thanks a lot