DEV Community

loading...
Cover image for Create a Todo App with React Hooks and LocalStorage

Create a Todo App with React Hooks and LocalStorage

ducdev profile image Duc Le ãƒŧ3 min read

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

And now:

cd todo
npm start

cd todo

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

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

remove todo

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

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

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

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 ^_^

Discussion (3)

pic
Editor guide
Collapse
urielbitton profile image
Uriel Bitton

Hey i made an app with react similar to this but i don't get how to put it up on my hosting account cpanel like my other websites? Do you have any idea how to do that?

Collapse
ducdev profile image
Duc Le Author • Edited

If you're using create-react-app to initialized the React project's code or the build command is already configured in your project's package/json, you can run:

npm run build
or
yarn build

Locate to your build (sometimes it's different locations depends on how you configured) directory, you will see the production optimized code there. All you need to do is compress the content of this directory and uncompress on your web hosting's home dir, and it should work.

Hope it helps!

Collapse
urielbitton profile image
Uriel Bitton

awesome thanks a lot dude!