JSX:
1, 全稱： JavaScript XML;
2, react定義的一種類似于XML的JS擴(kuò)展語(yǔ)法 ： JS + XML
3, 本質(zhì)是React.createElement(component,props,....children) 方法的語(yǔ)法糖
4, 作用：用來(lái)創(chuàng)建虛擬DOM
a. 寫法： var ele = <h1>Hello JSX</h1>
b. 注意1： 它不是字符串， 也不是HTML/XML標(biāo)簽
c. 注意2： 它最終產(chǎn)生的就是一個(gè)JS對(duì)象
5, 標(biāo)簽名任意：HTML標(biāo)簽或其它標(biāo)簽
JSX語(yǔ)法規(guī)則：
1， 定義虛擬DOM時(shí)，不要寫引號(hào)
2， 標(biāo)簽中混入JS表達(dá)式時(shí)，要用{}[注意區(qū)分JS語(yǔ)句與JS表達(dá)式]
3, 樣式的類名指定不要用class(React關(guān)鍵詞), 要用className
4, 內(nèi)聯(lián)樣式，要用style={{key:value}}的形式去寫外面{},代表js,里面{}代表json
5, 只有一個(gè)根標(biāo)簽
6, 標(biāo)簽必須閉合
7, 標(biāo)簽首字母：
1> 若小寫字母開(kāi)頭，則將改標(biāo)簽轉(zhuǎn)為html中同名元素， 若html中無(wú)該標(biāo)簽對(duì)應(yīng)的同名元素，則報(bào)錯(cuò)
2> 若大寫字母開(kāi)頭，react就去渲染對(duì)應(yīng)的組件，若組件沒(méi)有定義，則報(bào)錯(cuò)區(qū)分JS語(yǔ)句與表達(dá)式：
一定要注意區(qū)分：【JS語(yǔ)句(代碼)】與【JS表達(dá)式】
1. 表達(dá)式： 一個(gè)表達(dá)式會(huì)產(chǎn)生一個(gè)值， 可以放在任何一個(gè)需要值的地方
下面這些都是表達(dá)式：
1> a
2> a + b
3> arr.map()
4> function test(){}即使沒(méi)有return , 也會(huì)返回函數(shù)本身
2. 語(yǔ)句(代碼):
下面這些都是語(yǔ)句(代碼)
1> if(){}
2> for(){}
3> switch(){case:xxxx}
key是虛擬dom標(biāo)簽的唯一標(biāo)識(shí), diffing算法靠key來(lái)區(qū)分不同, 是不是同一個(gè)key
實(shí)例如下：
<!-- 準(zhǔn)備好一個(gè) "容器" 用來(lái)放React的東西-->
<div id="test"></div>
<!-- 引入react核心庫(kù) 全局多一個(gè)對(duì)象React -->
<script src="../../js/react.development.js"></script>
<!-- 引入react-dom, 用于支持react操作DOM 全局又多一個(gè)對(duì)象ReactDOM -->
<script src="../../js/react-dom.development.js"></script>
<!-- 引入babel, 用于將JSX轉(zhuǎn)為JS -->
<script src="../../js/babel.min.js"></script>
<script type="text/babel"> //此處一定要寫babel， 不寫默認(rèn)是JS
let myId = "testDiv";
let content = "Hello,React";
const VDOM = (
<div>
<h1 id={myId} className="title" style={{color:'#fff'}}>
{content}
</h1>
<input type="text" name="" id="" />
</div>
)
ReactDOM.render(VDOM,document.getElementById("test"));