由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。
React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。React不一定非要使用JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为JavaScript代码后进行了优化
- 它是类型安全的，在编译过程中就能发现错误
- 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
- jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行
在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签，引入解析jsx语法的babel类库，注意后续的script标签块中使用了jsx语法，则一定要申明类型 type="text/babel"，否则babel将不进行解析jsx语法。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hell world</title> </head> <body> <!-- 用于内容显示容器 挂载点 --> <div id="app"></div> <!-- react核心类库 --> <script src="./js/react.development.js"></script> <!-- dom操作 --> <script src="./js/react-dom.development.js"></script> <!-- 解析jsx语法的兼容库 --> <script src="./js/babel.min.js"></script> <script type="text/babel"> const app = document.querySelector('#app') // 如果是单行则不需要小括号，多行需要使用小括号括起来 const vnode = (<div> <dl> <dt>标题1</dt> <dd>新闻1</dd> <dd>新闻2</dd> </dl> <dl> <dt>标题2</dt> <dd>新闻3</dd> <dd>新闻4</dd> </dl> </div>) // 把虚拟dom转为真实的dom并挂载到页面中 ReactDOM.render(vnode, app) // 虚拟dom // const el = React.createElement /* const vnode = el( 'div', null, el('h1', { id: 100 }, 'hello world'), el('h1', { id: 100 }, 'hello world'), ) */ /* const vnode = el( 'div', null, el('dl', null, el('dt',null,'标题1'), el('dd',null,'新闻1'), el('dd',null,'新闻2'), ), el('dl', null, el('dt',null,'标题2'), el('dd',null,'新闻3'), el('dd',null,'新闻4'), ), ) */ // // 把虚拟dom转为真实的dom并挂载到页面中 // ReactDOM.render(vnode, app) </script> </body> </html>