Learning and Loving React

Interestingly enough, React was my first attempt at frontend web development, back in 2019. It didn't take me much to understand the basics then, but it didn't excite me either. I was in college at the time, having fun with writing Telegram bots and command line tools. Colors in an html file did not really concern me but I tried, and failed. But after 5 years and a lot of Vue, I'm back in the game. This time though its a bit different. The nuances of CSS and insanity of user experience is much more apparent to me.

This is my story of learning and loving React.

The first attempt

Back when I tried to learn React, it was preferring a class based approach. I was not familiar with JavaScript classes at the time. Moreover, it felt somewhat different from all the other frameworks I have seen before. But since it was my first time checking out any frontend web framework, I couldn't really expect anything. My tech stack at the time was mostly NestJs, Flask and Gin. Those frameworks, each from different languages, were beautifully written. Examples were great and tips and tricks were really helpful. Even if I tried, I couldn't write bad code in flask. Maybe because I loved python, or because it was very lite weight, or because it was a backend framework. Mind you, backend developers are obsessed with code quality and overall hygiene. This is were I started my career, and this initial part influenced me from there onwards.

React felt nothing like those frameworks. The getting started documentation was decent enough, but not in a level of NestJS, or Flask, or Gin. Maybe there was some other documentation I could check but I certainly didn't see any. It does not mean the React community is lacking any resources. There are plenty of medium posts, video tutorials, udemy courses and many more. But an official documentation, that too a simple one, is an important first step in a long journey. I don't remember building anything in React at the time, except a counter, which is what every one us build as a first project.

My venture with React then came to quick stop. I could almost say the initial novelty vanished off very quickly. The only outcome of that trial is cementing my belief that backend developers and technologies are superior. I do realise I was wrong, and every piece of technology is important. But lets fast forward 5 years into 2024, and I'm going to try React again.

Once more

The year is 2024, month of September and the occasion is work. It is important to understand that I had an option between Vue or React, and I was fairly good with Vue at this point. But I chose React. Who does not love some challenge? I was practicing some React here and there for some some. I wrote a counter (again) and a tic tac toe game in React, which was a decent experience. React suddenly did not feel as bad how I felt before, so I wanted to continue, have a go at something I couldn't crack before.

Users as a service

I already told you that I was fairly comfortable with Vue. I'll tell you about that later, in another post, maybe. But the exposure to one frontend web framework taught me something. The way you think when writing user facing software is different from that of backend (hidden) frameworks. Honestly, we are the only industry where customers are called users and a for a good reason. People use our product, and we use them. They are our lab rats. They are idiots. They are numbers. A common man (or woman) does not care how good your code is. They don't care if your method is performant. They want to see things. They want things in the way they expect it to be. You can try it yourself. If you are a backend developer with zero interest in user facing stuff, build something you think you are efficient and give them to people for free. You can have plenty of never expecting feedback quickly. I would say it is important to touch grass once in a while, and I did, with Vue. And it made my React learning a little bit better.

CSS

I hated CSS. It never made sense to me. But at some point in my career, I was forced to embrace it and that changed my perspective. Don't get me wrong, CSS is still somewhat weird, but I do see how people do it, how we can use it and how good it is. Most of my CSS experience is with Tailwind. Without it I couldn't call myself a CSS ninja. We could almost say Tailwind is synonymous with CSS these days. But enough about it, React don't need CSS to work.

From a Vue perspective

Even though I don't want to have a bias towards Vue, it is almost impossible to do the comparison. And this comparison is especially relevant when TypeScript is involved. I assume you know what TypeScript is and why it is needed. I won't be killing your time preaching something you already know.

Vue supports TypeScript but React is TypeScript.

The goodness of typing, whole of it, is readily available in React. This is no magic, React is simply a collection of functions that compile into native JavaScript, while Vue do some magic to convert Vue DSL to JavaScript. The difference is that the developer experience, at-least at the surface level, is much better with React. You use native array map to loop through your list of items, unlike magic in Vue. This make React somewhat east to pick up.

Hooks

But but! Why wasn't I able to learn this thing some time ago? Well the answer mostly is hooks. Hooks are a newer addition to React, and these tiny blocks of logic replaced classes. So everything is a function now, and fortunately it felt very similar to what I did with Vue. I feel hooks and functions are much better than classes. I personally feel the code is much more splittable now, and it kind of helps with bigger codebases. But do not take my word for it, for I am still learning the framework. Hooks brings their own chaos though. There are annoying rules I have to follow when writing components. I don't know why they have to be there but I'm sure there is a reason.

Ecosystem

The ecosystem! How can I not talk about the React ecosystem? If there something you want, there is a plugin for that in React. Whether you want design systems, tooling or anything remotely related to React, it is there. All you have to do is a basic web search. I love shadcn/ui, I love Zustand and I'm sure there are plenty of other such plugins we will love.

Conclusion

I am learning and loving React at the moment. But there are annoyances too. There is a lack of overall code hygiene. There are signs of mediocrity. But as someone said, this is no time for hate. That comes later.

Adios!