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

Docs: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Install Necessary Dependencies:

1. Install Bootstrap
   1. npm i bootstrap@5.0.1
2. Install react-bootstrap - https://react-bootstrap.netlify.app/getting-started/introduction/
   1. npm i react-bootstrap
3. Install Font-Awesome - https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
   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 - https://tenbi.csb.app

Source Code Github Link - https://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/react-todo-app

Code Sandbox Link - https://codesandbox.io/s/react-todo-app-akash-tenbi?file=/src/components/TodoList.jsx

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