Almost every guy working in tech has heard about ReactJS by now. Some might even know Redux, Flux and something better. In this article I’ll be focusing on problems that I, as a beginner faced with ReactJS and what I learned from them.
We use ReactJS with JSX syntax, so it really sped up my understanding process, since there were classes, constructors, extend keywords, which I was already familiar with. Things were great. I read the online documentation about ReactJS components, props & how to pass them to child components, states & how to set/use them. Now time had come to write down some lines of code. That’s when I faced
ReactJS has great execution flow. It first sets the initial values, then you can control what happens before first render, in the render, after the first render, things before and after the next renderings. But the same execution flow becomes very difficult to keep in mind, while designing your react UI for some time, till you get familiar with these calls.
To overcome this, I thought of setting my wallpaper to the following image, which I was lazy enough not to create by myself (google image search to the rescue). Although this image does not show the complete flow, but was enough for a beginner like me. Looking at this few times per day, helped a lot.
Source : Reddit
Although I was referring to this diagram and the (very well written) official documentation, I faced another problem.
As soon as you start building your complex GUI, you start to think about what your design should look like. What components should be there, what data each one should hold and whether that data really needs to be in the state or would it better if it’s passed in the props. These questions will keep your mind more busy than actually writing the code.
First thing you should do before writing your ReactJS code is read this. It is written by people who expect, how react should be used to get maximum from it. It was my misfortune, that I read this after I had already written some code. But it sure helped me to know where I was wrong and correct typical beginner mistakes. Now it has been more than 3 months and I thought to share what I learned from my past mistakes, which you should avoid while using ReactJS.
That’s all folks.