What is JSX?_Getting Started with React-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

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:

ReactElement is the primary API of React. ReactElement has four properties: type, props, key, and ref.
ReactElement has no methods of itself, and nothing has been defined on the prototype also.
ReactElement objects can be created by calling the React.createElement method.
In the highlighted code mentioned earlier, we can see that the first argument for the React.createElement method is creating an h1 element, with properties being passed as null and the actual content of the h1 element being the string Hello World from Learning ReactJS
ReactElements are passed into DOM in order to create a new tree in DOM.
ReactElements are named virtual DOM and are not the same as DOM elements. Details of virtual DOM will be discussed in later chapters.
As per the official React documentation (https://facebook.github.io/react/docs/glossary.html), "ReactElement is a light, stateless, immutable, virtual representation of a DOM Element".

Let's check our previous example again when we didn't use the JSX syntax:

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

This code is creating an h1 element. Think about it being like creating an element through JavaScript with the document.createElement() function, which makes the code very readable.

JSX is not mandatory, but it's highly recommended. It is painful to create large and complex components using JavaScript. For example, if we want to create nested elements using JSX, we would need to do the following:

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

However, using plain JavaScript ReactJS objects, it would look like this:

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")
            )
        )
    );
  }
});

We can see a big scary component that might grow in case of more complex logic. Such complex components are difficult to maintain and understand.