[ JSX ] 的语法规则，一文就够了
什么是JSX？
要想写jsx的语法，那么就得先了解jsx是什么，有什么用？借用百度的话：
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
那么本质就出来了，JSX说白了就是js语法的一个扩展，是一个看起来很像 XML 的 JavaScript 语法扩展！我们也许不一定使用JSX，但是需要知道JSX有什么优点！
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化
- 它是类型安全的，在编译过程中就能发现错误
- 使用 JSX 编写模板更加简单快速
很是推荐在React中使用jsx代替常规的js，使用jsx来描述用户界面！总的来说啊，用React不使用jsx，就像吃方便面不撒调料包，木有灵魂🤓。我在第一次使用jsx时也是走了很多弯路，起初看着一个前端学弟在js里写了一句和js不想干的代码从此便入了jsx的坑！
JSX语法规则
首先，我们就不去新建完整的React项目了，普通的html就好，主要引入以下几个js
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
说一下这几个js库分别的作用
第一个：react.development.js，这个是React的核心库
第二个：react-dom.development.js，react-dom库，用于支持react操作dom
第三个：babel.js，这个很熟悉，起转换的作用，这里是将jsx转化为js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>
</html>
1. 定义虚拟DOM时，不要写引号
这个意思很简单，顾名思义，就是定义虚拟dom的时候，不要把它写成一个字符串。在js，jq中，我们应该写过这样的代码，jq的追加元素，我们追加的是字符串dom
var txt="<p>hello</p>"
$("body").append(txt);
在JSX中需要这么写！万万不要写成字符串了哦！
正确写法
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<div>
<h2>hello</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
2.标签中混入js表达式的时候，需要使用 { }
写vue写习惯了，上来就 {{ }} , 然后光荣报错。不过vue也是支持JSX的哦！
<script type="text/babel">
const app = document.getElementById('app')
const str = 'hello'
const VDOM = (
<div>
<h2>{str}</h2>
</div>
)
ReactDOM.render(VDOM, app)
</script>
得到的结果，与上图一致
