How to make an amazing Todo application using React
Categories - React Js JavaScript Tags - React Js JavaScript   Maniruzzaman Akash   11 months ago   806   0

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.

Screenshot-2021-05-26-at-4-57-34-PM

  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 Linkhttps://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/react-todo-app

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

 

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

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