Build a Todo List App With React JS For Beginners.

Introduction

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

Prerequisite

1. Nodejs
2. IDE || Notepad xD

Installation

• 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 VS Code

• Type npm start in the terminal for running the app.

Clean-Up Process

• 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 :-

• App.test.js

• logo.svg

• reportWebVitals.js

• setupTests.js

Configuration after Clean up

1. App.js -

2. index.js -

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.
   

3. Gist Of App.js
   

4. Css
   

Tracking the values of the input.

1. Using useState track the value of the useState
   

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

Displaying The Todo

1. Assign the addTodo to the submit button.
2. Map the State Data.

## Getting Data from the localStorage

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

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

About Author

1. Github
2. Twitter
3. Portfolio