For React beginners: How to learn useState by writing a todo app
Tags: react, usestate, tutorial, todo
Published: 2021-07-22 21:04:53

The last article I read which mentioned the words `todo app` and `React` in one sentence began with: "Every time you write a todo app in React, a bunny dies" 😂. But hear me out:
Yes, this is an article about how to write a todo app, but I chose a different approach for beginners.

I'm currently working as an assistant coach at a `boot camp` company which teaches awesome people who are willing to learn coding web frontend technologies. At some point we are, of course, teaching them React. Every weekend, the students get a homework in order to reflect on the topics they learned over the week and deepen their knowledge. And what better way to learn `useState` and thinking in React while coding a todo app. <- I said the two words again in one sentence. 😂

I know from my experience that, as a beginner, it is hard to learn these things. Because you not only have to learn "how to think as a programmer", but you also have to learn the syntax of a new language. And as a complete beginner, a React functional component can look very strange.
Therefore, I created a repo where I documented the whole process of creating a simple todo app in React. Every important feature such as `add a todo`, `delete a todo`, `toggle a todo`, `edit a todo` lives in their own pull request. So you are able to see how the project would evolve. I also wrote a detailed pull request description where I describe, why I coded it this way (in every pull request). And I also committed very often. You can see in the branches how I added the code to the project.

If you are just beginning to learn React and are also having trouble tackling a problem, I hope this repo helps you understand how you would solve such task. You are not sure if you should take a look? Allow me a little self-advertising (this is the message I got from my head coach after checking the repo)

![self-ad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7jcfazib47wqyj2xlzz.png)
 
Here is a list of things I recommend you should know in order to get the best out of your journey through this repo:

You should:
- have a basic understanding of Git & GitHub
- have a basic understanding of HTML
- have a basic understanding of CSS
- have a basic understanding of JavaScript (variables, scope, functions, array methods)
- have read the React documentation ([hook version here](https://reactwithhooks.netlify.app/docs/hello-world.html)) and understand (and maybe tried it out)
- have read [Thinking in React](https://reactwithhooks.netlify.app/docs/thinking-in-react.html)

What you will learn:
- reading and understanding `readme`s
- how to navigate through pull requests in a GitHub repo
- read code from another programmer
- how to start a project
- how to structure your coding process
- how to write good commit messages
- React functional components
- learn the usage of `useState`
- where and how to handle `events` and `update` state
- why a basic understanding of JavaScript is important for React (such as array methods `map()`, `filter()`, `find()`)

I probably could have used other advanced React tools to solve the tasks, such as `custom hooks` or `useReducer` instead of `useState`, but my goal was to show you how to solve this with just a bare minimum of React understanding.

Here is the repo link: https://github.com/mpagels/react-todo-app-walkthrough

If you have any questions on how and why I solved it this way, please start a review and ask your question there. (It's good for your GitHub statistics, and other people with the same question can join the discussion).

I hope you have fun with it, and I wish you all the best on your journey to becoming a React developer.

Cheers.

Martin