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

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


Alex Reardon

1h 3m closed-captioning
14 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published 6 years ago
Updated 3 years ago

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.

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Course Content

1h 3m • 14 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.