3.4. React JSX

React use JSX instead of regular JavaScript.

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

We don’t need to use JSX necessarily, but it has the following advantages:

JSX executes faster because it is optimized after being compiled into JavaScript code.
It is type-safe and errors can be found during compilation.
Writing templates in JSX is easier and faster.

Let’s take a look at the following code:

const element = <h1>Hello, world!</h1>;

The tag syntax, which may seem strange, is neither a string nor a HTML.

It is called JSX, a syntactic extension of JavaScript. We recommend it in the React use JSX to describe the user interface in.

JSX is implemented within JavaScript.

We know that elements are made up React the smallest unit of application, JSX is used to declare React the elements in it.

With the browser’s DOM elements are different. React the elements are actually ordinary objects, and React DOM ensures that the browser DOM the data content of the React elements are consistent.

To set the React element is rendered to root DOM node, we pass them all to the ReactDOM.render() to render it to the page

3.4.1. React instance ¶

varmyDivElement=
<divclassName="foo"/>;ReactDOM.render(myDivElement,document.getElementById('example'));

Note:

Because JSX is JavaScript, some identifiers are like class and for . It is not recommended as a XML property name. Instead, React DOM use className and htmlFor to make the corresponding properties.

Use JSX ¶

JSX looks like HTML, so we can take a look at an example:

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

We can nest multiple HTML tags in the above code, using a div element wraps it, the p element added a custom attribute data-myattribute to add custom properties, you need to use data- prefix.

3.4.2. React instance ¶

ReactDOM.render(<div> <h1>Rookie Tutorial</h1> <h2>Welcome to learn React</h2>
<pdata-myattribute="somevalue">This is a great JavaScript library!</p> </div>
,document.getElementById('example'));

Independent file ¶

Your React JSX code can be placed on a separate file, for example, we create a helloworld_react.js file, the code is as follows:

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

Then introduce the JS file into the HTML file:

3.4.3. React instance ¶

<body><divid="example"></div><scripttype="text/babel"src="helloworld_react.js"></script></body>

JavaScript expression ¶

We can use JavaScript expressions in JSX. The expression is written in curly braces {} . Examples are as follows:

3.4.4. React instance ¶

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

Cannot be used in JSX if else statement, but you can use the conditional (ternary operation) expression to replace. In the following example, if the variable i equal to 1 the browser will output true if you change the value of I, the output false .

3.4.5. React instance ¶

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

Style ¶

React inline style is recommended. We can use it. camelCase syntax to set the inline style. React will be automatically added after the element number is specified px . The following example shows how to create a h1 element addition myStyle inline style:

3.4.6. React instance ¶

varmyStyle={fontSize:100,color:'#FF0000'};
ReactDOM.render(<h1style={myStyle}>Rookie Tutorial</h1>,document.getElementById('example'));

Annotation ¶

Comments need to be written in curly braces. Examples are as follows:

3.4.7. React instance ¶

ReactDOM.render(<div>
<h1>Rookie Tutorial</h1>{/\*explanatory note...\*/}</div>,document.getElementById('example'));

Array ¶

JSX allows you to insert an array into the template, and the array automatically expands all its members:

3.4.8. React instance ¶

vararr=[<h1>Rookie Tutorial</h1>,
<h2>Learning is not only about technology, but also about dreams！</h2>,];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example'));