前置简介
我们讲解了基本的React使用，但是基础的写法太繁琐，
所以就有了 JSX ,
X标识拓展版，所以JSX就是JS拓展版。
Vue中有 vue-loader , .vue文件里写 template、script、style 三个标签，通过vue-loader就可以变成一个组件，
所以React就有了一个jsx-loader, 不过现在已经被babel-loader取代了，所以现在用的都是babel-loader，
babel-loader现在已经被webpack内置在了其一部分中。
使用CDN方式引入JSX
首先引入babel js ，
`<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>`
然后添加一个 `<script type="text/babel">` 标签，在这个标签里写jsx的语法，
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.9.0/umd/react.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script type="text/babel">
// 定义一个n变量
let n = 0
// 使用React创建一个div对象，class属性是red，内容是变量n 以及 一个button元素，点击事件是让n这个变量+1 , 并且重新渲染App元素
const App = () => (
<div className="red">
{n}
<button onClick={
() => {
n += 1
render()
}
}>
+1
</button>
</div>
);
const render = () => {
ReactDOM.render(<App/>, document.querySelector("#root"))
}
render()
</script>
</body>
</html>
```
重点观察一下 text/babel 标签里的代码，对比之前的要简介很多，
这种方式的原理就是 text/babel这个标签里的代码，浏览器是不认识的，
但是babel.min.js 会把这里面的代码替换为浏览器认识的JS代码，CDN引入方式大致就是如此。
使用create-react-app方式引入JSX
首先还是 yarn global add create-react-app 安装create-react-app工具，
初始化项目 create-react-app myproject，
这时候进入项目src文件夹下，查看App.js，默认就使用了JSX的语法，因为webpack默认就是让JS走babel-loader那一套。
使用JSX的注意事项
-
注意className
<div className="red">n</div>被转义成
React.createElement('div',{className:'red'},n)注意className不要写成class，因为你看起来是html代码，其实还是js代码，不要写错。
-
插入变量
标签里的所有JS代码都要用{}包起来
如果你需要变量n，那么就用{}把n包起来
如果你需要对象，那么就要用{}把对象包起来，如 {{name:'张三'}}
-
习惯return后面加上 ()
如下
function App() {
return
<div className="App">
content
</div>
;
}
这样会出错，因为return后面有空格，代码翻译的时候会return一个undefined回去,
所以请将return后面的()加上，用括号把代码包起来，代表返回一个代码块。
- import React from 'react';
import React from 'react';
function App() {
return (
<div className="App">
content
</div>
);
}
export default App;
这里虽然import进来的React在代码里看起来是没有使用的，但是因为return后面的代码翻译成js是，
React.createElement('div',{className:'App'},"content") ,
所以如果不import React就会出错，请注意。
