Drag and drop in React

We can't have a Kanban Board app without a drag and drop (DnD) UI functionality, which is the core UI of any Kanban software. Thanks to Dan Abramov for his DnD React library, we can now easily implement and customize such a functionality in React. The library is built on top of Flux—the original unidirectional data architecture from Facebook (Redux was later developed by Dan Abramov, who was influenced by Flux)—and can beautifully fit into our stack without having any fears about breaking the data flow pattern.

The best way to get familiar with the library is by building a React DnD introduction app and exploring the API in a step-by-step manner.

Fire up your terminal and create a Meteor app:

>> meteor create dnd-intro

Install React and DnD packages:

>> npm install react —save
>> npm install react-dom —save
>> npm install react-dnd —save
>> npm install react-dnd-html5-backend —save

As shown in the following diagram, the library consists of three...