React JSX

JSX is a core component of React, which uses XML tags to directly declare interfaces that can be nested between each other.

React uses JSX instead of regular JavaScript.

JSX is a JavaScript syntax extension that looks a lot like XML.

We don't necessarily need to use JSX, but it has the following benefits:

  • JSX executes faster because it is optimized after compiling JavaScript code.
  • It is type-safe and errors can be found during compilation.
  • Writing templates with JSX is easier and faster.

Use JSX

JSX looks like HTML, so let's look at the following example: 

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

We can nest multiple HTML tags in the code above, we need to wrap it with a div element, the p element in the instance adds a custom property data-myattribute, and the custom property adds a data-prefix. 

ReactDOM.render(
    <div>
	<h1>W3Cschool教程</h1>
	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>,
    document.getElementById('example')
);

Try it out . . .

A stand-alone file

Your React JSX code can be placed on a stand-alone file, for example, we helloworld_react.js file with the following code: 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

The JS file is then introduced into the HTML file: 

<body>
    <div id="example"></div>
    <script type="text/babel" src="helloworld_react.js"></script>
</body>

Try it out . . .

JavaScript expression

We can use JavaScript expressions in JSX. T he expression is written in {} Here's an example: 

ReactDOM.render(
    <div>
        <h1>{1+1}</h1>
    </div>,
    document.getElementById('example')
);

Try it out . . .

The if else statement cannot be used in JSX, but can be replaced by a conditional (3-way operation) expression alone. In the following example, if the variable i equals 1 the browser outputs true, and if the value of i is modified, false is output . 

ReactDOM.render(
    <div>
        <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>,
    document.getElementById('example')
);

Try it out . . .

Style

React recommends using inline styles. W e can use the camelCase syntax to set the inline style. R eact automatically adds px after specifying the element number. The following example demonstrates adding a myStyle inline style to an h1 element: 

var myStyle = {
    fontSize : 100,
    color : "#FF0000"
};
ReactDOM.render(
    <h1 style = {myStyle}>W3Cschool教程</h1>,
    document.getElementById('example')
);

Try it out . . .

Comments

Comments need to be written in parentheses, as follows: 

ReactDOM.render(
    <div>
        <h1>W3Cschool教程</h1>
        {/*注释...*/}
    </div>,
    document.getElementById('example')
);

Try it out . . .

Array

JSX allows arrays to be inserted into the template, and the array automatically expands all members: 

var arr = [
    <h1>W3Cschool教程</h1>,
    <h2>从W3Cschool开始！</h2>,
];
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
);

Try it out . . .

HTML tag vs. React component

React can render HTML tags (strings) or React components (classes).

To render HTML tags, simply use the label name of the lowercase letter in JSX. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

To render the React component, simply create a local variable that begins with a capital letter. 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

React's JSX uses large, small-case conventions to distinguish between classes and HTML tags for local components.

Attention:

Because JSX is JavaScript, some identifiers like class and class for recommended as XML property names. Instead, React DOM uses className and htmlFor as corresponding properties.