1. What is ReactJS?
ReactJS is an open-source library developed by Facebook, released in 2013. It is a JavaScript library used to build interactive components on websites. One of the most prominent features of ReactJS is its ability to render data not only on the server side but also on the client side.

2. Why do JavaScript developers use ReactJS?

ReactJS is a JavaScript library specifically designed to help developers build user interfaces (UI). In front-end application development, developers typically work on two main components: the UI and user interaction handling. The UI consists of the elements that users see on any application, such as menus, search bars, buttons, cards, etc. For example, if you are developing an e-commerce website, after users select a product and click the "Add to Cart" button, the next step is to add the chosen product to the cart and display it when the user views it—handling the interaction.

Before ReactJS, developers often faced challenges when using "vanilla JavaScript" or jQuery to build UIs. This implied that the application development process would take longer and involve more bugs and risks. Therefore, in 2011, Jordan Walke, an employee of Facebook, initiated ReactJS with the main purpose of improving the UI development process.

Furthermore, to speed up the development process and minimize potential risks while coding, React provides us with the ability to reuse code through two important concepts:

1. JSX
2. Virtual DOM

To gain a better understanding of ReactJS and why you should use it, let's explore these two concepts to see how they actually work.

2.1 JSX

The main focus of any basic website is HTML documents. Web browsers read these documents to display the content of the website on your computer, tablet, or phone. During this process, the browser generates something called the Document Object Model (DOM) - a tree that represents how the website's structure is displayed. Programmers can add any dynamic content to their projects by using the JavaScript language to manipulate the DOM tree.

JSX (short for JavaScript extension) is a React extension that allows us to easily manipulate the DOM tree using simple HTML-style code. Since ReactJS browser supports all modern web browsers, you can confidently use JSX on any browser you are working with.

2.2 Virtual DOM

If you don't use ReactJS (and JSX), your website will use HTML to update the DOM tree for its own version (the process of changes happening naturally on the page without the need to reload the page). This approach works fine for small, simple, static websites. However, for large websites, especially those focused on handling user interactions, this can significantly impact website performance because the entire DOM tree has to be reloaded every time a user clicks on a feature that requires page reload.

However, if you use JSX, you help the DOM tree update itself. ReactJS initializes something called the Virtual DOM. The Virtual DOM is a copy of the actual DOM on that page, and ReactJS uses that copy to find the exact part that the real DOM needs to update when any event causes a change in its components (such as a user clicking on any button).

For example, when a user comments in the comment section of any blog post on your website and presses "Enter," of course, your users need to see their comment added to the list of comments. Assuming you don't use ReactJS, the entire DOM tree would have to be updated to signal this new change. But when you use React, it will help you scan through the Virtual DOM to see what has changed after the user performs an action (in this case, adding a new comment) and choose the right place to update the change.

With such targeted updates, needless to say, it saves us a lot of resources and processing time. In large and complex websites like e-commerce, ordering food, etc., you will find this to be extremely necessary and important in improving customer experience and significantly enhancing performance.

Advantages of ReactJS

In addition to supporting fast interface development, minimizing errors in the coding process, and improving website performance, the following special features may be the reasons why you should "seal the deal" with ReactJS and start learning it now:

Suitable for various types of websites: ReactJS makes website initialization easier because you don't need to code as much as when creating a pure JavaScript and HTML website. It provides you with enough "toys" that you can use for various scenarios.
Reusable Components: If you build components that are good enough and flexible enough to meet the "requirements" of different projects, you only need to spend time on the initial development and reuse them in almost all subsequent projects. Not only ReactJS, but also current frameworks allow us to do this, for example, Flutter.
Can be used for mobile applications: Most of us know that ReactJS is used for website development, but it was actually created for more than that. If you need to develop a mobile application, you can use React Native, another framework developed by Facebook. You can easily "share" components or reuse business logic in the application.
SEO-friendly: SEO is an essential part of getting your website information to the top of Google search results. ReactJS is essentially a JavaScript library, and Google Search Engine can now crawl and index JavaScript code. However, you may also need to use some other libraries to support this.
Easy debugging: Facebook has released a Chrome extension for debugging during application development. This helps speed up the product release process and your coding process.
Hottest web development tool today: If you look at the statistics from Google Trends in Vietnam in the image below and browse through top job recruitment websites in Vietnam such as Topdev, Itviec, etc., you will see a large number of job openings for React Developers with highly attractive salaries. You will also see the current popularity of ReactJS in the Vietnamese market.

4. ReactJS Developer Roadmap

Here is an image of the React Developer Roadmap designed by adam-golab, outlining the prerequisites, things to know, and some additional content that you can learn to become a React Developer.

Basic

Regardless of which framework or library you choose to develop web applications, you need to know the basics. And these basics are HTML, CSS, and JavaScript, which are the three pillars of web development.

HTML

This is one of the first pillars and the most important skill for web developers as it provides the structure for a web page.

CSS

This is the second pillar of web development and is used to style web pages to make them visually appealing.

JavaScript

This is the third pillar of web development and is used to make your web pages interactive. It is also the purpose of the React library. Therefore, you should know JavaScript and have a good understanding of it before attempting to learn React JS.

General Development Skills

Regardless of whether you are a frontend developer, backend developer, or even a full-stack software engineer, you need to have some general development skills to thrive in the programming world. Here is a list of some of those skills:

Using GIT

Try creating a few repositories on GitHub, share your code with others, and learn how to download code from GitHub in your favorite IDE.

Understanding HTTP(S) Protocol

If you want to become a web developer, you must know HTTP and have a good understanding of it. You don't necessarily need to read all the technical specifications, but at least be familiar with standard HTTP request methods like GET, POST, PUT, PATCH, DELETE, OPTIONS, and how HTTP/HTTPS works in general.

Understanding the Terminal

Although a frontend developer may not need to learn Linux or the terminal, getting familiar with the terminal doesn't hurt.

Algorithms and Data Structures

This is another foundational programming knowledge that is not necessarily required to become a React developer but is essential if you want to go further in the programming field.

Learning about Design Patterns and Software Architecture

Similar to Algorithms and Data Structures, you are not required to learn design patterns to become a React Developer. However, you will greatly benefit from learning them. Design patterns are tried and tested solutions for common problems that occur in software development.

Learning about Build Tools

If you want to become a professional React developer, you should spend some time getting acquainted with the tools you will be using, such as build tools, unit testing tools, debugging tools, and so on.

Here are some build tools mentioned in this roadmap:

Package Managers

npm
yarn
pnpm

Task Runners

npm scripts
gulp

Bundlers

Webpack
Rollup
Parcel

It is not necessary to learn all of these tools, just learning npm and webpack is enough for beginners. As you gain a better understanding of web development and the React ecosystem, you can explore other tools.

STYLING

If you want to become a front-end developer, knowing a bit about styling won't hurt. Although the RoadMap mentions many things like CSS Preprocessors, CSS Frameworks, CSS Architecture, and CSS in JS, you need to learn Bootstrap first. It is the most important CSS framework that you will use all the time, everywhere.

STATE MANAGEMENT

This is another important area that a React Developer needs to focus on. The RoadMap mentions concepts and frameworks that you need to master:

Component State/Context API
Redux
Async actions (Side Effects)
Redux Thunk
Redux Better Promise
Redux Saga
Redux Observable
Helpers
Rematch
Reselect
Data persistence
Redux Persist
Redux Phoenix
Redux Form
MobX
React Hooks

If the above list overwhelms you, just focus on Redux for now.

TYPE CHECKERS

Since JavaScript is not a strongly typed language, you don't have built-in mechanisms to catch type-related bugs.

As your application grows, you may encounter many errors when type checking. You can use JavaScript extensions like Flow or TypeScript to check your entire application.

200Lab offers an advanced ReactJS course that includes a topic on TypeScript, which you can check out!

FORM HELPERS

In addition to Type Checkers, you should also learn form helpers like Redux Form, which provides the best way to manage your form state in Redux. Besides Redux Form, you can also look into Formik, Formsy, and Final Form.

ROUTING

Components are the center of React, and routing components are an essential part of any application.

In addition to React-Router, you can also explore Router 5, Redux-First Router, and React Router.

API CLIENTS

In today's world, you rarely build a standalone GUI. Instead, you will create something that communicates with other applications using APIs like REST and GraphQL. Fortunately, there are many API client applications available for React developers:

REST

Fetch
SuperAgent
Axios

GraphQL

Apollo
Relay
urql

Apollo Client is an excellent application. It provides an easy way for us to use GraphQL to build client applications.

The 200Lab ReactJS course also covers GraphQL and Apollo in-depth.

UTILITY LIBRARIES

These are libraries that make your work easier. There are many utility libraries available for React developers, such as the following:

Lodash
Moment
classnames
Numeral
RxJS
Ramda

TESTING

This is an important skill for React developers that is often overlooked. So if you want to be valuable, you should focus on learning libraries that will assist you during the testing process.

Below is a list of libraries mentioned in the roadmap:

Unit Testing

Jest
Enzyme
Sinon
Mocha
Chai
AVA
Tape

End to End Testing

Selenium, Webdriver
Cypress
Puppeteer
Cucumber.js
Nightwatch.js

Integration Testing

Karma

Testing is also a significant topic in the advanced ReactJS course offered by 200Lab.

INTERNATIONALIZATION

This is another important topic for developing user interfaces used worldwide. You may need to support localized GUI versions for Japan, China, Spain, and other European countries.

The RoadMap suggests you explore the following technologies:

React Intl
React i18next

Both libraries provide React components and an API for formatting dates, numbers, and strings, including localization and handling translations.

SERVER-SIDE RENDERING

The RoadMap suggests the following Server-Side Rendering options:

Next.js
After.js
Rogue

You should focus on learning Next.js, as the other two are optional.

STATIC SITE GENERATOR

Gatsby.js is a modern static site generator. You can use Gatsby to create personalized and feature-rich websites, including authentication.

 It combines your data with JavaScript and generates standardized HTML content.

BACKEND FRAMEWORK INTEGRATION

React on Rails integrates Rails with the React front-end framework from Facebook. It provides server rendering, often used for indexing SEO information and UX performance and not provided by rails/webpacker.

MOBILE

This is another area where learning React can be beneficial as React Native is rapidly becoming the standard for developing mobile applications using JavaScript with a native interface.

The RoadMap suggests you explore the following libraries:

React Native
Cordova/PhoneGap

But learning React Native alone is sufficient.

DESKTOP

There are also some React-based frameworks for building desktop GUIs, such as React Native Windows, which allows you to create native UWP and WPF applications with React.

The framework suggests the following libraries:

Proton Native
Electron
React Native Windows

However, all of them are for advanced learning. If you are already proficient in React, you can take a look at them.

VIRTUAL REALITY

If you are interested in building Virtual Reality applications, you also have frameworks like React 360, which allows you to have immersive 360 and VR experiences using React.

That's all about the React RoadMap.

You have seen the big picture. You may feel excited or slightly overwhelmed by the knowledge you need to learn. However, just start slowly, one step at a time. Once you have a solid foundation, you will learn the subsequent knowledge faster.

Through this article, I hope to provide you with a more comprehensive overview of ReactJS and the real benefits it brings.