Why You Should be Using React Today 

September 23, 2019
103 Views

Over the last few years, Facebook’s React library has become one of the most popular JS libraries in the world. If you’re new to JavaScript or are coming along to the party a little late, don’t worry! The JavaScript churn is real, and it falls to us developers to help each other out. Today I’ll be breaking down exactly why React is so popular with developers and business owners alike.

Caption: graph via The State of JavaScript 2018

I’m going to be using the terms library and framework interchangeably to refer to React in this article—whether React is a ‘lightweight framework’ or a ‘heavyweight library’ (or god forbid, a ‘lightweight library’) seems to vary from developer to developer. ‘Framework’ has never been very well-defined to begin with, and React lives somewhere in the fuzzy space between the two terms. 

First, we need to understand what React is for. It was designed with one very specific goal in mind, and that goal governs everything about how it works. The short version is this: 

Most JS frameworks have a very loose coupling between elements, but React has a very tight coupling of HTML, CSS, and JavaScript. It uses this to construct better UIs. 

Are you building a UI? Does that UI require a lot of JS interwoven with HTML and CSS? If you answered yes, then React is your weapon of choice. It’s good for both developers and business owners, so let’s break down what both camps get out of it: 

I’m a developer!

JSX

JSX is the secret sauce of React, which is often glossed over in discussions. JSX is a JavaScript syntax reminiscent of XML that extends ECMAScript functionality so JS can exist alongside HTML/XML-esque code. The general pattern with frontend JS has been to put it into HTML, but JSX works the other way: it puts HTML into JavaScript. You don’t need JSX to use React, but mastering it will give you a significant edge. 

COMPONENTS

One of React’s major calling cards is its Component system. A component is a module-esque piece of code that takes in props and puts out your declared interface. Components are simple, reusable, and save you a huge amount of time. 

VIRTUAL DOM

Standard browser DOM manipulation is fairly slow because, well, stuff is changing and that takes work. The Virtual DOM is a representation of the actual DOM. Whenever there’s a state change in the UI, React updates the Virtual DOM first. It then compares the Virtual DOM with the browser DOM and only changes the components which have been modified. 

All of this is abstracted a lot by Reactall you need to do as a developer is update the component, and it will sort out the details. Compared to direct DOM manipulation, this saves a huge amount of time and processing power.

SERVER-SIDE RENDERING 

React allows for server-side rendering using Node, which can be a powerful SEO tool in the right hands—it’s the only way to fully ensure that crawlers are going to the places you want them to. React isn’t the only thing capable of this (Vue is arguably better at it), but it’s a really nice feature to have. 

EASY BUG SQUASHING 

The React dev tools combined with the componentDidCatch method make error identification and isolation a breeze. I used to work a lot with AngularJS and often found it a pain to debug, but React is remarkably straightforward. 

DITCH THE WRAPPERS

React 16 onwards lets you render fragment components in parallel, without needing a wrapper. Calling this will return an array. This means less divs and less DOM nodes, which creates cleaner, faster code. It’s not a huge change on its own, but combine it with the virtual DOM and you can get a huge performance boost while changing almost nothing on the surface. 

I’m a business owner!

CHEAP AND EASY MIGRATION

One of the biggest issues with any new technology is the cost and effort required to migrate. React is a very light framework (to the extent that calling it a framework is controversial), and requires a lot less work from your developers to migrate to from standard JS. 

EASY TO LEARN

React has a small API and a straightforward declarative syntax that will be relatively simple for your teams to learn and implement. Training up older staff and onboarding new staff will be a lot less painful with React than with a lot of competing frameworks. 

HIGHLY STABLE 

React is maintained by Facebook—it has a large, experienced, professional team and a lot of capital backing it up. React is going to have a long shelf life, and will have continued support, updates, and patching on a level that’s harder for frameworks from smaller companies to match. Like any popular tech, it has a large community and easily-accessible answers—if your team run into a problem, you can almost guarantee that others have run into it before and have a solution somewhere online. 

BETTER SEO

Hey, it’s server-side rendering again! Google crawlers sometimes have issues crawling JavaScript, but React uses server-side rendering to get around that, and ensuring the crawlers are going into places you want them to go. 

React isn’t a panacea; outside of UI design, it’s perfectly functional, but there are better niche tools for specific niches. 

If you’re doing maintenance work for older sites or just like working with more seasoned tools, you might be looking for jQuery vs AngularJS. Maybe you’re looking to bring on a team, in which case there’s plenty of seasoned React.js developers for hire, if you know where to look. 

You may be interested

5 Benefits of Hubspot 
Featured
18 views
Featured
18 views

5 Benefits of Hubspot 

Clare Louise - October 15, 2019

 HubSpot is an extensive inbound marketing and automation platform that enables organizations to execute, oversee and measure all their inbound…

How to Mop Your Floor Using Your Phone
Technology
32 views
Technology
32 views

How to Mop Your Floor Using Your Phone

Elaine Bennett - October 15, 2019

How would it feel to mop your floor using your phone? Not by dipping it in water or sticking it…

The Best Broadband Deals: All You Must Know
Internet
24 views
Internet
24 views

The Best Broadband Deals: All You Must Know

David Willy - October 14, 2019

Comparing to get the best broadband deals need hard work. It's painful to trawl on different providers and choosing between…