- Linkdin
- Email : 20je0420@ee.iitism.ac.in
- Phone : +91-7412972658
To start the project in localhost
npm start
To build this app
npm run build
- Creating a Node project
npm init -y
- Installing Babel dependencies
npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react
- Installing Webpack dependencies (Bundler)
npm install --save-dev @babel/core babel-loader @babel/cli @babel/preset-env @babel/preset-react
- Installing React dependencies
npm install react react-dom
- Now configuring Babel by making .babelrc
- Now configuring webpack by making an webpack.config.js
- Adding scripts in package.json
"scripts": {
"start": "webpack-dev-server .",
"build": "webpack ."
}
- First I am making
public
folder and creatingindex.html
file and adding a div with id="board"; - Now making an
src
folder and adding a react componentApp.js
file. - In the root folder I am making an
index.js
and this is the entry of our kanban react app. - Making the new folder
components
insidesrc
folder and adding small components of this web app. - fetching data inside the
App.js
using fetch() and passing them as prop. - Inside
App.js
adding a state filter and storing this state inside the localstorage and passing this also a prop. - Now Adding some style to Header and Board.
- Making three more components inside new folder
Grouping
i.e. grouping by status , priority , users. - Now making the UI responsive by using media queries.
- Making the sorting feature now.