What Is React and How to Master It?

David Roganov — Fri, 10 Sep 2021 10:10:52 +0000

In this article, I'll talk about React, a popular JavaScript library, and I'll share a learning roadmap for how to master it.

React specialists are in high demand: Yandex uses it; Netflix, Facebook, as well as many other well-known products have been built using React.

What is React?

React is a JavaScript library for creating user interfaces. First up, note that React is a library and not a framework, though it's often referred to as one. This is because it doesn't create any sort of "scaffold" for the project. That means that this library alone is generally not enough to complete a project. Indeed, React developers often create apps using extra tools like Redux, TypeScript, and Jest.

Instead, React just performs one task: it displays interface components synchronized with the application's data.

Soon after the advent of React, similar options like Vue.js and Svelte essentially took over the front-end world. The common denominator here is that they all help solve problems based on a declarative approach rather than an imperative approach. Here's how those two approaches break down:

Declarative approach: describes the end result. Basically, the result we want to have.
Imperative approach: describes the specific steps to achieve an end result. That is, the steps we must take to get a result.

As it turns out, the declarative approach is great for creating interfaces, and this has taken root in the tech community. Furthermore, this approach doesn't solely apply to web technologies. For instance, Apple has recently introduced the SwiftUI framework based on the same principles.

To better understand the difference between the two approaches, let's take a look at them in more detail. We'll create two versions of a simple application. One with HTML and JS (using an imperative approach) and the other with React (applying the declarative approach).

Our application will display a number and a button which will increase the value of the number by one each time it is clicked.

A pure HTML and JS application

Using the imperative approach, the step-by-step instructions in our program look like this:

Declare the initial program values, assigning DOM elements references to constants.
Write an increment handler that will increment the current value and assign it to the corresponding element.
Set the initial value of the counter, in this case, 0.
Apply the handler for our button.

Note that the HTML markup and JS logic are kept separate.

<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
 </head>

 <body>
   <div class="root">
     <h1 id="counter-value"></h1>
     <button id="increment-btn">+1</button>
   </div>

   <script>
     const counterValueElement = document.getElementById("counter-value");
     const incrementBtn = document.getElementById("increment-btn");
     let counterValue = 0;

     function increment() {
       counterValue += 1;
       counterValueElement.innerText = counterValue;
     }

     counterValueElement.innerText = counterValue;
     incrementBtn.addEventListener("click", increment);
   </script>
 </body>
</html>

The same application with React

Due to the specific features of the React library, its code may look unusual for someone who is accustomed to JavaScript. For example, there's practically no layout markup contained inside the <body> tag.

That being said, let's focus on the counter application. You can find the main logic on lines 25-40.

Here's what's happening:

We tell React we'll use some mutable value by calling the React.useState() function. React gives us the value and a function, setValue(), which we can use to set this value.
Next, we declare an increment handler that sets a new counter value using the setValue() function from the previous step.
We also create some application markup by using a syntax called JSX, which is similar to HTML. This markup duplicates the layout from the previous example built with pure JS. But this time, the value of the counter and the onClick listener as well as the increment handler are all right inside the markup itself. As per the declarative approach, this is where we're describing the final result.

All the code is inside the App() function. In React, this and other similar functions are called components. A component is a piece of interface that contains markup and, sometimes, its associated logic. All React apps are built using components. The component approach appeared long before React, but it's now been combined with the declarative approach here.

<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
 </head>

 <body>
   <div id="root"></div>

   <script
     src="https://unpkg.com/react@17/umd/react.development.js"
     crossorigin
   ></script>
   <script
     src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
     crossorigin
   ></script>
   <script
     src="https://unpkg.com/@babel/standalone@7.13.6/babel.min.js"
     crossorigin
   ></script>

   <script type="text/babel">
     function App() {
       const [value, setValue] = React.useState(0);

       function increment() {
         setValue(value + 1);
       }

       return (
         <div className="app">
           <h1>{value}</h1>
           <button onClick={increment}>+1</button>
         </div>
       );
     }

     ReactDOM.render(
       <div>
         <App />
       </div>,
       document.getElementById("root")
     );
   </script>
 </body>
</html>

Comparing the two approaches

In the first example, we wrote an algorithm for working with our elements, defined a value, and specified how it should be modified — the steps required to achieve our desired result.

In the second case, by using JSX markup and some of React's built-in functions, we described the result we wanted to see upfront. In a nutshell, this is the difference between the declarative and imperative approaches.

If we compare these two applications, it's possible to single out the following features of the React app:

The markup and related logic are written together and related to each other. This will make it easier to work with the code in the future.
The counter with the button is specified in the component itself. This means that we can reuse it very easily; for example, we could just write another <App /> tag on line 44, and two independent counters would appear on the page.
Using identifiers to refer to DOM elements is no longer necessary. This also makes the code easier to maintain.
The state of the component is isolated. There is no way to modify the value from the outside unless we clearly intend to do so. This makes the data flow in your application more predictable, which in turn, makes it easier to develop and debug.

In React, It's also worth noting that applications don't work directly with the DOM tree itself. Instead, we simply describe markup using JSX, and React will decide how to transform it into real DOM elements. This is made possible by an abstraction called the virtual DOM.

Previously, there was a lot of misleading information online about React's speed. The idea was that React was fast thanks to the virtual DOM. It should be mentioned that a React application can't be faster than an app written in pure JavaScript. This is because React itself is written and executed in JavaScript.

React features

It's worth noting that React is not a universal tool that fits any project. To understand if React will solve your problems, we should learn more about its pros and cons.

The React library can definitely make life easier for developers as:

It can help you build an interface comprised of a number of easy-to-maintain components.
It adds a convenient layer of abstraction, eliminating the need to work directly with the DOM.
React is no longer a new library. It has Facebook and a huge community of developers behind it. This means it's well-tested, well-supported, and constantly updated, so transitioning to new versions of React is smooth.
Thanks to the community, React has well-developed documentation, and a lot of developer experience has been gathered in articles, courses, and via conferences. This is particularly useful for beginners but is helpful for more experienced developers, too.
On GitHub, you can find ready-made React components for almost any application. And, if not, you'll still find the necessary independent libraries. From there you can look for integration or make it yourself.
Over time, the React community has established certain approaches and come to some agreements on code, project organization, and solving common problems. For developers, this means that you'll need to spend less time discussing or thinking about these issues — you can just use the methods and approaches that are already in widespread use.
While a project will likely have some setup implemented with Webpack, Parcel, Rollup, or some other bundler, do keep in mind that these are not actually required to use with React. You write in pure JS so you don't need to learn any additional dialects of HTML, CSS, or JS. Of course, JSX is quite convenient and is almost always used with React, but this is also optional.
React is an open-source project. This means it's safe to use even with commercial applications.

However, there are a few potential issues to consider when using React:

React increases the size of the app that users will download (~40 kB for the React and React-DOM packages).
The downloaded code must be executed in the browser so this means the app will first load up slowly. You can read more about this in the article "The cost of JavaScript in 2019" by the V8 team.
When dealing with the virtual DOM, we can run into a few difficulties. The first is in terms of execution time (comparing the virtual trees). Second, in terms of memory, virtual trees need to be stored somewhere and not just as a single copy. As the number of elements per page increases, resources also increase, which can be a real problem on mobile devices. When learning React, it's important to pay attention to optimization options during the rendering process of an application. The necessary tools to do this can be found in the library itself.
You'll also need to consider the basic learning curve that comes with React. A programmer must learn not only the library itself, but also the paradigm. On the official website, there is a good article called "Thinking in React" which will help with this.

These disadvantages, of course, are no reason to completely reject React or other similar libraries. But still, these points need to be taken into consideration when using this tool.

Additionally, despite the fact that the virtual tree consumes additional time and memory, for most applications this won't be critical. React remains fast and it also allows you to optimize problem areas where necessary.

As for the time required to learn React (or another similar library), think of it as an investment in yourself as a developer. React is an up-to-date, interesting, and widely-used technology.

What type of projects suit React?

To summarize, there are several types of projects that would benefit from React.

Projects which are expected to expand, and where the development team will continue their work. In this case, the use of a well-known technology will make developer communication and code maintenance easier.
Medium and large-sized projects will benefit from the component approach, which is the heart of React. This will make your code easier to organize and reuse which will be beneficial in the long run.
Legacy projects that need to go through refactoring. React can be useful in these cases since it can be added to an existing project by updating the codebase gradually.

React may not be the best option for simple applications, such as single-page websites, because in these cases, it will take a lot of time and effort to understand the project setup and environment.

In addition, React isn't the best choice for implementing parts of a project that are very sensitive to resource consumption. In this case, hybrid use is possible. When an application is mostly written in React but the performance-demanding parts of code don't interact with it, the library doesn't interfere with such integrations in any way. However, let's be reasonable — React is fast enough in most cases, and you can always optimize bottlenecks after the fact.

How to learn React?

One of the most useful and complete resources for learning React is the library's official website. It's been translated into many languages and the creators continually update it with new material.

We'll share a possible React learning roadmap. Each of these topics or tasks is worth mastering, or at least further investigation, as you delve deeper into this new world:

The basics:

Adding React
Basic familiarity with JSX
Component basics: state, props, and the component lifecycle
Component types: class-based and functional components, and their differences
Event handling
Working with forms
Developing a simple application with React
React hooks, custom hooks, and refs
Learning to utilize popular templates: higher-order components, render props, using presentational and container components, as well as mastering controlled and uncontrolled components

Controlling the state of the app:

React Context
Flux architecture
The useReducer hook
Third-party libraries, like Redux, MobX and others

React performance:

More advanced concepts:

React under the hood:

The virtual DOM and the reconciliation algorithm
Understanding the concepts and mechanics of reconcilers and rendering

- Writing your own renderer

Almost all of these topics are covered on the official React website.

If you're already familiar with React, consider checking out this great article called "Build your own React"; it will help you gain a more complete understanding of how React works. You can also watch the React Conf speeches.

In addition to these resources, there are many online courses on the market of varying intensity and depth. There are comprehensive courses that will immerse a newbie student into the React ecosystem. There are also courses that focus on very specific things like using different templates or state managers.

Why React now?

React is a popular library that will stay relevant for a long time to come. This means that you can always find a project written in React to work on. And there is a high demand for skilled React developers.

React shows you interface development through the lens of declarative programming. This is useful for improving your general knowledge and broadening your horizons, and the skills gained will make it easier to learn other similar libraries and technologies like Vue.js, Svelte, or even SwiftUI. In addition to this, by adopting the well-established community conventions, patterns, and approaches, the better you'll learn to write good, maintainable code.

But it's also important to understand that, first and foremost, React is a JavaScript library. So, before learning React, you need to have a pretty good handle on JavaScript, along with HTML and CSS. This will greatly speed up the React learning process and will also increase your value as a developer on the job market. This fundamental knowledge will help you find the best technology for the task at hand, whether it's React or something else.

This roadmap offers a great starting point, but if you're ready to change your career and looking for a more well-rounded education in web development, come join us at Practicum by Yandex and check out our web developer course. Here, you'll learn about modern web development (including React), acquire soft skills, build portfolio projects, and more, as well as get the mentorship and guidance needed to help you properly develop your tech career. Additionally, we offer other learning opportunities in Data Science and Data Analytics — you can explore everything here.

DEV Community: David Roganov