React DnD in Examples

React DnD is a set of React utilities to help you build complex drag and drop interfaces . We will take a look on it’s basic capabilities with implementing our own kanban board.

What will be covered in this article:

• Prerequisites
• Installation
• Implementing draggable item
• Implementing droppable item
• Creatin kanban board
• Adding multiple draggable items
• Make items sortable in the column
• Mobile version of drag and drop
• Refactor before adding drop restrictions
• Adding drop restrictions

Before we will start our journey, let’s see what we will get at the end (gif):

Prerequisites

We will start from a simple React application created by using create-react-app script with few changes in a project (remove some styles and code fragments):