Create a Todo App with React Hooks and LocalStorage
Tags: react, localstorage, todo, webdev
Published: 2020-07-11 17:08:55

---
title: Create a Todo App with React Hooks and LocalStorage
published: true
description: 
tags: react, localstorage, todo, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i2cuykkgx4erdlhm3dwc.png
---

Creating a **Todo App** is always a good idea for anyone who started learning new web technologies and want to practice with building something because it's kinda a simplest **CRUD** app.

I've been making a **Todo App** with **React Hooks** and **LocalStorage** and I'm writing about how I made it.

I'm trying to be super detailed here (and also a lot of code comments 🤪) for anyone can easily follow the steps. However, all questions are welcome.

# TL;DR

Here is the **Github** repository: https://github.com/ducdev/todo-app-react-hooks-localstorage

Demo: https://todo-app-react-hooks-localstorage.netlify.app/

# OK, let's start!

We assume **Node.js** and **NPM** have been installed on your workspace.

And now let's run this command to initialize a new **React** project with **Create React App**:

```
npx create-react-app todo
```

![npx create-react-app todo](https://dev-to-uploads.s3.amazonaws.com/i/lxfco3el4p6wg1ieateu.gif)

And now:

```
cd todo
npm start
```

![cd todo](https://dev-to-uploads.s3.amazonaws.com/i/23go4o71kwfe75ghpe0k.gif)

For now, a default **React** application is running at:

```
http://localhost:3000/
```

Let's open the created project's code and you will see `App.js` in `src` directory. We'll change the name of `App.js` to `Todo.js` and modify the code follow below code changes.

Code changes:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/42ab20edd451ea87619cad15314c9afe995bcb6a

Save the files, and then you'll see the default **React App** is now only a **Todo** heading text is displayed.

Next, we'll create `TodoList` & `TodoItem`, and then get them rendered with a mock array.

Code changes:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/b002cb5772c5ff8262df706d3a54d06008875db5

We got a fake **Todo List** now 👏

Now, we will create an input which allows us to add new **Todo**. As mentioned above, I use browser's **LocalStorage** to keep the **Todo App**'s data, so the **Todo List** won't get erased when we refresh browser window. 

We suppose to use `formik` to create forms and validate form's values with `yup`, so we need to run this command to add these packages:

```
npm i formik yup
```

Code changes:

https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/f61da2a15cbbcd5929f01545800c94a3309974d6

![add todo](https://dev-to-uploads.s3.amazonaws.com/i/8tdlp1pm8r4eez97ic87.gif)

Basically, now we have a form for adding new **Todo**, then we'll create **Remove** button for each **Todo** item.

![remove todo](https://dev-to-uploads.s3.amazonaws.com/i/85ykr3nbxrxv84lawv0x.gif)

Code changes:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/57af5f2e5414709407345eef323cb97a59a76f8b

We may want to mark a **Todo** item as done or pending.

![mark as done](https://dev-to-uploads.s3.amazonaws.com/i/gr2ut8y0uraseslaoyqx.gif)

Code changes:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/c3e90764641ffb16a80c5457f2f6714ef864e4b7

Sometimes, we also need to edit the text of **Todo**.

![edit todo text](https://dev-to-uploads.s3.amazonaws.com/i/3lwk4szz1kjk5lmq4bft.gif)

Code changes:

https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/933eff9f3a5bcb0111032fbea5ba37b8d0dacae5

It's time to add some styling, improvements and validations.
We'll go with **SASS** this time, it requires to add `node-sass`:

```
npm i node-sass
```

![styling todo app](https://dev-to-uploads.s3.amazonaws.com/i/owm47x3l606pd975gk87.gif)

Code changes:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/d64447083a2ada0112c735d5329f59a1bd4cc9a4

To make sure the app is rendering properly, we don't forget adding tests. **Create React App** uses **React Testing Library** as selector for assertion. That's why we don't need to add anything else into the dependencies tree of the app.

Code changes:
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/c71edb6ef9b15396ea3ee6aed481bf7b3ad5b762

`To run the test`
```
npm run test
```

Finally, the app is now ready to be deployed and used, hope you enjoy the post. If you think there is something I can do better, leave a comment below ^_^