## 1.jsx的特點
> JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。
> 它是類型安全的，在編譯過程中就能發現錯誤。
> 使用 JSX 編寫模板更加簡單快速。
```
`const element = <h1>Hello, world!</h1>;`
```
這種看起來可能有些奇怪的標簽語法既不是字符串也不是 HTML。
它被稱為 JSX， 一種 JavaScript 的語法擴展。 我們推薦在 React 中使用 JSX 來描述用戶界面。
包括像在jsx中嵌套很多元素也是允許的，如下
```
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
```
Babel 會把 JSX 轉譯成一個名為 React.createElement() 函數調用。
以下兩種示例代碼完全等效：
```
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
```
React.createElement() 會預先執行一些檢查，以幫助你編寫無錯代碼，但實際上它創建了一個這樣的對象：
```
// 注意：這是簡化過的結構
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
```
說白了，jsx其實就是允許用戶在js中能夠像編寫普通html那樣，而不需要去拼接一大堆字符串
那既然我們在js中可以正常編寫html，那么如果有變量的話怎么辦，我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下
```
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
```
也就是大括號提供了一個js執行環境，可以寫任意的js表達式，但是不能寫語句
元素的屬性等如果要用變量表示也是通過話括號表示如下
```
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>react</h1>,
document.getElementById('example')
);
```
特殊的，class在jsx中要寫為className，因為class在js中會識別為類
易錯點：樣式接受一個樣式對象，但是前提是需要花括號提供js環境
```
//錯誤
ReactDOM.render(
<h1 style = {fontSize:12}>react</h1>,
document.getElementById('example')
);
```
```
//正確：
ReactDOM.render(
<h1 style = {{fontSize:12}}>react</h1>,
document.getElementById('example')
);
```
樣式中不能使用橫線連接，要使用駝峰式命名，數字的單位可以省略， React 會在指定元素數字后自動添加 px
特殊的，jsx中可以直接插入數組，
```
var arr = [
<h1>react</h1>,
<h2>學習react</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
```
關于注釋，標簽之中的注釋要寫在花括號中，標簽之外的注釋正常編寫就可以，如下
```
ReactDOM.render(
/*注釋 */
<h1>張三 {/*注釋*/}</h1>,
document.getElementById('example')
);
```
