Build a Todo List App With React JS For Beginners.
Published: 2021-10-23 08:54:43

## Introduction
Today let's build a Todo List app using React JS and localStorage. 

## Prerequisite
1. Nodejs 
2. IDE || Notepad xD

## Installation 
![terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j5497i0js260d4u16fo.png) 
- Create a React app using `npx create-react-app todolist` in the terminal. 

- Open the Folder in your IDE by typing `code . ` in the terminal (if using Visual Studio) , in my case i am using <a href='https://visualstudio.microsoft.com/'>VS Code</a>

- Type `npm start` in the terminal for running the app.

## Clean-Up Process 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvcay8w0gb5sv5hv8aug.png)

- Here in the **src** Folder there are  few Items to be removed as there is no need for them in our app. 

- Files to be removed :- 
1. App.test.js
2. logo.svg
3. reportWebVitals.js
4. setupTests.js

## Configuration after Clean up 

1. App.js - ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxjq8ygmxmyxcdyo7qkr.png)
 
 
2. index.js - ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yq3xeauc67gctgb9jnc1.png)

## Starting Build of the App... 

1. First Setup a Simple Front end , Here's the UI which i am using:- 
https://codepen.io/BeeCodes/pen/MWYEwov

2. This is the ui here.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tm598kkpnem3ahvhgujb.png)

3. <a href='https://gist.github.com/Justinnn07/adf6dabdf3a4d114a8872df637026a78'>Gist</a> Of App.js
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjbwioif9bikk4bgucpx.png)

4. <a href='https://gist.github.com/Justinnn07/56b8a1ce757d2e693c02710b164e6f35'>Css</a> 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le62mwofqmdqz9g1ipni.png)

## Tracking the values of the input. 
1. Using useState track the value of the useState
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krm4u5btrh1c96urczvz.png)

2. Install uuid using `npm i uuid` 

## Create an handler for setting the data into an array 

1. Here while settingData we aren't using "setState" because the previous todo will be cleared. That is why we are using push method.
2. We are setting the todo in the localStorage, So that we can get our todo's after refresh 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cdquvycg3ox42xghshn.png)

## Displaying The Todo

1. Assign the addTodo to the submit button. 
2. Map the State Data.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yb6x0n6gpx1sr0pb50jl.png)
 

 ## Getting Data from the localStorage
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9sdpdampikgigqcdgju.png)
 

Here we need to pass the setState as `JSON.parse` , else the state will get String as value 

## Implementing Delete Feature

1. for deleting , we will be using filter method and setting it to the state and pushing the data into localStorage 
2. Assign the handler to the delete button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0cpk4z5349m3dwrfufi.png)


Deployed Link:-  https://todo-list-app-one.vercel.app/
Github Link:- https://github.com/Justinnn07/todo-list-app

## About Author 
1. <a href='https://github.com/Justinnn07'>Github</a>
2. <a href='https://twitter.com/Justinn771'>Twitter</a>
3. <a href='https://justinn.me'>Portfolio</a>