1、此处应用了三个库，必须首先加载，react.js是核心库，react-dom.js是提供与DOM相关的功能，babel.js的作用是将JSX语法转换为JavaScript语法，script标签加上type="text/babel"属性
2、ReactDOM.render是React的最基本的方法，用于将模板转换为HTML语言，并插入指定的DOM节点，两个参数，渲染内容和插入的节点
3、被称为 JSX，是一个 JavaScript 的语法扩展，JSX中使用插值表达式{ },并且JSX也是一个表达式；书写时会将 JSX 拆分为多行，同时，我们建议将内容包裹在括号中,这可以避免遇到自动插入分号陷阱
注意：
// JSX中的属性，你可以通过使用引号，来将属性值指定为字符串字面量：
// 在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。
// 你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，
// 对于同一属性不能同时使用这两种符号。
4、ReactDOM.render在所有内容渲染之前，都会将其转换为字符串，防止XSS攻击
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- 此处应用了三个库，必须首先加载，react.js是核心库，react-dom.js是提供与DOM相关的功能，Browser.js的作用是将JSX语法转换为JavaScript语法 -->
<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>
<title>JSX语法</title>
</head>
<body>
<div id="example"></div>
<!-- script标签的type属性为text/babel.这是因为React独有的JSX语法 -->
<!-- 它被称为 JSX，是一个 JavaScript 的语法扩展 -->
<script type="text/babel">
// ReactDOM.render是React的最基本的方法，用于将模板转换为HTML语言，并插入指定的DOM节点
const name = 'Josh Perez';
// JSX中使用插值表达式{},并且JSX也是一个表达式
const element = <h1>Hello, {name}!</h1>;
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
// 我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中,这可以避免遇到自动插入分号陷阱
const element2 = (
<h1>
Hello, {formatName(user)}!
</h1>
);
// JSX中的属性，你可以通过使用引号，来将属性值指定为字符串字面量：
// 在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。
// 你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，
// 对于同一属性不能同时使用这两种符号。
// 使用小驼峰命名，并且class类使用className
const element3 = <img tabIndex="0" src={user.avatarUrl} />;
// 所有内容渲染之前都转换成了字符串，防止XSS攻击
ReactDOM.render(
element2,
document.getElementById('example')
);
// HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，
</script>
</body>
</html>