React.js and How Does It Fit In With Everything Else?


A few weeks ago I launched my book the JavaScript Framework Guide which focuses on helping developers and designers confidently choose and quickly learn the JavaScript MVC Frameworks: AngularJS, Backbone, and Ember. As part of my launch, I did a live Hangout Q&A on JavaScript MVC Frameworks and a talk at my local JavaScript user group. I always get a lot of questions about comparing and contrasting the frameworks which at this point I feel confident in answering, but by far the most popular question I got was “what about React?” I had listened to a couple different podcasts about it and done the hello world and was honestly still confused and not very excited about React, but what was I missing? To help me better understand React, I wrote down what was confusing me about React in a series of questions then wrote more code, researched and answered each in this post.


Is React a Template Library?

The first thing you see when you come to the React site is the statement “Lots of people use React as the V in MVC.” Oh, so my initial thought was, “it’s a template library like handlebars.js (and its new variant htmlbars), mustache.js, dust.js, and the now deprecated jquery templates. I get it.” If you read on it says “Since React makes no assumptions about the rest of your technology stack, it’s easy to try it out on a small feature in an existing project.” My interpretation of this is they want you as a developer to try it out and don’t want to make it seem hard to get started. The phrase “lots of people” is important, because it hints that other people use it for more than the V in MVC. But is React a Template Library? No. In this Quora answer Pete Hunt, the public face and a contributor to React, clarified:

To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular’s directives instead. [Directives are Angular’s way of creating custom elements].

Is React Similar to Web Components?

Is React simply an implementation of Web Components, the upcoming standard for custom HTML5 user interface elements? As mentioned before, Pete Hunt said React components should be compared to AngularJS directives. The Angular team has always clearly stated a goal of directives informing and eventually being compatible with HTML5 Web Components. So saying React is an implementation of Web Components is logical and correct, but doesn’t tell the whole story. Comparing React to Web Components is the same as comparing AngularJS Directives and Ember Components to Web Components. They are similar but not the same thing. React Components are not Web Components because React is abstracted away from browser while Web Components will be a native browser feature.

There is a lot of stuff you get for free when you build like the browser doesn’t exists and this is one thing that distinguishes React from Web Components and Polymer and that kind of thing …they’re getting closer and closer in with the browser, and we’re getting farther and farther from the browser. And I think that our technique is more sustainable in the long term. — Pete Hunt on the Code Winds Podcast

 Are the Virtual DOM and Shadow DOM the Same?

Another thing I was embarrassingly confused about was the question in my head about whether the shadow DOM feature of Web Components and the virtual DOM used by React are the same thing? The Shadow DOM feature of Web Components is not at all related to the the virtual DOM used by React.

The virtual DOM used by React is simply an internal implementation detail of the framework which powers its amazing rendering performance.

Virtual DOM

React keeps two copies of a virtual DOM (the original and updated versions). These two virtual DOM trees are passed into a React function that diffs them and a stream of DOM operations are returned (generally these operations involve setting a property on an element).

React.js Virtual DOM Infographic

Share this Image On Your Site

Please include attribution to with this graphic.

Shadow DOM

The Shadow DOM feature of Web Components allows us to encapsulate DOM and CSS as a single element on the page. The canonical example of this is the video element in HTML which when looked at in the Chrome web browser with its Shadow DOM feature enabled shows the complex set of HTML elements that make up the implementation of the element, not just a <video> tag.


Can React be used with other JavaScript MVC Frameworks?

As mentioned earlier the React project’s home pages states “Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it’s easy to try it out on a small feature in an existing project.” So React can be used with other JavaScript MVC Frameworks by plugging it into a given framework’s web Component technology (Directives in AngularJS, Components in Ember, and smaller item views in Backbone).

Here are some articles that do a good job demonstrating how to use React with those frameworks.

AngularJS and React (using the ngReact directive)

AngularJS and React (using ngReact and a custom directive)

Backbone and React

Ember and React
(this Ember forum post discusses bringing them together and from what I see it should be possible, but I haven’t seen an example online)

Who Uses React.js?

Is React a Premature Optimization if you aren’t Facebook or Instagram?

The React team talks in frames per second when describing their lightning fast rendering. Examples such as this one show lists of 1500 rows taking 1.35 seconds with AngularJS versus 310ms with ReactJs. This begs questions such as, should you ever render 1500 rows (can the user process this much on screen) and is trimming fractions of a second off of load times on reasonably designed pages a premature optimization in most applications?

Here is another article with a similar performance improvement using React with AngularJS.

Can I Work with Designers?

One of the most difficult things to warm up to with React is that the markup is mixed in with the JavaScript. This can make it difficult for developers to work with designers who may be more comfortable in CSS and HTML files and shy away from code. The React team contends that most designers quickly adapt and components can be named to match layers in the PSD document so developers and designers are more easily able to collaborate.

Will React Hurt my Search Engine Optimization (SEO)?

React is significantly more SEO friendly than most JavaScript MVC frameworks because it is based on a virtual DOM you can use it on the server without needing a headless browser on the server such as Phantom.js to render pages to search engine bots.

More specifically, React has the ability to render on the server side and transparently hook up its event handlers on the client, giving you the ability to handle both easily. If you call React.renderComponentToString on the server and then in the browser call React.renderComponent() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

 Is React a Framework for Building Applications or a Library with One Feature?

Is React a Framework? In other words can I use it by itself to build an application or is it a library, smaller in scope and focused on one feature. Again, this Quora answer from React contributor Pete Hunt does compare it to AngularJS but focuses the comparison on one feature of AngularJS, directives. This to me seems to be a fair comparison, React is a library with one great feature for building high performing web components today.

React as an Alternative Architecture

React does have an innovative architecture that can be used to build much more complex applications like the commenting system shown as the tutorial on the React site . The React core is a system for mapping a view hierarchy onto some sort of rendering back end and most often it targets the browser DOM. The React team has stated they are less concerned about the JavaScript reference implementation and instead focused on the architecture of React. In other words, they care about the alternative ideas they are putting out there for building client-side applications more than their specific implementation of them in React.js.

The innovation React brings is in three main areas:

1) An alternative to event and data binding framework architectures.

The React alternative is programming like you are throwing away your entire component and re-rendering it every time because it is simpler and easier to reason about. Event-based and data binding approaches frequently run into timing problems keeping track of which callback gets called first as well as make it difficult to understand how a small change in state will affect performance.

2) Virtual DOM

As described earlier, React generates a virtual description of the DOM that we want and then diffs that description with a previous one and emits the changes. This can be done efficiently and programming becomes simpler. We don’t think about synchronizing pieces of data with bindings and don’t think about events firing. You just have a minimal set of state and paint the browser DOM with it. The performance improvements they have been able to achieve with this approach has definitely gotten other frameworks to take notice.

3) Components

If you break down your application into smaller components (main menu, footer, list, list item, datepicker, etc.) then it becomes easier to imagine building a complex application and it remaining maintainable. This is the promise of component-based architectures. Essentially it is jQuery plugins but standardized and better encapsulated so an Ember component, works with an Angular component, works with a React component and comes bundled with HTML, CSS, and JavaScript and none of it conflicts with other components on your page. This is the dream.

React doesn’t quite deliver on the HTML, CSS, and JavaScript encapsulation story like Polymer, but React does have the huge advantage of not being a native browser feature. This abstraction allows it to be a technology that can be trusted today in the browser and on the server to have great performance and is not waiting for the browsers to catch up.

Are components a better way to build an application?

React Team members say that once you get beyond the simple hello world examples (where React is more code) React scales better with complexity. Components with encapsulated behavior is how they are able to keep the complexity lower by only looking at smaller pieces. One particularly impressive feature of react is how components can be composed and reused inside other components by simply using the markup for the custom component.

For example, CommentList and CommentForm are re-used inside CommentBox by simply writing the custom element tags.

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <CommentList />
           <CommentForm />


Can I build something complex with React?

From my research React seems to have real strengths in its support for rendering on the server and on the client (in browsers) with great performance and all this is available today. The simple programming model is refreshing, easy to learn, and reminiscent of Backbone. The concerns I have mostly center around can you build a complex line of business application with this technology? Are there enough features there to help you build a modern single-page application and have the developer be productive and the code be maintainable. Or is the React library an innovative idea for how frameworks might rethink their architectures but just one feature of a larger tool set that is needed— similar to how Knockout’s data binding evolved the landscape of JavaScript frameworks from Backbone’s simplicity to the productivity of  more recent frameworks like AngularJS and Ember.

Let me know what you think about React.js in the comments below and take the time to time to sign up for my free mini-course on JavaScript frameworks and libraries below.

44 Responses to “React.js and How Does It Fit In With Everything Else?”

  1. Rodrigo July 25, 2014 at 1:00 pm #

    Another important project that uses React now is Atom editor:

  2. Konstantin July 26, 2014 at 3:13 am #

    At Sberbank they use React spatially on some pages, for example on a mortgage calculator page.

    Btw, here is a nice Visual Studio template for React.js which can help to get started:

  3. The Dude Abides July 28, 2014 at 3:07 pm #

    How about ReactJs! lol

    React is just a trendy term for SubPub which was a trendy term for the Observer Pattern. GOF anyone? And popularized in KnockoutJs by Steve Sanderson. Douglas Crockford was right – know your web history dern it! 😉

    Correction: What about Reactive Extensions – ?

    We know about ReactJs from this blog. Thanks!

    • Craig McKeachie July 28, 2014 at 3:39 pm #

      Yep, looks like you confused React.js from Facebook with Rx Reactive Extensions from Microsoft. I’m sure that you will not be the last person to confuse the two. Thanks for commenting.

    • radarbob January 2, 2018 at 12:49 pm #

      conflating design patterns with implementation. I’m finding React structurally pleasing and a scalable, very useable web application framework. Having cut my teeth on ye olde ASP (*before* React is a joy to use. Further, namedropping JS libraries is unhelpfully dismissive of the amazingly interoperable nature of libraries, frameworks sharing a common JavaScript foundation.

  4. sb August 1, 2014 at 1:25 am #

    This tutorial shows using react in an angular directive was helpful to me to understand what it is good for:

  5. Glen Mailer August 1, 2014 at 8:36 am #

    “Is React a Premature Optimization if you aren’t Facebook or Instagram?”

    Although much has been said about the performance of React, I find that the biggest benefit is how it lets you read, write and reason about your system.

    Building a reactive rich client application becomes much more like just rendering pages from a server. The optimisations allow you to maintain performance while working in this simpler mental model, but the optimisations themselves are not the major selling point to my mind.

  6. Jérémie Grodziski August 1, 2014 at 9:04 am #

    Great article, thanks.
    A must-see framework built on top of React -> Om

    It’s amazing to see the power of immutability and the virtual dom.

  7. Tyrone Michael Avnit August 1, 2014 at 9:40 am #

    Phenomenal article. I think you nailed it perfectly. I was always perplexed between the difference / similarities of Web Components and React Components. The ability to render on the server and the client so seamlessly sold me a long time ago. I also prefer working with small components as opposed to one huge integration mess. This allows you to much easily share code / components between projects. Call me mad, but I also enjoy the tight coupling between CSS, JS, and HTML used in Web and React Components.

  8. Zubair Quraishi August 6, 2014 at 9:13 am #

    I also made a framework based on Facebook React. It gives you alot of sweet features like being able to replay a browser session:

  9. Henry Story August 8, 2014 at 9:37 am #

    With the development of scala-js ( ) you can develop apps in Scala that compile to JavaScript. On this foundation two projects have been developed to interact with React.

    • – a very functional programming oriented version – a more OO version where code written resembles more closely that JS

    With immutable collections from Scala this could then be used to optimise even further the rendering…. Something to follow.

  10. Marc September 14, 2014 at 9:50 am #

    One thing where web components also seem to shine is the availability of out of the box ui components. Already that is starting to look pretty good. I haven’t been able to find much of this in the React space. One thing that always bummed me out working on YUI is that I often had to write components from scratch that had perfect implementations available in JQuery. I wonder if React is going to be the same thing?

    • Shirish December 1, 2014 at 7:35 pm #

      Marc, You may want to check out the set of react component done using material ui concept at

  11. Konstantin Tarkus October 8, 2014 at 1:50 pm #

    By the way, there is also another good app written in React:
    Promotion: – React.js Starter Kit

  12. Sebastien Lorber October 10, 2014 at 7:39 pm #

    Functional wrappers around React (like Om) are a very good idea.

    There are also some Javascript implementations:

  13. Thomas November 2, 2014 at 3:49 pm #

    Thanks for this write-up Craig, definitely cleared up quite some confusion for me.

  14. Tommaso Allevi December 31, 2014 at 1:18 pm #

    In my opinion, ReactJS isn’t a complete framework. With angular I have all features a webapp requires. Instead with ReactJS I should search a good library for XHR requets, websocket, cookie manager, etc.
    I appreciate the idea of nested views but I think this isn’t sufficient to call this a framework.

    • tusshar January 26, 2015 at 1:22 pm #

      So i should use react with….Backbone, angular, ember ????

      • Jacob Toronto February 2, 2015 at 3:15 pm #

        Flux is the framework that the Facebook devs use around React.

    • davepermen April 10, 2015 at 4:19 am #

      if you don’t Support Browsers not even the browser vendors themselfes Support anymore, xhr, websocket, Cookies can be done with plain JavaScript, no frameworks needed. it’s really just a few tiny lines of code, and then it’s done.

      maybe, just maybe, Frameworks are sometimes overrated.

  15. Ray Pooley July 10, 2015 at 4:00 am #

    Christ! Another damn JavaScript framework. You guys. All you have to do is learn JavaScript and the browser DOM and you can do anything you want. What the hell is so difficult about that? You wanna be a programmer? Learn to write code. You’re not going to do that by using somebody elses because that’s all it is. When you look at this stuff its the most unclean and unreadable stuff you could ever have the misfortune to come across in suppirt mode.

    • Dyson Lu August 29, 2016 at 1:39 am #

      Using the browser DOM is also “using somebody else’s code”.

  16. Sudhama November 20, 2015 at 1:30 am #

    Hey really awesome article! So we are looking to move muzenly to a js only stack. We already use express, mongo and and also magento. we considered using angular bec its well documented. However, we realized for discovering festivals we need SEO so we considered React. React seems very intuitive but Flux does not. Hence we are confused whether only react without flux would work or we need angular plus react and if so, how do we use react to render from the server for discovery of festivals but angular for all other client side stuff. Any good references and guidance would be greatly appreciated ! Thanks for the patient read

    • Craig McKeachie November 22, 2015 at 10:40 am #

      If you have SEO needs it is possible to get it working using Angular 1.x but not easy (easy to mess up/lots of setup and maintenance).
      React does support an initial server render so can be easier for SEO but you need a Router like React router which doesn’t come with just React.
      React plus Flux vs React plus Angular is comparing apples and oranges. I would not do React plus Angular unless you had maybe one page where you were having Angular performance issues rendering a list and needed performance but even then if you know what you are doing with Angular you most likely won’t need React. In general the questions are you are too broad to answer in a blog post comment reply. I would be happy to help you out as a mentor if that makes sense for you:

  17. Ari January 12, 2016 at 4:36 pm # is a great example of how to use React. The site also uses Python / Django.

  18. Kamil April 20, 2016 at 4:47 pm #

    Where to invest your time – #ReactJS or #AngularJS ? I’ve found some useful comments at but in general, I am interested what do you guys thinks about Angular2? Is it worth to get into Angular2 or React still wins long term?

  19. Henrik November 3, 2016 at 6:10 am #


    Really nice article and I may be little late but have one question.

    Does React works well for developing Line-of-business applications?
    If so, do you know where I can find more information about it?

    • Craig McKeachie November 3, 2016 at 10:32 pm #

      This article I wrote some time ago, but it does seem to be catching on in Enterprises for line-of-business applications particularly when paired with the react-router and a data architecture such as Flux and most people seem to prefer Redux as an implementation of the Flux pattern.

      You can find out more here:

  20. radarbob January 2, 2018 at 12:50 pm #

    I was responding to “the Dude Abides” comment of July 28, 2014.


  1. Dew Drop – July 24, 2014 (#1821) | Morning Dew - July 24, 2014

    […] What is React.js? Another Template Library? Like Web Components? A Framework like AngularJS? (Craig McKeachie) […]

  2. The Morning Brew - Chris Alcock » The Morning Brew #1659 - July 25, 2014

    […] What is React.js? Another Template Library? Like Web Components? A Framework like AngularJS? – Craig McKeachie takes a look at the React.js library, comparing it to other frameworks and libraries to give a feel for what it is all about. […]

  3. Links & reads for 2014 Week 31 | Martin's Weekly Curations - August 4, 2014

    […] React.js and How Does It Fit In With Everything Else? […]

  4. Desktop App Experiments in AtomShell, CoffeeScript and React | - August 4, 2014

    […] […]

  5. Desktop App in AtomShell, CoffeeScript and React | - August 4, 2014

    […] […]

  6. Experiments in AtomShell, CoffeeScript and React | - August 4, 2014

    […] […]

  7. Facebook ReactJS - Ressources pour bien commencer - October 23, 2014

    […] […]

  8. What could be UX for “Isomorphic application” in future? • Information Experience Design @ Pratt - April 27, 2015

    […] React.js and How Does It Fit In With Everything Else? […]

  9. ReactJS: Links And Resources (3) | Angel "Java" Lopez on Blog - October 14, 2015

    […] React.js and How Does It Fit In With Everything Else? – Funny Ant […]

  10. Leveling Up With React: React Router | Tech + - March 14, 2016

    […] React.js and How Does It Fit In With Everything Else? […]

  11. Leveling Up With React: React Router - ADD_DanieleMilana - March 14, 2016

    […] React.js and How Does It Fit In With Everything Else? […]

  12. React高级技能:React Router | Notes For Coding - July 6, 2016

    […] React.js and How Does It Fit In With Everything Else? […]

  13. React vs Angular – wanna be coder… - September 16, 2016

    […] your technology stack, it’s easy to try it out on a small feature in an existing project.” So React can be used with other JavaScript MVC Frameworks by plugging it into a given framework’s web Component technology (Directives in AngularJS, […]

  14. React.js and How Does It Fit In With Everything Else? – Funny Ant – DevOps Infographics Resource Center – Programming and IT - January 5, 2017

    […] Source: […]

Leave a Reply