My journey to mastering React

Let’s go back a couple of years, to a much different state in the world. When people didn’t have to stand so far apart and could freely attend social gatherings. When things in Javascript were… Kinda the same? We’re going back to the time I started learning React which, ultimately, ended abruptly. Fast forward a few years to today. I have once again started learning React, but this time I’m sticking to it. I’ll try to point out my mistakes and why it didn’t work out the first time.

To give a bit of context, I have been working with Vue for a while now and I am still quite pleased with it. I picked Vue after I made a project in Angular 2, which didn’t really stick. Since there is a bit of a “rivalry” between Vue and React, I was apt to defend Vue instead of learning and trying to improve a cumbersome process or pattern that might have appeared in Vue. I hope this article will help to motivate you if you’re in the same state of mind.

The incentive

The first time I had a go with React was in a state where I thought Vue was a gift to humanity. Anything that was done in it was as it should be and nothing needed any changes. But since React was so popular, I thought I’d give it a go and see why so many people are developing their apps with it.
I started out with this tutorial. Everything made sense, but I just didn’t like how everything clicked together. I remember thinking “why would you do this like that, in Vue you could do this...” which really isn’t the point. An interesting observation in software development is that there are always multiple ways to solve a problem. When you’re aware of that, instead of defending your solution, you can learn from someone else’s suggestion. And you can learn a lot.
That wasn’t the case that day, obviously. After a couple of days, my will to learn React dissolved and I was left with the confirmation of my doubts. Vue is just better.

Some time passed, I’ve learned a thing or two, read a couple of books and I’ve gotten a new job at Bornfight. I was assigned to the Vue team. We had, and still do, a Vue and a React team. After a few bigger projects, we realised that it would probably be beneficial to use a single frontend framework in our Javascript team, instead of two. Knowledge sharing would be much easier and we would have a more specialized team to handle new projects. My colleagues suggested that we should use React. I agreed to that, even though it meant that I had to learn React. It made much more sense than Vue since it was easier to hire new people and the library is still more popular as it was a couple of years ago.

To be honest, I was really excited about this opportunity. I have learned a lot throughout the time and I was confident that would assist me a bunch. Over the years I started to appreciate other approaches and realized that there was no rivalry between Vue and React, not really. React introduced hooks which Vue adopted in Vue 3, for instance. Both of these solutions have their pros and cons and you just have to weigh out your needs and pick your technology based on that. Armed with that knowledge and a healthy outlook on things, I started learning instead of judging. I also had a purpose and a necessity to learn React.

The process

The way I went on about learning React was pretty much the same. I did the same tutorial, but this time I learned both React and Vue. Possessing a bit more in-depth knowledge than I did the first time helped me out a lot. If I didn’t understand something, I could easily find the terminology and search for an explanation online. At the same time, I questioned some of my own methods and used the inspiration to improve my problem-solving skills.
After the tutorial, I wasn’t even thinking that this was nearly enough. I bought this course and continued developing. To solidify my React foundations, I also watched these two tutorials:

• Complete Intro to React, v5
• Intermediate React, v2

As you can see, I am more of a visual learner. I feel like I get more out of watching videos and coding aside. This doesn’t mean that I haven’t gone through the detailed documentation or read some amazing articles at React Resources. I was in awe when I first saw this site and what it offered. It offers a lot of resources in one place and I wholeheartedly recommend this, as well as all of the other resources I mentioned.

This was the moment I felt ready to delve in my own project. I was certain I would avoid most of the basic mistakes people make and I also had a great idea about what to make. And no, it wasn’t a to do app!

The problem

The way I see it, you won’t learn much if you’re prejudiced, don’t have any will to learn something new or you don’t have a goal to work towards. The first time I tried to learn React, I think I ticked all of those boxes. I was too proud to admit something I did wasn’t optimal, I really wasn’t willing to learn React and with those things combined, there really wasn’t a final goal I wanted to achieve. Nowadays, I don’t think there’s anything wrong with admitting that you could have done something better and genuinely improving where it’s necessary. I gave up too easily and I learned nothing useful.

Today, I still think I am far from a master, but I believe that I learned a lot about React and frontend development in general. I am still learning, reading articles and working on React projects. I’ll probably do this for a while and I hope I’ll love doing this as much as I love doing it now. There are countless ways to improve your code and yourself and this is just one of the ways. My future steps will include working on a personal project. It’s nothing complex, but I love reading books and this combines some of my favourite things into one.

The thing I also missed the first time was someone experienced with React to help me out. I could have asked someone for an explanation on any of the numerous platforms and someone would surely help, but I was too shy to do it. Now I get the much-needed help (and PR reviews) from my colleagues here at Bornfight. I realise how invaluable this is, so if you have any questions about React, feel free to email me at davor.tvoric@bornfight.com. I can’t offer that much help, but I can try to help you figure out a solution or review a piece of code you’ve written!

Summary

To sum everything up, I would say that you must be willing to get your hands dirty. You can learn something by reading an article or watching a video, but the real knowledge comes from learning from your mistakes. Reading about a solution and trying to implement it yourself have a vastly different experience between them. Even if it’s something simple, I’m certain that it’s worth doing, just for the sake of doing.
Having someone proof your ideas and nudging you in the right direction is of tremendous help.
If you’re in a similar spot like me, have a go at the resources I mentioned before and feel free to comment on my personal project. Any bit helps and if it benefits us both, why not?

Thanks for reading and stay tuned for the next post where I will make the same (simple) app in both Vue and React. I will compare the differences and show how each of them handles the same problems in their own way!