In the constant flurry of JavaScript MVC and MVVM drama I missed the release of React earlier this year, or rather I ignored the release, most probably dismissing it as yet another spin on expressive two-way binding. After reading "The Future of JavaScript MVC frameworks" I decided to have a better look and I’m very glad I did… React is awesome!

So what is React? It’s a JavaScript library for building UIs.

On the face of it, it looks a tad… fanciful:

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});
 
React.renderComponent(<HelloMessage name="John" />, mountNode);

But React is more than it seems. In fact it's quite foundational in what it offers. It’s trying to solve the problem of the DOM in a refreshingly novel way: by completely mocking it and only touching the real thing when it needs to.

React Components provide a render method, which returns a virtual DOM structure which is, upon state changes, reconciled against the real DOM — and only the minimal set of DOM manipulations will occur in order to actualise your changes. How wonderful! It's so clean.

It’s perfectly logical, really. We know that DOM mutations are slow. Having a virtual DOM, which you can easily diff against newer versions of itself, and which can then be reflected in the actual DOM seems to make utter sense. This is what we should have started doing five years ago.

What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. I am someone that'll probably never buy into someone else's take on the "ideal" framework. I'd rather piece together my own precarious stack of cards. And React allows me this small joy. Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.

But what about stuff like this? –

//...
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }

Those literal XML chunks are pieces of JSX. If this scares you, React does provide straight-up APIs for DOM generation:

//...
  render: function() {
    return React.DOM.div({}, 'Hello ' + this.props.name);
  }

You might think this all looks like a step backwards in expressiveness and cleanliness. But it’s really a big step forwards, for it means we no longer need to bother with data-* annotations and physical DOM attributes bidirectionally tied to pieces of data.

It’s well worth checking out!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!