Why You Should be Using React Today 

September 23, 2019
175 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

Where can We Buy iOS Installs?
Apps
23 views
Apps
23 views

Where can We Buy iOS Installs?

Carol Gilmore - December 7, 2019

There are a lot of advanced phone models in the market before the iPhone. But after I phone enter into…

What You Need to Know About a Legal Contract Management System
Software
48 views
Software
48 views

What You Need to Know About a Legal Contract Management System

Carol Gilmore - December 4, 2019

This article will cover the basics of contract lifecycles management tools, including: What are contract management solutions? How can they…

7 Technological Trailblazers of 2019
Technology
64 views
Technology
64 views

7 Technological Trailblazers of 2019

James Silverwood - November 29, 2019

Thanks to resources such as TED talks, we have unlimited inspiration and insight at our fingertips. Whether it’s science and…