For React beginners: How to learn useState by writing a todo app

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)

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) and understand (and maybe tried it out)
• have read Thinking in React

What you will learn:

• reading and understanding readmes
• 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