JSX 初体验举个栗子：点击按钮加1。使用 https://codesandbox.io/ 进行测试 JXS 的条件判断

我们知道 JSX 语言是用来简化 React 代码，那么如何使用呢？

方法一：CDN

ps:不要在生产环境使用该方法，效率低并且还要下载 babel.min.js

引入 babel.min.js
给 script 改成加上 type="text/babel"
浏览器就不会对上述代码进行识别
babel 会将代码自动翻译成一段字符串的 js 代码
并将该代码包上 script 标签去替换
因此浏览器即可识别
它是在浏览器端将 JSX 翻译成 JS 举个栗子：点击按钮加1。使用 codesandbox.io/ 进行测试
未使用 JSX 之前

// index.html
<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="src/index.js"></script>
  </body>
  
// index.js
const React = window.React;
const ReactDOM = window.ReactDOM;
let n = 0;
const App = () =>
  React.createElement("div", null, [
    n,
    React.createElement(
      "button",
      {onClick: () => { n += 1; ReactDOM.render(App(), document.querySelector("#app")); }},
      "+1"
    )
  ]);

ReactDOM.render(App(), document.querySelector("#app"));

引入 babel.min.js

// index.html
<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.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.js"></script>
    <script type="text/babel">
      let n = 0;
      const App = () => (
        <div>{n}		// 相当于 React.createElement("div")
          <button onClick={() => {n += 1;render();}}> +1 </button>
        </div>
      );
      const render = () =>ReactDOM.render(<App />, document.querySelector("#app"));
      render();
    </script>
  </body>

方法二：使用 create-react-app

全局安装 yarn global add create-react-app
创建一个 React 应用，初始化目录：create-react-app react-demo-1
进入目录 cd react-demo-1
开发：yarn start
App.js 默认使用了 JSX 语法

使用 JSX 注意事项

使用 className 即： React.createElement('div',{className:'red'},'n')
标签用标签形式写
标签里面的所有 JS 代码要用 {} 包起来
return 后面加 ()

JXS 的条件判断 if...else...

写法一：

const Component = () => {return n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>}

写法二：

const Component = () => {const content = (<div>{n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span> }</div>)return content}

JXS 循环语句 loop

写法一：

// App.js
import React from 'react';

const App =()=>{
  return (<Component numbers={[2,4,6]}/>)
}
const Component = (props)=>{
  const array =[]
  for(let i=0;i<props.numbers.length;i++){
    array.push(
      <div>{i}: 
      {props.numbers[i]}</div>
    )
  }
return array
}
export default App;

写法二：

import React from 'react';

const App =()=>{
  return (<Component numbers={[2,4,6]}/>)
}
const Component = (props) => {
return props.numbers.map((n,index)=>{return <div>下标：{index}，值：{n}</div>})
}
export default App;

总结

JXS 将 XML 转译为 React.createElement
使用 {} 插入 JS 代码
create-react-app 默认将 JS 当作 JSX 处理
if...else loop 要用原生 JS 实现