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

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

Instructor

Alex Reardon
1h 3m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.7
752
people completed
Published 3 years ago
|
Updated 8 months 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.

Learner Reviews

  • Tahar
    10 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Explanation simple and clear, really enjoy the steps and the voice quality. Thank you so much

  • Hasan Gökçe
    10 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Thank you so much, I saved ~50 hours.

  • glen
    11 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Clear, step-by-step instruction at the right pace

  • Gaurav
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    It was really great of you to create a tutorial for understanding thorough functionality of react-beautiful-dnd

  • Olufemi
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    This is one of the best course I've take during my development journey, it's so clear and precise, you can even find deprecation warnings and suggestions above the transcript.

    Great Course!!!

  • Learner
    a year ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    How will you use what you learned from this course?

    I will use it in my current specialization. I want to create a Dashboard same as in JIRA.

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.