The Evolution Of React

You would concur with me that React has altered the course of front-end development.

This wonderful library has made the building of user interfaces much easy for developers and is arguably one of the best frameworks ever.

React didn’t just suddenly become famous and useful, it passed through a couple of phases before becoming the powerful library we have today.

Let’s look at the evolution of the React library.

Pre-2013:

The need for a library like React was born in Facebook Ads Org. As Facebook got bigger — for a code base that started out simple, the amount of features increased, the amount of engineers working on the product increased and the code base got larger.

With this kind of growth being experienced, code maintenance became very difficult and the application features slowed things down fast.

So what was the problem? Here it is:

On some changes to the application where new data flows in, some small changes lower in the code base tree were needed to re-render the entire app — what was called cascading updates.

But since the code base grew bigger, making these cascading updates become more difficult. It was difficult to even tell what changes were needed to re-render the app.

Jordan Walke

They brought about the need for an urgent solution. Jordan Walke built a prototype to make this process easier (it wasn’t called React just yet, he called it FaxJS, and that is where it all began.

As at this time, there was XHP which was is an HTML component framework for PHP being used at Facebook. XHP served as a UI rendering layer for Facebook Lite, worked fine for creating custom and reusable HTML elements.

XHP served as the inspiration for React’s creation.

React worked magic for Facebook Ads Org, and the company’s new acquisition Instagram picked interest in React and pushed for it to be decoupled from the code base and be made open-sourceable.

2013:

The time came for React to be open-sourced, and during the JS ConfUS that held from May 29–31, Jordan Walker introduced React to the world.

In Jordan’s words, “One of the things we strived for when we were building our component framework, is that we want to minimize the number of developers facing mutations that the developer is exposed to.”

Up next was to do React evangelism to developers around the globe.

2014:

#ReactJsWorldTour came into existence as more developers adopted the React library.

To push for adoption, React Developer Tools became an extension of Chrome Developer tools, React Hot Loader plugin was developed.

2015:

React v0.13 was released in March 2015. This version of React had a welcomed new feature which was the support for ES6 classes.

In the previous versions, the first calls to setState were synchronous; however, in the new version, they were now asynchronous.

In the same month of React v0.13’s release, React Native was introduced to the world. React Native would develop into a useful framework for building mobile applications using React.

React Native wasn‘t pushing to be a “write once, run anywhere” tool, it was instead pushing to be a “learn once, write anywhere” tool. This ensures that the same set of engineers can build applications for whatever platform they choose, without having to change the syntax.

Later in the year, React migrates to Babel (which is a JavaScript compiler used majorly to convert ECMAScript 2015+ code into a backward compatible version of JavaScript) as the compiler of choice.

React v0.14 gets released in October 2015, and one major change was made. This change involved the main React library being split into two packages, React and React DOM.

The release of React v0.14 led to the depreciation of the react-tools package and the JSXTransformer.js file, and Babel became the main compiler.

By 2015, React had gotten the needed recognition and was being implemented by some influential companies such as NetFlix and Airbnb.

2016:

If you’ve ever wondered how React went from an 0.XX version (such as v0.14 in 2015) to an XX.X (such as the present v16.3). Well, it happened in 2016.

The first React news of the year came with the release of React v15.0. Facebook turned things up from v0.14 to v15.0. React 15.0 came with a couple of changes the two major ones being:

It’s new support for all the SVG attributes supported by browsers and the use of document.createElement instead of setting innerHTML for the mounting of components.

React gained more recognition, with React-based libraries such as MobX (used for simple and scalable state management) and BlueprintJS (which is a UI based web toolkit) being released.

2017:

September 2017, React has a v16.0 release. With new features such as components now returning arrays and strings from render, introducing error boundaries (which improves error-handling). Also, the server renderer was completely rewritten.

React Fiber (a reimplementation of React’s core algorithm) gets open-sourced at the F8 2017.

2018:

React has gotten a couple of new features in its release this year. After lots of requests, React got the Pointer events included in the library. The pointer events would allow developers an easy way to handle events.

React Select v2.0 was also released this year. This serves as a Select control for React, allowing developers to build power React.js components that work out of the box.

Thus far, the biggest news with React this year remains the release of React 16.4.0. To keep up with all things React, you can watch Dan Abramov’s speech Beyond React at the JSConf Iceland 2018.

Some highlights from this event include:

• The possibilities of an upcoming React API called Suspense.
• An introduction to Reason and Reason React (used for adding JavaScript-style syntax and tooling to OCaml).
• The use of MobX and React to build mobile games.

Conclusion:

It is five years now since React was announced to the world, and it has evolved quite amazingly. One thing I don‘t have any doubt about is that it would keep getting better, and more companies would adopt React as the technology for solving their problems.

Written by Anton Shaleynikov