1. What is ReactJS?
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:
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.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:
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.
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.
This is one of the first pillars and the most important skill for web developers as it provides the structure for a web page.
This is the second pillar of web development and is used to style web pages to make them visually appealing.
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:
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:
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.
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.
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
Async actions (Side Effects)
Redux Better Promise
If the above list overwhelms you, just focus on Redux for now.
200Lab offers an advanced ReactJS course that includes a topic on TypeScript, which you can check out!
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.
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.
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:
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.
These are libraries that make your work easier. There are many utility libraries available for React developers, such as the following:
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:
End to End Testing
Testing is also a significant topic in the advanced ReactJS course offered by 200Lab.
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:
Both libraries provide React components and an API for formatting dates, numbers, and strings, including localization and handling translations.
The RoadMap suggests the following Server-Side Rendering options:
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.
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.
The RoadMap suggests you explore the following libraries:
But learning React Native alone is sufficient.
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:
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.
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.