How to make an amazing Todo application using React
Categories - React Js JavaScript Tags - React Js JavaScript   Maniruzzaman Akash   3 years ago   3237   2 minutes   28

How to make an amazing Todo application using React

Hello, Today I'll show you how to create an amazing Todo application using only React JS.

Features included in React Todo Application - 

  1. Todo List 
    1. Pending and Done status indicated with Todo selection
  2. Create New Todo List
    1. Create with todo title
    2. Create on click or enter button click
  3. Edit New Todo
    1. Edit todo title and status
    2. Update todo
  4. Delete Todo
    1. Empty state message


How to start:

First install create-react-app with a basic react project. Go to that folder and start the server.Named our project react-todo

npx create-react-app react-todo
cd react-todo
npm start



Install Necessary Dependencies:

  1. Install Bootstrap
    1. npm i bootstrap@5.0.1
  2. Install react-bootstrap -
    1. npm i react-bootstrap
  3. Install Font-Awesome -
    1. npm i @fortawesome/fontawesome-svg-core
    2. npm i @fortawesome/free-solid-svg-icons
    3. npm i @fortawesome/react-fontawesome

Or, Install just in a single command -  

npm i bootstrap@5.0.1 react-bootstrap @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome


Project File and Folder Structure:

Let's delete unncessary files and structure our project so that it could be extensable.


  1. We made a folder called components and then todo. Inside todo, Main Todo components are present. It's made such a way that anyone could his own feature here too in newar future.
  2. remove css to assets folder
  3.  In App.js, import bootstrap.min.css and assets.css. Import also TodoList which is our main root component for this project.


Demo View:



Live Demo of Todo App -

Source Code Github Link

Code Sandbox Link


Learning Resource. - React JS Complete Crash Course with 3 projects 

If any questions, regarding this course, you can ask any comment on the Youtube video. 


Tags: How to create a react app. React simple todo application, how to create todo app in react, react complete todo app. react app. How to make an amazing Todo application using React, todo app in react, task app react, react project, react demo project. complete todo app, react todo app, react todo list app

#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React
Higher Order Component in React - In depth discussion about React HOC