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 React—all 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.