Table of contents
Disclaimer
Again, this is just based on my experience as a front-end engineer. You maybe have a different experience or context when you read this, but at least it can give you some reference for your career.
Introduction
The story began when I was working as a frontend engineer at my first workplace using Angular at that time. At first, I enjoyed Angular but it changed when I want to switch jobs in the mid of 2021. Most of the job vacancies required React as the main skillset. After that, I change my mind and take a maneuver from Angular to React as my main frontend tech stack.
Not only that, when I did some troubleshooting or debugging I need more time to google some stuff if I code using Angular. It’s very different when I use React, I just enter some keywords and the search result will display more accurately based on my needs. This lasted for about almost one year until I finally realized it was time for me to change.
Actually, most of the frontend frameworks still use Javascript (or Typescript) as the main programming language. The main difference is the approach implemented in each framework. This is what I did to overcome and I still do this until now. There are still many things that I don’t understand yet about React, but when I did this, it helps me and I can get a new job because of it. Hope it can help you.
Back to Fundamentals
React, Angular, Vue, and Svelte are using Javascript (or Typescript) as the main programming language. The main difference is only the approach in each framework. So it will be easier to back to the basics first, learn Javascript fundamentals before switching to another framework.
The framework can change over time, even in just months you maybe need to re-learn it again. If you skip the fundamentals, it will be hard to switch to another framework. Having a solid fundamental Javascript skill can make learning some frameworks easier and faster. You just need to adjust the related syntax according to the framework.
In my case when switching to React, mostly I have to learn Javascript again because as I know React contains more Javascript syntax and logic. Very different when I use Angular, everything can be done with its CLI and default config. I have to make my own custom config while using React.
A site like freecodecamp.org and hackerrank.com is very helpful for me. I can re-learn Javascript syntax and features through it and train my problem-solving skill.
Learn The Framework Philosophy
This is the most important part after you learn the basics. Before jumping into any frameworks, you have to discover its philosophy. Why? Because you have to know how it works, why the founder made the framework, and what problem this framework wants to solve.
Actually, I skipped this part about the first 3 months when I learn React, LOL. When I face some issues, it takes more time for me to discover what is the main problem of that issue because I didn’t know how it works. I often produced dirty code because I don’t know the best practice for this that time.
Luckily, I follow Theodorus Clarence on Twitter and he amazingly often tweet some basic things about React (and Next.js). I even just realized some basic things like state management and React DOM after about 6 months of learning and using React, LOL. Why didn’t start earlier, LOL. This is why you should follow useful accounts like him. It can give some new insight even through some simple tweets or tips and tricks.
A friend of mine also gave me a Github repo that contains the explanation of React Philosophies. It can be accessed at React Philosophies. I still processing this, too many things to understand but now at least I can understand some best practices that I can implement by myself.
Create Projects
Remember that programming is about problem-solving. You cannot learn programming just by watching tutorials on Youtube. You have to try it by yourself.
You don’t need to create a complex project, just create a simple one and you can use it by yourself. For example, I created a simple food app using React + Line Frontend Framework (LIFF) app. It just sends the food list that you’ve selected through LINE Browser. And through this, I can understand how the LIFF Framework works and can be used if I need it.
There’s a term called “Tutorial Hell”. It usually happens you read or watch some tutorials and you feel that you have understood all the material, but there will be great confusion when you try it by yourself. I ever experienced this, but I overcome it by directly creating a project using a framework that I want to learn.
For example, instead of learning React, I’d rather create some projects using React and its supporting libraries.
Code Reviews
When you finished your projects, don’t stop there. Review it by yourself or by your friends. Note that every programmer has their own blindspot so maybe there are some things that are missed when you create the project.
I remember when I worked on my first freelance project using React, I always ask my frontend friend to review my code before merging it at the GitLab Repository. At that time, the code that I made worked properly, but sometimes my friend found that there were some parts that can be improved or made more readable.
Many may ask, how to produce better code? In my opinion, you have to regularly do some code review, either review it by yourself or ask your friend to review it. Experience never lies, you will know the right thing after you do or see the wrong ones.
Closing
So yeah this is my story when I switched to React. I know maybe some of you have different contexts or testimonies, but I hope this can inspire and even help you if you want to switch to another framework. Let me know if there’s something that wants to be discussed.