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.