在React中啓用JSX語法
1. 淘汰React.createElement()寫法
如果採用React.createElement()創建虛擬DOM的方法來寫頁面，如果頁面上有成百上千個元素，而且元素之間有複雜的嵌套關係，這種寫法就太麻煩了。對於頁面UI元素來說，最簡單最有效的書寫形式就是寫HTML，因爲HTML是最優秀的標記語言。能不能像下面這樣來創建虛擬DOM元素呢？
const mydiv = <div id="mydiv">這是一個div元素</div>
答案是可以的。像這種在JS中混合寫入類似於HTML的語法，叫做JSX語法——符合XML規範的JS。但是在JS文件中，默認是不能寫這種類似於HTML的標記的。如果想讓以上寫法生效，需要用到babel來轉換這些JS中的標籤。
2. 引入babel
可以像下面這樣引入babel：
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
// 此區域可以寫JSX語法
</script>
注意：這種在瀏覽器中使用babel來編譯JSX的方式效率是非常低的，生產環境中不建議使用。
這裏我們用到的JSX語法的本質其實就是在運行的時候通過babel將JSX語法轉換成React.createElement()的API調用。JSX中的標籤我們可以把它看成是對象，因此它不像HTML那樣是直接放到瀏覽器上顯示的，是作爲JS對象最終通過ReactDOM.render()方法渲染到瀏覽器上的。
3. JSX語法注意事項
- 在JSX語法中，要把JS代碼寫到{ }中。
- JSX語法控制的區域寫註釋，也要把註釋寫到{ }中。 推薦{/* */}寫法。
- 爲JSX中的元素添加class類名，需要使用className來替代class；htmlFor替換label標籤的for屬性。很明顯，這是爲了與JS關鍵字進行區分。
- 在JSX創建DOM的時候，所有的節點，必須有唯一的根元素進行包裹。
- 在JSX語法中，標籤必須成對出現，如果是單標籤，則必須自閉和！因爲XML規範要比HTML嚴格得多。
當編譯引擎在編譯JSX代碼的時候，如果遇到了<那麼就把它當作HTML代碼去編譯，如果遇到了{}就把花括號內部的代碼當作普通JS代碼去編譯。
4. 使用JSX語法
React03.html演示了JSX語法的具體用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React03</title>
<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>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let id = "myDiv"; // 爲屬性綁定值
let num = 10; // 渲染數字
let str = '你好，中國'; // 渲染字符串
let boo = true; // 渲染布爾值
const p = <p>哈哈哈</p>; // 渲染JSX元素
const arr = [ // 渲染JSX元素數組
<h2>我是H2</h2>,
<h3>我是H3</h3>
];
const mydiv = <div id={id} title="this is a div" style={{color: "red", backgroundColor: "yellow"}}>
這是div
<h1>這是一個大大的H1</h1>
{num + 2}
<hr/>
{str}
{/* 這是註釋 */}
<hr/>
{boo.toString()}
<hr/>
{p}
<hr/>
{arr}
<hr/>
<p className="testClass">測試類名</p>
<hr/>
<label htmlFor="testFor">測試for屬性</label>
<hr/>
</div>;
ReactDOM.render(
mydiv,
document.getElementById('app')
);
</script>
</body>
</html>
運行結果如下：
打開控制檯之後發現，報瞭如下警告：
提示我們數組當中的每一個元素都應該有一個key值，關於key值的重要性我們明天再來說明😊