Google Trends Reactjs data retrieved from https://www.google.com/trends/explore#q=ReactJS&date=1%2F2013%2043m&cmpt=q&tz=Etc%2FGMT%2B5
Based on the data shown in the above chart, it appears as though React has become a rising star in the web development world. As a developer who has worked with several JavaScript frameworks, I've wondered myself: How did this happen, and what is the secret sauce that has made React so successful? Is this just hype, or is there more to it? After using the framework and researching what other developers have been saying, the following are reasons I believe the tool stands up to the hype.
The React paradigm shift
Initially, JavaScript was developed to enhance static web pages by manipulating DOM, but it was difficult for two reasons:
DOM API’s were inconsistent across browser vendors. With the introduction of jQuery, making changes to the DOM became much simpler. jQuery abstracted those differences so that developers could use consistent API. It also became easier to extend jQuery in the form of a plugin. A big wave of jQuery plugins made it easy to include enhancements on a web page with minimal effort.
To maintain application state in sync with the DOM is not (or was not) an easy task. You need to track that state and update the DOM accordingly. There was no unified model on how to solve this problem. Frameworks and libraries tried to solve the problem by introducing templates (views) and making it easier to keep the user interface (UI) and application state in sync with the DOM. That was a step forward. As a result, various frameworks and libraries (BackboneJS, AngularJS, EmberJS, KnockoutJS, etc.) were gaining popularity. Some were less prescriptive and others very opinionated. However, one commonality is that you have to maintain templates, bindings or some other similar techniques, that are parsed and compiled and then applied at the runtime.
ReactJS introduced a completely new paradigm of dealing with the state of UI. All you need to worry about is the React component state, then that state is expressed as UI. There is no need to directly interact with the DOM.
Separation of UI and the DOM has other benefits as well. For example, the same programming model can be used in other environments, not only the web. Instead of rendering the DOM, it renders what is appropriate to the targeted environment. React Native and its rising popularity is living proof. As Facebook puts it, “Learn once, write anywhere.”
Other features that contributed to React’s success is the ability to compose components. Other attempts to compose components (angular directives, knockout templates), were awkward and it was difficult to pinpoint what was missing.
Components and composability
React also introduced the concept of a component, which is not new. However, implementation is elegant and simple. There is one unified and simple way of how components work together. You pass data via props, which is a set of properties that the component receives, and you can mix components by including them between component tags.
The application state and UI separation, as well as the components and their composability, are what I believe to be the secret sauce that made React so successful. This simplicity contributed to the explosive growth of the whole ecosystem.
React does not dictate how to structure your application. Rather, it's a recipe for how to combine small building blocks. Think of React Components as lego blocks (HTML tags) that you can connect in endless ways to build what you need. You can then take other blocks built by other communities or build new, custom blocks yourself.
Is React ready for prime time?
There is no question in my mind that React is ready. It's already in production and currently used by many companies.
And, because the UI is just a projection of the state, it can be easily rendered into a string, which enables server-side rendering. A technique that is called Universal or Isomorphic JavaScript enables the reuse of the same code and logic on the client and server. This enables you to create search engine-friendly sites that are highly interactive and responsive on the client side without needing to jump through a bunch of hoops.
W3C has been working on Web Components Specification for a while. React currently enables these concepts of components. Someday, we will get there by having native browser support for custom elements, shadow DOM, and HTML imports. When that day comes, I have no doubt that there will be new ways to develop great applications and websites—we aren’t there yet.
JSX and decomplexifying code
Because JavaScript is not declarative, UI frameworks use various techniques to make it declarative by introducing templates, which may need to be parsed, then compiled, etc. These techniques require new syntax to be learned and templates need to be integrated with code at runtime. Essentially, every framework introduces new Domain Specific Language (DSL), and learning that DSL comes at a cost. React introduced JSX — a JavaScript syntax extension that looks similar to XML, which enables the ability to model states and code user interfaces declaratively.
This new DSL (JSX), differs from previous solutions in a way that you are able to define and extend that DSL, using the full expressiveness of JavaScript.
There is no data binding, no templating, nothing else. It’s just JavaScript. This structure is easier to read than function calls or object literals. JSX is transformed into JavaScript by transpilers, which offer other benefits as well, which we will touch on later.
React and the full ecosystem
If we are not taking advantage of the full ecosystem, then we are not taking full advantage of what React has to offer.
“The future is already here — it's just not very evenly distributed.” (William Gibson)
It is reported that William Gibson said this in an interview in 1993. It is very true for web development today. Maturing progression of frameworks helped advance the JavaScript language. We already know features that are coming, but the best part is that we don’t need to wait to start using them today. By writing using the latest syntax and transforming (Babel, Traceur, TypeScript) it to code that can be used today while browsers play catchup with ES6 support.
Besides syntax, features that are unavailable today are being addressed by usage of polyfills — "A piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively."1
The other piece of the ecosystem is NPM, the package manager for JavaScript. NPM used to claim that it was the package manager for NodeJS, but turned out to be much more. NPM enables developers to find, share, and reuse packages of code from hundreds of thousands of developers and assemble them in powerful new ways.
NPM also addresses the issue of tracking and maintaining dependencies that are used in a project. As of this writing, there are more than 15,000 published React-related components on NPM.
Bundlers such as Browserify or Webpack transform and bundle files so that they are ready to be consumed by the browser.
How do all these tools work together?
Install desired javascript library.
Import library to be available in your javascript source file
Use imported component
Transpile ES6 and JSX into code that is supported by today’s runtime environment
Lint the code while transpiling to ensure consistent code style and avoid known issues
Bundle all required dependencies into single file
This may not seem like a trivial task to set up, but when it is done the benefits are huge. The outcome is always predictable, and there are no syntax errors, because transpilers already ensure that JavaScript is syntactically correct.
There are plenty of sample setups or actual projects in the open.
Conclusion
React enables you to focus on how to present your application state in a simple and predictable way. The learning curve for adapting React is minimal and there are numerous components readily available that in many cases probably already does what you need.
The following characteristics apply to React:
Battle-tested
Relatively tiny - concise and small API
Library agnostic - has no dependencies
Easy to learn
Efficient - virtual DOM concept lends itself for rendering optimizations
Universal - can be used on client or server side
Are you already using React? If no, why not?
Looking for more on React? Read, "Pros and cons of React Native - mobile apps with JavaScript."
[1] Retrieved from: https://remysharp.com/2010/10/08/what-is-a-polyfill