Before we will start our journey, let’s see what we will get at the end (gif):
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):
App component consists of two column componets from/to which we will drag and drop our MovableItem:
import React from 'react';
import './App.css';
const MovableItem = () => {
return (
<div className='movable-item'>
We will move this item
</div>
)
}
const FirstColumn = () => {
return (
<div className='column first-column'>
Column 1
<MovableItem/>
</div>
)
}
const SecondColumn = () => {
return (
<div className='column second-column'>
Column 2
</div>
)
}
export const App = () => {
return (
<div className="container">
<FirstColumn/>
<SecondColumn/>
</div>
);
}
#kanban-board #react-dnd #kanban #reactjs #react