Beautiful and Accessible Drag and Drop with react-beautiful-dnd

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.
Check out the community notes for this course on Github.

• Course Introduction: Beautiful and Accessible Drag and Drop with react-beautiful-dnd
• Set up a React Environment with create-react-app
• Create and Style a List of Data with React
• Reorder a List with react-beautiful-dnd
• Persist List Reordering with react-beautiful-dnd using the onDragEnd Callback
• Customise the Appearance of an App during a Drag using react-beautiful-dnd snapshot Values
• Customise the Appearance of an App using react-beautiful-dnd onDragStart and onDragEnd
• Designate Control of Dragging for a react-beautiful-dnd Draggable with dragHandleProps
• Move Items between Columns with react-beautiful-dnd using onDragEnd
• Conditionally Allow Movement using react-beautiful-dnd Draggable and Droppable Props
• Create Reorderable Horizontal Lists with react-beautiful-dnd direction prop
• Reorder Columns with react-beautiful-dnd
• Optimize Performance in react-beautiful-dnd with shouldComponentUpdate and PureComponent
• Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd