A Hypothesis On How React.js Became So Popular

This entire article is going to proceed with a single assumption:

Humans don’t like change.

This idea has been debated and talked about by many people, so I will not debate on whether this is a valid assumption or not. If you don’t agree with this hypothesis, then you might as well stop reading, but I appreciate you taking the time to get this far!

That being said, humans will naturally gravitate to whatever is “new”, but as close as possible to anything that we already know. As developers, we always talk about how we are able to pick up and constantly change our ways of thinking, but I challenge that belief.

Let’s take a quick trip back in time…

Jump to 2010 where Facebook decides to release XHP, an extension to the PHP language. Shortly thereafter (around 2013), they released HHVM / Hack to really push the envelope and expand the abilities of the PHP language. At the time of writing this article, Facebook has even released multiple versions / bugfixes for HHVM / Hack within the past 3 days. You might be asking yourself why I am even talking about server-side programming languages and frameworks, since this was supposed to be about React.js and why it has become so popular. Let’s take a look at some observations and maybe you will see where I came to my conclusion.

Observation #1: Facebook has had a huge impact on the open-source community

A quick look at Facebook’s GitHub shows the amount of time, effort, and money that they have spent contributing to the open-source community. At the time of this writing, they have 160 repositories with some of the most important software that many large companies are utilizing at scale, such as: GraphQL, React.js / JSX, React Native, and Jest. As an example, companies such as Netflix and AirBnB rely upon React.js / JSX for driving the entire UI for their web applications.

Observation #2: Nobody writes React without using JSX

// React with JSX
ReactDOM.render(
<span>Welcome to the <strong>Jungle!</strong></span>,
document.getElementById('root')
);
// React without JSX
const strongTag = React.createElement('strong', null, 'Jungle!');
ReactDOM.render(
React.createElement('div', null, `Welcome to the ${strongTag}`),
document.getElementById('root')
);

Now, once we realize that most React applications are built with JSX, you begin to realize that you are writing code eerily similar to how you write code in a PHP web application. This is especially true for any developer who has written web applications for Facebook or used Facebook’s HHVM / Hack / XHP frameworks.

Observation #3: React / JSX is a natural transition for PHP developers

If the largest number of web developers across the world use PHP, then whichever “front-end” / JavaScript framework that causes the least amount of friction for them to adopt it, will likely become the most-popular.

Let’s take a quick look at comparing both languages to support my observation:

// Sample PHP code that takes a name value and displays it within the HTML.
<!DOCTYPE html>
<html>
<body>
<?php
$x = "Hello world!";
echo "<h1>" . $x . "</h1>";
?>
</body>
</html>
// Sample React.js code that performs the same action.
const text = 'Hello world!'

ReactDOM.render(
<h1>{text}</h1>,
document.getElementById('root')
);

As you can see, other than the basic syntax changes between PHP and React / JSX, there are very little differences in the approaches. Now, one thing to note is that PHP isn’t always written like this. In many cases, the class functionality is used. Another option for many PHP developers that Facebook developed is HHVM / Hack / XHP, which provides a huge extension for the PHP language that is not built into it by default (such as types to provide type-safety).

Observation #4: React’s release to the world had amazing timing

The second major driver of developers and companies to the React ecosystem was the announcement from the Angular team at Google that they would be re-writing the Angular framework from the ground-up. This upset a LARGE number of developers (including myself) and companies who had invested tremendous amounts of time and money into learning and backing the Angular.js framework, just to be told that they would need to completely re-tool their entire front-end development stack. Not only would they need to learn the new syntax changes for the core framework, but they would also need to learn TypeScript and RxJS. Another major change was the introduction of Webpack and all of the new ES2015 updates. Combine all of those changes with the fact that the Angular team has documented that they will release a breaking change (however small) to their framework every 6 months. If you agree with my initial argument of this article, then you will realize that all of these changes are a huge barrier to adoption of the new Angular framework. On the other hand, the React team has taken the opposite approach by documenting that they “…value API stability…[and are] reluctant to change public APIs or behavior.”

Correlation does not imply causation…

If you’re still reading this, I appreciate your time and I would love to have a dialog with you to hear your opinion. Feel free and comment below or reach out to me on Twitter!

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >

My thoughts are my own.