When we build our virtual DOM by constantly calling the React.createElement() method, it becomes quite hard to visually translate these multiple function calls into a hierarchy of HTML tags. Don't forget that, even though we're working with a virtual DOM, we're still creating a structure layout for our content and user interface. Wouldn't it be great to be able to visualize that layout easily by simply looking at our React code?

JSX is an optional HTML-like syntax that allows us to create a virtual DOM tree without using the React.createElement() method.

Let's take a look at the previous example that we created without JSX:

var React = require('react');
var ReactDOM = require('react-dom');

var listItemElement1 = React.DOM.li({ className: 'item-1', key: 'item-1' }, 'Item 1');
var listItemElement2 = React.DOM.li({ className: 'item-2', key: 'item-2' }, 'Item 2');
var listItemElement3 = React.DOM.li({ className: 'item-3', key: 'item-3' }, 'Item 3');

var reactFragment = [ listItemElement1, listItemElement2, listItemElement3 ];
var listOfItems = React.DOM.ul({ className: 'list-of-items' }, reactFragment);

ReactDOM.render(listOfItems, document.getElementById('react-application'));

Translate this to the one with JSX:

var React = require('react');
var ReactDOM = require('react-dom');

var listOfItems = <ul className="list-of-items">
                    <li className="item-1">Item 1</li>
                    <li className="item-2">Item 2</li>
                    <li className="item-3">Item 3</li>
                  </ul>;

ReactDOM.render(listOfItems, document.getElementById('react-application'));

As you can see, JSX allows us to write HTML-like syntax in our JavaScript code. More importantly, we can now clearly see what our HTML layout will look like once it's rendered. JSX is a convenience tool and it comes with a price in the form of an additional transformation step. Transformation of the JSX syntax into valid JavaScript syntax must happen before our "invalid" JavaScript code is interpreted.

In our previous chapter, we installed the babely module that transforms our JSX syntax into a JavaScript one. This transformation happens every time we run our default task from gulpfile.js:

gulp.task('default', function () {
  return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('snapterest.js'))
        .pipe(gulp.dest('./build/'));
});

As you can see, the .transform(babelify) function call transforms JSX into JavaScript before bundling it with the other JavaScript code.

To test our transformation, run this command:

gulp

Then, navigate to the ~/snapterest/build/ directory, and open index.html in a web browser. You will see a list of three items.

The React team has built an online JSX Compiler that you can use to test your understanding of how JSX works at http://facebook.github.io/react/jsx-compiler.html.

Using JSX, you might feel very unusual in the beginning, but it can become a very intuitive and convenient tool to use. The best part is that you can choose whether to use it or not. I found that JSX saves me development time, so I chose to use it in this project that we're building, and in the code samples I will be sharing with you in this book. If you choose to not use it, then I believe that you have learned enough in this chapter to be able to translate the JSX syntax into a JavaScript code with the React.createElement() function calls.

If you have a question about what we have discussed in this chapter, then you can refer to https://github.com/fedosejev/react-essentials and create a new issue.