Mastering React ~ Best Practices 2022 Part 1

Why ReactJs?

ReactJs is undoubtedly become the most popular library (or a “framework”) that is used to develop a user interface. But, why do you need to learn ReactJs? the official documentation has explained it all. However, the other frontend frameworks also offer the same benefit

There are 2 other popular frontend frameworks, Angular and VueJs. However, in my opinion and experiences working with those 3, I still prefer React than other frontend frameworks.

Firstly, React is used more widely by many big companies, for example, Meta (the creator), Netflix, Airbnb, Khan Academy, and many more. It means React offers bigger communities where people can collaborate to solve common problems/errors or even contribute to improving React and help build component libraries. It also means that more job opportunities arise for React developers. ReactJs is backed by one of the biggest tech company which is Meta which means that you don’t need to worry about ReactJs improvement and future development.

The other reason why you need to learn ReactJs is because it has a fast learning curve which makes it easier to learn than the other 2 frameworks. Because essentially ReactJs is just a pure Javascript + HTML and CSS. You don’t need to learn another syntax. The other React concept such as “state”, “props”, and “component lifecycle” just feels so natural and easy to grasp. With those reasons, let’s start learning ReactJs

Prerequisites

There are some prerequisites before you can learn ReactJs. First, you need to have node and npm / yarn to be installed. You also need to have knowledge of HTML, CSS, and Javascript ES6. Here are some links that I personally love where you can start to learn:

• HTML and CSS: https://www.freecodecamp.org/learn
• Javascript ES6: https://youtu.be/nZ1DMMsyVyI

Javascript ES6

The followings are the most used syntax in JS ES6 while developing with ReactJs:

1) Template Literal & object Literal

Template literal is just a simpler way of merging and concatenating variables and strings using the backtick(`) and the variable can be inserted by using…