Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Evolution of React on a Timeline

DZone 's Guide to

Evolution of React on a Timeline

We take a look at the history of the popular React.js library/framework, discussing why it was created and how it has evolved.

· Web Dev Zone ·
Free Resource

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 easier 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's Ads Org. As Facebook got bigger, a code base that started out simple grew, the amount of features increased, and the amount of engineers working on the product increased.

With this kind of growth, 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.

Image title

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, and worked fine for creating custom and reusable HTML elements.

XHP served as the inspiration for React’s creation.

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

2013

The time came for React to be open sourced, and during the JS ConfUS held from May 29–31, Jordan Walke 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 developer-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.

Image title

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 its new support for all the SVG attributes supported by browsers and the use of document.createElement instead of settting 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) was 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 has been 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.

Image title

Topics:
javascript ,react.js ,web dev ,javascript frameworks ,libraries

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}