What is JSX?

JSX is a JavaScript syntax extension that looks similar to XML. It is used to build UI components in ReactJS. It's very similar to HTML with some subtle differences. JSX extends JavaScript in such a way that you can easily build ReactJS components with the same understanding as building HTML pages. It's commonly mixed with your JavaScript code because ReactJS thinks about UI in a different way. This paradigm will be explained later in the chapter.

It's wrong to say that you are mixing up your HTML with JavaScript. As already said, JSX extends JavaScript. Actually, you're not writing HTML tags, but you're writing JavaScript objects in the JSX syntax. Of course, it has to be transformed into plain JavaScript first.

When you write this example:

var HelloWorld = React.createClass({
  render: function () {
    return <h1>Hello World from Learning ReactJS</h1>;
  }
});

It's transformed into this:

var HelloWorld = React.createClass({
  render: function () {
    return React.createElement('h1', null, "Hello World from Learning ReactJS");  }
});

This transformer script file detects JSX notations and transforms them into plain JavaScript notations. These scripts and tools should never be placed in a production environment because it would be painful for the server to transform the script on every request. For the production environment, we should provide the transformed file. We will be covering that process later in this chapter.

As discussed in Chapter 1, Getting Started with ReactJS, note the following:

React.createElement('h1', null, "Hello World from Learning ReactJS");

var CommentList = React.createClass({
  render: function() {
    return (
        <ul>
            <li>ReactJS</li>
            <li>JSX</li>
            <li>
                <input type="text" />
                <button>Add</button>
            </li>
        </ul>
    );
  }
});

var CommentList = React.createClass({displayName: "CommentList",
  render: function() {
    return (
        React.createElement("ul", null, 
            React.createElement("li", null, "ReactJS"), 
            React.createElement("li", null, "JSX"), 
            React.createElement("li", null, 
                React.createElement("input", {type: "text"}), 
                React.createElement("button", null, "Add")
            )
        )
    );
  }
});