Beautiful and Accessible Drag and Drop with react-beautiful-dnd
Instructor
Alex Reardon- React
^16.0.0
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.
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
- Tahar4 years agoWhat 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çe4 years agoWhat did you like about this course?
Thank you so much, I saved ~50 hours.
- glen4 years agoWhat did you like about this course?
Clear, step-by-step instruction at the right pace
- Gaurav4 years agoWhat did you like about this course?
It was really great of you to create a tutorial for understanding thorough functionality of react-beautiful-dnd
- Olufemi4 years agoWhat 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!!!
- Learner4 years agoHow 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
You might also like these resources:
Introduction to Cloudflare Workers
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.
Create an eCommerce Store with Next.js and Stripe Checkout
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
Practical Git for Everyday Professional Use
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.