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.
Here is the Github repository: https://github.com/ducdev/todo-app-react-hooks-localstorage
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:
For now, a default React application is running at:
Let’s open the created project’s code and you will see
src directory. We’ll change the name of
Todo.js and modify the code follow below code changes.
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
TodoItem, and then get them rendered with a mock array.
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:
Basically, now we have a form for adding new Todo, then we’ll create Remove button for each Todo item.
We may want to mark a Todo item as done or pending.
Sometimes, we also need to edit the text of Todo.
It’s time to add some styling, improvements and validations.
We’ll go with SASS this time, it requires to add
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.
To run the test
Finally, the app is now ready to be deployed and used, hope you enjoy the post ^_^