Have you ever wanted to create a Trello-like board with drag & drop functionality? Well, it is actually easier than you may think. This tutorial will show you how to do it, using React, TypeScript and styled-components. Learn all you need to build your own Trello-like board in just a few minutes.

Preparing React app

In order to make it easier, let’s use the create-react-app to provide us with all files we will need to get started. If you have this package installed on your machine use that. If not, and you don’t want to install it, you can use npx. This will allow you to use the create-react-app package without installing it on your machine.

Using npx is similar to using npm command to install npm packages. You just replace npm with npx the rest is the same. One important thing, we will use TypeScript in this tutorial. So, make sure to include the --typescript when you use create-react-app. The whole command will be npx create-react-app board-app --typescript.

When create-react-app is done we will need to add some additional packages. The first one is styled-components. We will use this library for styling the board app. The second is react-beautiful-dnd. This library will provide the drag & drop functionality for our board s we can move board items between board columns, or cards. Like in Trello.

We should also add type definitions for these two libraries. With this, TypeScript will provide us with suggestions and type checking for these two libraries. This will result in faster and easier work and also in safer code. So, yarn add -D @types/react-beautiful-dnd @types/styled-components or npm i @types/react-beautiful-dnd @types/styled-components --save.

///
// package.json (part)
///
  ...
  "dependencies": {
    "react": "^16.8.6",
    "react-beautiful-dnd": "^11.0.3",
    "react-dom": "^16.8.6",
    "styled-components": "^4.2.0"
  },
  "devDependencies": {
    "@types/jest": "24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "16.8.17",
    "@types/react-beautiful-dnd": "^11.0.2",
    "@types/react-dom": "16.8.4",
    "@types/styled-components": "^4.1.15",
    "react-scripts": "3.0.1",
    "typescript": "3.4.5"
  }
  ...

The last thing. The template generated by create-react-app contains some files we will not use in this tutorial. The only file we will use directly will be index.tsx. Then, we will create components for the board: board-column.tsx, board-item.tsx, board.tsx and board-initial-data.ts containing data displayed on boards. The folder structure will be following:

board-app/
├─node_modules
├─public
│ ├─favicon.ico
│ ├─index.html
│ └─manifest.json
├─src
│ ├─components
│ │ └─board-column.tsx
│ │ └─board-item.tsx
│ │ └─board.tsx
│ ├─data
│ │ └─board-initial-data.ts
│ ├─index.tsx
│ └─react-app-env.d.ts
└─ package.json
└─ tsconfig.json

#rello board #react #typescript #styled-components #javascript