This course is a bit old by a couple years, and is still very relevant. I only ran into one small deprecation in lesson 4 and I listed more documentation there about it. innerRef being changed to ref.
I highly recommend making a commit after each lesson because at the start of some lessons, we will disregard everything done in the previous lesson and you will have to try to figure out where to start your code at. Making these commits will save you a good bit of time.
I really enjoyed taking this course. It was a lot of fun learning all the different aspects that the instructor taught. I haven't taken a course like this and learning about an app that I can drag and drop and reorder things was a lot of fun. # Beautiful-and-Accessible-Drag-and-Drop-with-react-beautiful-dnd-notes
Drag and drop (dnd) experiences are often built to sort lists of content vertically and horizontally.
react-beautiful-dnd is an excellent tool for these use cases. It utilizes the render props pattern to build accessible dnd functionality into lists that look and behave as you would expect—and you’ll even get keyboard-accessible dnd, straight out of the box, with no extra work required. It’s actually easy to start using, and this course is a great place to start.
We will create a highly interactive task management application from scratch using the building blocks of react-beautiful-dnd. Over 14 lessons, you will get practice in:
building droppable containers to sort draggable items horizontally and vertically moving items between columns and even moving the columns themselves Following the course, you’ll be ready to build powerful dnd experiences into your own projects.
- 01. Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd
- 02. Set up a React Environment with create-react-app
- 03. Create and Style a List of Data with React
- 04. Reorder a List with react-beautiful-dnd
- 05. Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback
- 06. Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values
- 07. Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd
- 08. Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps
- 09. Move Items between Columns with react-beautiful-dnd using onDragEnd
- 10. Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props
- 11. Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop
- 12. Reorder Columns with react-beautiful-dnd
- 13. Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent
- 14. Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd
| EMOJI | Definition |
|---|---|
| Deprecated code | |
| 🎥 | Lesson Video |
| 🤔 | Resource |
- These are community notes that I hope everyone who studies benefits from.
- If you notice areas that could be improved please feel free to open a PR!
Thanks goes to these wonderful people (emoji key):
 Lucas Minter 👀 |