React Primer

React is an open source JavaScript library for creating interactive user interfaces (UIs) and front-end applications. And its ever-increasing number of users and the robust community around the world are probably a testament to the fact that React is fulfilling its raison d’être, developing user interfaces, in particular, faster and interactive user interfaces.

You “declare” how you want your UI to look like and how it should behave, and React will follow your instructions and render it in your browser as per your description.

Facebook created React in 2011, which became open source in 2013. React is technically a library, but many users glibly refer to it as a framework because of its behavior and capabilities. Perhaps, one way to describe or compare how React behaves is to think of it as the View in the popular architectural pattern Model-View-Controller (MVC).

Component-Based Architecture

At its core, a React application is made up of components. Reusable components to be more precise. It is a section or a piece of the user interface, and each element has its specific logic.

React’s modular nature allows the application’s features to be developed independently and reused within or outside the project. For example, in Figure 1-1, we can break down the web page into various components such as the navbar, the hero section, the footer, etc.

A navbar component, as shown in Figure 1-2, contains the Page title and navigation elements. It is typically located at the top of the screen.

As shown in Figure 1-3, a hero section component contains the images, usually large ones, designed to stand out from the visual field of a page and grab attention.

So if you examine it closely, React components are small independent and self-contained blocks of reusable codes that we can put together to create complex user interfaces.

Yes, a React application is composed of many reusable components. Components can be thought of in any programming language as simple functions. The root of every React app is an element aptly called the root component that holds together the entire application, including all its child components.

Document Object Model (DOM)

Another concept worth understanding when learning React is its Virtual Document Object Model , or Virtual DOM for short.

Simply put, a Virtual DOM is merely a representation of the Real DOM.

A change in data or state is done first on the Virtual DOM. After the changes are computed, that’s when the Real DOM is updated. The result? Overall fast performance and better user experience. React only re-renders the components and their children where an element of state has changed.

Essentially, the Virtual DOM works as follows:

• If the data changes, the entire UI in the Virtual DOM is re-rendered.

• The re-rendering creates a new Virtual DOM with the corresponding changes.

• Next, a comparison of the differences between the old and new Virtual DOMs is made or calculated.

• The Real DOM is then updated ONLY with the elements or states that have changed, not the whole DOM tree.

So, yes, the ingenious creation and use of the Virtual DOM is one of the reasons why React is fast.

The following are some visual representations to show how React’s Virtual DOM works.

In Figure 1-4, changing the parent state will re-render the children IF the child components depend on the updated state of the parent component.

In Figure 1-5, changing the parent state will NOT re-render the children IF the child components DO NOT depend on the updated state of the parent component.

Performance-wise, accessing or creating the Virtual DOM is cheap compared with building or re-rendering in the Real DOM.

Figure 1-6 provides a summary comparison between the Real DOM and the Virtual DOM.

Why React?

React has not only a fast-learning curve compared with other frameworks, libraries, or programming languages; it is also back end agnostic, which allows for users to use it whatever their stack is. JavaScript developers, in particular, can quickly become proficient in React development.

A big bonus point is a well-written documentation on its official site that is easy to follow and understand. You can think of React as the WordPress of the CMS (Content Management System) world because most of your problems can be solved by installing open source libraries.

React is also considered SEO-friendly, meaning that React components are more straightforward for Google to index. And this is a big deal for businesses.

Figure 1-7 illustrates why React has become a favorite of developers and many prominent business brands.

The last one, the big React community and support, is a significant factor, whether you believe it or not. This active community also translates to developers creating many tools and third-party libraries to help you in your developing experience.

Based on personal experiences, we have turned for help to many React groups like Slack, Gitter, Facebook groups, Discord, Spectrum, and Twitter. Or we reach out to a particular individual whenever we get stuck on something or need a bit of clarification.

Almost always, we get an answer from someone, and usually in less than an hour in our experience, maybe because the active members are based globally and in different time zones.

Career Opportunities in React

Interest in React is higher than other popular front-end frameworks and libraries such as Vue.js and Angular (Figure 1-8). If you do a quick job search for a front-end developer, you’ll see many companies looking for proficient React developers or those who have experience in React. And we believe that this trend will continue for years to come.

If you want to expand your hiring desirability as a front-end developer and a full-stack developer, mastering React is the way to go.

React developers currently have a high job market demand and in the foreseeable future. Yes, it might be understandable that you could have a favorite language or library or framework. Still, to be blunt about it, one of the criteria for learning a new language or a new programming tool should be how hirable you would be, whether as a freelancer or as part of a company.

Summary

This chapter covered an overview of crucial React concepts, including the advantages and benefits of learning React. We learned that the core of all React applications are its reusable components and how Virtual DOM allows for overall fast performance and better user experience.

Another reason why React has become so popular is because it gives developers the possibility to build and render independent and self-contained components on the client side and the server side. Lastly, we showed that React skills are a good career move as interest and demand continue to grow.

In the next chapter, we will begin to download and install software packages that we will need to build our React application.