JavaScript basics: my journey to mastering React

Now fast forward a few years to today. I have once again started learning React, but this time I’m sticking to it. And in this text, I’ll try to point out my mistakes and why it didn’t work out the first time.

To give you 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. So if you’re in the same state of mind, keep on reading.

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 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, when in Vue you could do this…” which really isn’t the right approach. 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 here at Bornfight. I was assigned to the Vue team. We had, and still do, have a Vue and a React team. After a few bigger projects, we realized that it would probably be beneficial to use one front-end 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 I had to learn React from scratch. But 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 excited about this opportunity. I have learned a lot throughout the time and I was confident that acquired know-how 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. For instance, React introduced hooks… and Vue adopted them in Vue 3.

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. And 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 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. But that 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 above.

That was the moment I felt ready to delve into 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 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 being a master, but I believe that I learned a lot about React and front-end 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.

Now, there are countless ways to improve your code and yourself, and these are just some of them. 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 favorite things into one. 

The thing I also missed the first time was someone experienced in 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. And I realize 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 will provide you with a vastly different experience. Even if it’s something simple, I’m certain that it’s worth doing, just for the sake of doing.

Also, having someone proof your ideas and nudge 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!