This Project is a Todo React Application which demonstrates the following

1. Creating a Component in React
2. Making HTTP calls
3. Communicating between parent and child component
4. Using Bootstrap along with React
5. Using React Hook

This project template can be utilized to develop further

Refer to https://nodejs.org/en/ to install nodejs

Install create-react-app npm package . This will help to easily run the project and also build the source files easily. Use the following command to install create-react-app

npx create-react-app

Clone the project into local

Install all the npm packages. Go into the project folder and type the following command to install all npm packages

npm install

npm install bootstrap

npm install font-awesome

In order to run the application Type the following command

npm start

Install the following for server configuration

npm i express cors

npm i body-parser

npm i nodemon

In order to run the application Type the following command

npm start

or

nodemon server.js

The Application Runs on localhost:8000

1. App.js : Displays whole project.
2. Main.js : Todo List, update a list item, delete a list item and update status are rendered in this component.
3. TodoList.js : This component displays the todo list items and also it has delete and update status. The data is fetched from json.
4. AddTask.js : This component add new task to the todo list.
5. UpdateTask.js : This component update a task in todo list.

To make HTTP Calls axios library is used

We will implement following endpoints to our REST API.

Http method and endpoints | Functionality GET /api/todo | Get all todo list POST /api/todo | Add new task DELETE /api/todo/delete/:id | Delete Task from todo list PUT /api/todo/:id" | Update Task by id in todo list PUT /api/todo/updateStatus/:id | Update Status by id in todo list