The best solution is to generate templates directly through JavaScript and then build user interfaces.

To make it simpler, there is a very simple and optional HTML-like syntax that generates templates through function calls, called JSX.

1. Why use JSX?

You don't need to use JSX for React, you can use JavaScript directly, but JSX is recommended because it is precise and is a common syntax for defining tree structures containing attributes.

 

2. React without JSX:

(1) The React.createElement() method can be used (see: http://blog.csdn.net/zhouziyu2011/article/details/70493185)；

(2) The React.createFactory() method (factory method) can be used (see: http://blog.csdn.net/zhouziyu2011/article/details/70792179)；

(3) React.DOM. * (React's built-in factory approach for HTML tags) can be used (see: http://blog.csdn.net/zhouziyu2011/article/details/70792179).

JSX is a JavaScript syntax extension that looks like XML.

 

3. The characteristics of JSX:

JSX is not necessary;

JSX is very small;

JSX is similar to HTML, but not exactly the same.

 

4. HTML Label VS React Component

React can render HTML tags or React component classes: to render HTML tags, you only need to use lowercase signatures in JSX; to render React components, you only need to create a local variable at the beginning of an uppercase letter. That is, JSX uses upper and lower case to distinguish React component classes from HTML tags.

Note: Since JSX is JavaScript, class and for identifiers are not recommended as attribute names, React DOM uses className and htmlFor as corresponding attribute names.

 

5. JSX and native JavaScript:

The syntax in JSX form is compiled into native JavaScript form:

Elements, attributes, and child nodes in JSX-style grammar are converted into parameters of React.createElement () in native JavaScript:

①　JSX:

React.createElement('a', {href: 'https://www.baidu.com'}, 'Hello React!') 

Native JavaScript:

<a href="https://www.baidu.com">Hello React!</a>

When a component class is created by React.createClass, the display name of the component class can be defined by the displayName attribute, but this is optional. When the display name is not defined, JSX infers the display name of the component class based on variable assignment, that is, the variable name assigned to the component class. Therefore, displayName genera are not explicitly set. Sex.

①　JSX:

var Box = React.createClass({
	...
});  

Native JavaScript:

var Box = React.createClass({
	displayName: "Box",
	...
});

 

6. Named Components

If you build a component with many subcomponents, such as a form, you may end up with many variable declarations.

Therefore, named components support a single component, with other subcomponents as its attributes.

①　JSX:

var FormBox = React.createClass({ ... });
FormBox.Label = React.createClass({ ... });
FormBox.Input = React.createClass({ ... });
FormBox.Button = React.createClass({ ... });

Native JavaScript:

var FormBox = (
	React.createElement(FormBox, null,
    		React.createElement(FormBox.Label, null,
			React.createElement(FormBox.Input, null),
			React.createElement(Form.Button, null)
    		)
  	)
);

Note: Named components are available only at v0.11 and above.

 

7. JavaScript expressions

Attribute expression:

To use JavaScript expressions as attribute values, just wrap them in a pair of braces {} instead of quotes'.

ReactDOM.render(  
    	<TimeBox time={new Date().getHours() > 12 ? new Date().getHours() - 12 + "PM": new Date().getHours() + "AM"} />, 
    	document.getElementById('timeBox')  
);  

(2) Boolean attributes:

Omitting the value of an attribute causes JSX to treat it as true, and to pass a value false, an attribute expression must be used. This often occurs in HTML form elements, such as disabled, required, checked, and readOnly.

eg1:

ReactDOM.render(  
    	<input type="button" value="submit" disabled />,  
    	document.getElementById('timeBox')  
);  

Equivalent to:

ReactDOM.render(  
    	<input type="button" value="submit" disabled="true" />,  
    	document.getElementById('timeBox')  
);

It is also equivalent to:

ReactDOM.render(  
    	<input type="button" value="submit" disabled={true} />,  
    	document.getElementById('timeBox')  
);

eg2:

ReactDOM.render(  
    	<input type="button" value="submit"/>,  
    	document.getElementById('timeBox')  
); 

Equivalent to:

ReactDOM.render(  
    	<input type="button" value="submit" disabled="false" />,  
    	document.getElementById('timeBox')  
);

It is also equivalent to:

ReactDOM.render(  
    	<input type="button" value="submit" disabled={false} />,  
    	document.getElementById('timeBox')  
);

(3) Subnode expression:

Similarly, JavaScript expressions can be used to describe subnodes:

var TimeBox = React.createClass({  
    	render:function(){  
        	return (  
            		<p>{new Date().getHours() > 12 ? new Date().getHours() - 12 + "PM": new Date().getHours() + "AM"}</p>  
        	);  
    	}  
});
ReactDOM.render(  
    	<TimeBox />,  
    	document.getElementById('timeBox')  
);  

 

8. Notes

When adding annotations to a label's child node block, surround the part to be annotated with {}.