DEV Community

Cover image for Build a Todo List App With React JS For Beginners.
Justin Varghese
Justin Varghese

Posted on

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

terminal

  • 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

Image description

  • 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 - Image description

  2. index.js - Image description

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

  3. Gist Of App.js
    Image description

  4. Css
    Image description

Tracking the values of the input.

  1. Using useState track the value of the useState
    Image description

  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

Displaying The Todo

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

## Getting Data from the localStorage
Image description

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

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

Top comments (2)

Collapse
 
kiransethu46 profile image
Kiran Sethumadhavan

Interesting !!

Collapse
 
hernanbp profile image
Hernan

it doesnt work