React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
使用 JSX
JSX 看起来类似 HTML ，我们可以看下实例:
ReactDOM.render(
<div>
<h1>欢迎学习 React</h1>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
运行结果
在 JSX中使用JavaScript 表达式
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
运行结果为：2。
我们可以在JSX中的大括号内放置任何有效的JavaScript表达式。例如user.firstName或者formatName(user)都是有效的JavaScript表达式。
在下面的示例中，我们将调用JavaScript函数的结果嵌入formatName(user)到<h1>元素中。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez',
};
const element = <h1>Hello, {formatName(user)}!</h1>;
ReactDOM.render(element, document.getElementById('root'));
在 JSX 中不能使用 if else 语句，但可以使用三元运算表达式或二元运算表达式来替代。
三元运算：
class HelloComponent extends React.Component({
render(){
return <h1>Hello {this.props.name?this.props.name:'world'}</h1>;
}
});
ReactDOM.render(
<HelloComponent name="ReactJS"/>,
document.getElementById('reactContainer')
)
因为<HelloComponent name="ReactJS"/>有name属性值，所以运行结果为：ReactJS
二元运算：
class HelloComponent extends React.Component({
render(){
return <h1>Hello {this.props.name || 'world'}</h1>;
}
});
ReactDOM.render(
<HelloComponent />,
document.getElementById('reactContainer')
)
因为<HelloComponent />没有name属性值，所以运行结果为：World
样式
React 推荐使用内联样式。我们可以使用 camelCase语法来设置内联样式. React 会在指定元素数字后自动添加px 。
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>欢迎学习 React</h1>,
document.getElementById('example')
);
运行结果
注释
注释需要写在花括号中，实例如下：
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<div>
<h1 style = {myStyle}>欢迎学习 React</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
数组
JSX 允许在模板中插入数组，数组会自动展开所有成员
var arr = [
<h1>欢迎学习 React</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
运行结果：
数组
