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:
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!
Top comments (29)
Hii Davor.. I'm also going thru the phase of getting my hands dirty with React these days.. Can you please help me with one issue... Every time I try to install firebase to integrate with react, my terminal says firebase cmd not found... I don't know what should I do... Your help will be a lot to me... Thanks
It sounds like you haven't installed or imported the Firebase package to your project/file (depending on what you use to connect to Firebase). That's why it probably says that it can't find the Firebase cmd.
You can send me a screenshot of your code and error at davor.tvoric@bornfight.com, so we can take a closer look. It would be even better if you could send me the repository of your code if you have it.
I highly appreciate your response :).
here is my github repo url: github.com/NasreenKhalid/React-Cov...
and for firebase I ran the following cmd after creating a project in my firebase console:
npm i -g firebase-tools
and after that if I run firebase login on my terminal,it always says firebase command not found
Do I have to install any other package also?
Oh, I see now. I don't think you have to install anything else, it worked for me just by running the command you pasted here.
Which OS/terminal are you using?
Really?It worked for you..wow that's amaxing but with me it still throws error, kindly refer to the attached image.
I am using Windows OS and VS Code terminal to run the firebase command
If you're using a cmd.exe inside your VS Code (en.wikipedia.org/wiki/Cmd.exe), the default terminal VS Code offers you, then you probably need to add the firebase-tools to your PATH environment variable for it to recognize it.
I probably won't do a good job of explaining what it is, so you can take a look at what the PATH variable in Windows is here. Basically, you're trying to run a package you've installed via npm, but Windows doesn't know where to find that command and that's why it says "Command not found"
Here are some solutions that might help you out with that:
I think this should sort out the issue you're having, just make sure you restart your VS Code after any changes to the PATH variable
I am still trying to figure out the issue.
Thanks for your help anyways :)
The resources you mention are all excellent. For an excellent FREE introduction to React, please check out youtube.com/playlist?list=PL4cUxeG...
The Net Ninja channel on YouTube is a gold mine of web development tutorials.
Awesome, I'm always looking for more resources, I'll definitely check it out! Thanks
This tutorial is old. I want to learn react but cannot find current time tutorial. Shoutout to netninja, He taught me js.
Shout-out to net ninja. I started my react journey through his tutorials.
There really is no replacement for actually creating something from nothing and getting your hands dirty, as you say. I've never used Vue, but I wish you all the best with whatever side you choose. :)
Easily the best method to learn something :D
Thank you for the kind words, I appreciate it :)
Very Nice article. I do php/laravel backend. i wanted to learn react and went through some of the step you did and never learned it properly.
Thank you for the response!
I know the feeling, unfortunately. Fingers crossed you'll pick it back up again if you'll need it :)
in our case. necessity is the mother of learning. xD
Very true :D
That may happen, unfortunately. The chances of that are increasing proportionally to the number of constraints that are set upon us (e.g., using an older version of a software, the architecture of the system...). That's just something we have to deal with it or make a change in the global scope of things, if possible, wouldn't you agree?
Great article Davor. Totally agree with you about willing to get your hands dirty.
Thanks for thie motivational article as I'm about to start learning React, for my assignments and side projects. It will be helpful.
Good luck! Just keep pushing and don't let anything weigh you down and you're golden! :)
Welcome to the community all new React devs :)
This was a good read and very inspiring. Thanks for this
Thank you so much for sharing your experience with us.
This was beautiful Davor. Thanks for sharing. I've starred the book repo. I'll be sure to look at the code if I have issues understanding it and shoot you an email.
Thanks a bunch, DeveloperKaren!
By all means, I'll help out as much as I can!
This is a gem ✨ I’m currently learning React and all resources you shared are tremendously helpful! Will definitely reach out if I need any help.
Thanks a lot, I'm glad I could help, even with the resources!
Of course, I'll do my best to help out as much as I can :)
Hello Sir, can you tell us how to improve react (or any other) problem solving skills?