Some thoughts about React

This week I went trough a very interesting React tutorial, that recreated the Hacker News frontpage.

For those who don't know, React is a "Javascript library for building user interfaces", built by the brilliant Facebook developers. It's main point is the use of a Virtual DOM, which makes the rendering more performant, by calculating the model differences on a virtual document object model and then applying only the required bits on the browser DOM.

The tutorial made by Matt King is very clear and easy to follow and it manages to shed some light on why so many people seem to be impressed by React.

What I found to be very interesting is the use of JSX (completely optional by the way), an XML-like syntax used inside the rendering method. While it did look a bit wrong inside Sublime, due to the incompatibility with JavaScript, I found it useful and made the template-handling easier.

Here's the "Hello world" code, taken from the oficial React page.

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.render(<HelloMessage name="John" />, mountNode);

As you can see, JSX allows you to use HTML directly inside the Javascript files, making it easier than working with the template either as a string, either as HTML code placed in another file. With JSX, you have everything in the same place.

True, it's detable wheather if having Javascript logic and the HTML template inside the same file it's a good idea or not, but I found it very handy and less tiresome.

In case you need more than one line, the return statement is contained inside parantheses.

For example:

var HelloMessage = React.createClass({
  render: function() {
    return (
    	<div id="container">
	    	<div>Hello {this.props.name}</div>
        </div>
    );
  }
});

React.render(<HelloMessage name="John" />, mountNode);

"Translating" the JSX code into the proper Javascript version is not very difficult. Using watchify, browserify and reactify, you only need to use watchify with the jsx files and they will be built automatically everytime you save.

For example, with the command below, js/myJSXFile.js will be converted inside build/js/myJavascriptFile.js, which you can include in your HTML files and simply refresh the browser everytime you need.

watchify -v -o build/js/myJavascriptFile.js js/myJSXFile.js

For more info about JSX, you can check this page: facebook.github.io/jsx/

By the way, the Javascript version of the "Hello world" code looks like this:

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);

To sum up, return <div>Hello {this.props.name}</div>;
becomes the not-as-obvious return React.createElement("div", null, "Hello ", this.props.name); and React.render(<HelloMessage name="John" />, mountNode); will now be React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);.

This makes a good point in favor of JSX, I think, since it's much, much easier to understand the HTML template.

It resembles Angular quite a bit and even though it's waaaay to soon me for me to draw a conclusion, so far I like React better, since it's not as restrictive with the way you code as Angular.

To sum up, this is a very good tutorial about React. Try it if you're interested, it doesn't take too much time and it will give you a good taste about React.