jsx 语法是使用 React 框架的门槛，但其实 jsx 语法并不复杂，简单来说就是在 js 中写 html 语法。jsx 中的 x 虽然是 xml 语法，但是 xml 语法完全兼容 html 语法，在写的时候当 html 语法写即可，但是要时刻牢记 jsx 里面的实际是 xml 语法。
需要注意的是在 jsx 中的 class 是 className，如下：
<div className="red">n</div>
//其会被babel翻译成
React.createElement("div",{className: red},n);
在标签里的所有 js 代码要用 {} 包起来
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel">
let n = 0;
const App = () => (
<div>
{n}
<button
onClick={() => {
n += 1;
render();
}}
>
+1
</button>
</div>
);
const render = () => ReactDOM.render(<App />, document.querySelector("#app"));
render();
</script>
</body>
原文：https://www.cnblogs.com/lovevin/p/13226285.html