![How to make an amazing Todo application using React](https://devsenv.com/public/website-images/posts/1622025649.png)
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 -
- Todo List
- Pending and Done status indicated with Todo selection
- Create New Todo List
- Create with todo title
- Create on click or enter button click
- Edit New Todo
- Edit todo title and status
- Update todo
- Delete Todo
- 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:
- Install Bootstrap
npm i bootstrap@5.0.1
- Install react-bootstrap - https://react-bootstrap.netlify.app/getting-started/introduction/
npm i react-bootstrap
- Install Font-Awesome - https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
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.
- 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.
- remove
css
toassets
folder - 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
#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
Popular Tutorials
All Tutorials in this playlist
Popular Tutorials
Categories
-
Artificial Intelligence (AI)
11
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
14
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Data Structure and Algorithm
18
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
12
-
React Js
19
-
React Native
1
-
Redux
2
-
Rust Programming
15
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Artificial Intelligence (AI)
- Bash Scripting
- Business
- C
- C Programming
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Data Structure and Algorithm
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- Rust Programming Language
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development