事实上，每个 JSX 元素一个语法糖，它们最终还是会调用React.createElement(component, props, ...children) 方法来创建 React 元素。不过我们写起来更加简单且直观
JSX 初体验我们将所有 createElement 创建的元素改写成 JSX
得到如下完整 HTML 页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> <script crossorigin src="http://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="http://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> </head> <body> <div></div> </body> <script> const h1 = <h1>Hello,React!</h1>; const p = <p>第一次学react，太简单了吧</p>; const header = ( <header> <h1>Hello,React!</h1> </header> ); const section = ( <section> <p>第一次学react，太简单了吧</p> </section> ); const div = ( <div> <header> <h1>Hello,React!</h1> </header> <section> <p>第一次学react，太简单了吧</p> </section> </div> ); ReactDOM.render(div, document.querySelector("#root")); </script> </html>在浏览器中打开，会发现页面上的元素并没有得到正确的渲染
并且控制台输出了错误：Uncaught SyntaxError: Unexpected token '<'
这是因为浏览器并不认识 JSX，JSX 只是 React 团队自己造的东西，我们需要把 JSX 转换成符合 JS 规范的语法，这样浏览器就认识了
这跟将 ES6 语法转换成 ES5 差不多
什么东西能把 ES6 语法转换成 ES5 ？
没错，Babel
同样，借助 Babel 我们可以将 JSX 转换成 JS 语法
在页面中添加如下 script 标签
<script src="http://unpkg.com/babel-standalone@6/babel.min.js"></script>并将 script 标签（指包含 JSX 语法的 script）的 type 属性改为：text/babel
<script type="text/babel"> const h1 = <h1>Hello,React!</h1>; </script>现在，元素可以正确的显示了
在线代码
现在，我们已经学会了如何用 React 来创建元素和渲染元素，也初步了解了创建元素的方法的语法糖 JSX。