In this blog I don’t just write what I learn, but also about my learning journey. I hope this will help others who are struggling to see that things don’t just fall into one’s lap. So I’ve been reading the book The Road to learn React and following the example project. At least for me, reading a book is not enough in order to fully understand how something works. That’s why I started a small project. It’s a simple app for recording tasks I’m working on.
I soon came across a problem. How do I get the component that lists the tasks to refresh, after I add a task (I have a separate component for adding the task). After I clicked on the “Add” button, it wouldn’t list the task. Well, there is a way to force a component to render, but after only a few Google hits I found that this isn’t the React way. The React component UI will re-render when the state of the component changes. For this one uses setState. Using setState correctly is quite tricky and there are other ways to update the state. But since I’m still a beginner, I want to first learn to use setState correctly.
I still couldn’t fully understand how I can have the “add” component update the “list” component. So I searched for an example app that did something similar to mine and came across this React todo list. Learning from other code examples is probably the best way to learn and one of the reasons I’ve recently started to read code more often (see Reading code using git commit history). Anyways, I noticed that I need to bind “this” to the class instance. I had read about doing so in the “The Road to learn React” book, but already forgotten about it. Now that I actually needed to do it for my code, it made more sense.
Learning about “state” and “bindings” have been new concepts for me and I’m looking forward to learn more about these and other things while I continue to work my way through the book and build my app.