写在前面

jsx 语法是使用 React 框架的门槛，但其实 jsx 语法并不复杂，简单来说就是在 js 中写 html 语法，。

1. 注意 className

需要注意的是在 jsx 中的 class 是 className，如下：

  1. <div className="red">n</div>
  3. //其会被babel-loader翻译成
  4. React.createElement("div",{className: red},n);

2. {}插入变量

在标签里的所有 js 代码要用 {} 包起来

3. return 后面加 ()

使用 jsx 实现 demo1

  1. <body>
  2.     <div id="app"></div>
  3.     <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
  4.     <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
  5.     <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  6.     <script type="text/babel">
  7.       let n = 0;
  8.       const App = () => (
  9.         <div>
  10.           {n}
  11.           <button
  12.             onClick={() => {
  13.               n += 1;
  14.               render();
  15.             }}
  16.           >
  17.             +1
  18.           </button>
  19.         </div>
  20.       );
  21.       const render = () => ReactDOM.render(<App />, document.querySelector("#app"));
  22.       render();
  23.     </script>
  24.   </body>