What are the Benefits of React?

React is many things, but at its core, React is a JavaScript framework used to develop single-page applications. Keep in mind that this explanation glosses over a lot of React's functionality. Check out Shaun Wassell’s React tutorial if you want to learn more. 

React is built and maintained by the company formally known as Facebook. As mentioned above, its core purpose is to create SPAs. An SPA is a JavaScript-powered website or web app designed for creating reactive (no pun intended), dynamic websites that update data and website components on the fly without reloading resources. 

On a final note for this section, while learning about SPAs, you might run across jargon like "hydrating the page". Hydrate in React has a specific purpose, but for all SPAs, hydration means filling the website components with information. More on that is below. 

An Overview of React’s Benefits

In this video, CBT Nuggets trainer Shaun Wassell illustrates two of the key benefits of using the JavaScript library React: reusable components and efficient re-rendering.

What is the Difference Between React and a Regular Website?

Single-page applications are awesome! Here’s why. A ‘traditional’ website consists of simple HTML, CSS, and JavaScript. I’m using the word ‘traditional’ loosely here. This applies to server-side rendered websites as well. 

With ‘traditional’ websites, every time you navigate to a different page, the entire web page needs to be re-loaded or re-rendered. This takes time. 

React works differently. React is built on reusable components designed to update depending on the data fed to them. Instead of re-loading the entire page, React components swap data on the fly. 

This also makes re-rendering pages much more efficient. Let’s dig into both of those concepts a bit. 

What are Reusable Components for React?

Reusable components are not a new concept in the web world. PHP-driven platforms like WordPress and Drupal have been using a form of reusable components for a long time. Even the HTML standards include features for templates that can be re-used between pages. React makes reusable components more powerful. 

Here’s an example of how this might work. Pretend for a moment that your life goal is to compete against WordPress, and you’re designing the biggest, best CMS in the world. 

No CMS is complete without a blog. Blogs have common components like a hero image, a title, a bunch of text, maybe some pictures, etc. It would be a good idea to include theme support in your CMS, too. 

Each of those things is turned into components. Each component is self-contained and controls how they look and function.

React uses components to build pages. It’s like building a website with Legos.

Unlike Legos, if you update a component in React, those updates apply to every page that uses that component automatically. Likewise, components are dynamic and updated as different information is fed to them. 

This is part of what makes React so powerful. Maintaining projects is a lot easier because you don’t need to remember where five million different things are to debug, enhance, or update.

How Does React Make Re-rendering Efficient?

Another awesome feature of React is how efficiently it updates web pages. 

Web 2.0 introduced us to dynamic websites. Dynamic websites are cool because they can update different parts of a webpage without needing to reload the entire website. 

But wait, doesn’t React do that, too?

Yes, but React updates web pages differently. Web browsers build web pages on something called a DOM. DOM stands for document object model. If you’re unfamiliar with it, a DOM is a Word document on steroids. 

Most websites have dynamic components, but when those components are updated, the browser removes them entirely from the DOM and re-adds those components from scratch.

React doesn’t remove the component from the DOM. It stays right where it’s at. Instead, React changes the data inside the components. The only time components are completely removed is if you navigate to a different page in the app. 

Even that’s not entirely true. React uses a virtual DOM on top of the real-life DOM, but that’s a tragedy for a different story.