jsx 重點

1、jsx 是html like的js語法擴充, 很像html，只是寫在js file，透過complier轉成一般js


2、jsx語法可以在任何js語法可以出現的地方出現，可以存入變數，可以傳遞給函數…


3、jsx 只能有一個最外層元素，以html比喻就是最外層標籤不能有其他sibling，這很好達成，有需要的時候只要在最外層包上一層div即可


4、當jsx語法超過一行時，需用中括號 ( ) 包起來


5、雖然jsx和html語法幾乎一樣，但還是有不同的地方:

class:
在jsx裡面要用className而不能用class，這是因為jsx會轉譯為js，而class是js的保留關鍵字

當jsx render時className就會自動轉為class屬性

self-closing element:
例如<img />, <input />這類標籤，在html "/" 反斜線可加可不加，但在jsx則是必須加，否則會出現錯誤

event listener attribute:
html語法掛載事件handler的屬性名稱是全小寫，例如onclick、onmouseover，而在jsx則是使用camelCase，例如onClick、onMouseOver，然後指定function時記得用 { } 而不是 "" ，因為是jsx語法

lists:
當一個jsx標籤中包含多個li元素時，在某些情況下，需使用jsx專有的key屬性給予唯一的值以確保排序順序的正確性，否則可能產生預期之外的排序結果，需使用key的情況如下:
1、當lists元素需記憶狀態時，例如是否有打勾
2、當lists元素順序可能被打亂時，例如搜尋結果可能是隨機排序的，而你希望他保有一致性

如果不確定是否該使用key，那就都用吧，無傷大雅
語法如下:
<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
  <li key="li-03">Example3</li>

</ul>


6、在jsx標籤中的js語法會被視為文字，想要在jsx標籤中注入js語法，只要用大括號 { } 將js語法包起來即可，但有一個限制是不能注入(inject) if條件式到jsx語法中，可在外部處理if判斷，或是改用三元條件式或是自觸發函數、或是&&運算
原因及範例請參考: FB官方文件 、 &&運算範例

當注入js語法在jsx標籤中，注入的js和其他js是在同一個環境中，意思是在jsx外宣告的變數，可以在jsx裡面存取


7、你可以不使用jsx，jsx實際上會轉譯為js

var h1 = <h1>Hello world</h1>;

會轉譯為以下的js語法

var h1 = React.createElement(
  "h1",
  null,
  "Hello, world"

);

所以如果你想，你可以不使用jsx語法


8、在jsx中inline style寫法為:

<div style={{ color:'purple', width: '300px'}}></div>

在jsx中設定inline style屬性的方式是傳遞一個js物件做為設定依據

當你在jsx中注入js，而且注入的內容僅僅只是一個物件表示式，那很自然的就會是以兩個大括號結束

外層大括號代表注入js，內層大括號則是js的物件定義符號，所以兩個大括號並非表示什麼特殊語法，只是容易讓人誤以為有特殊意義

如果你是另外定義一個物件再傳入，就會像下列這樣

const styles = {
    color: 'purple',
    width: '300px'
};

<div style={styles}></div>

所以要記得的是在jsx中設定inline style屬性的方式是傳遞一個js物件做為設定依據


9、在正規js中，style屬性名稱都是小寫，並用"-"連接，但要注入jsx中的style屬性物件，屬性名稱是用camelCase方式定義，如下例:

一般js的style設定物件屬性名稱語法:
{
    background-color: 'purple',
    width: '100px'
}

要注入jsx inline style的物件屬性名稱語法:
{
    backgroundColor: 'purple',
    width: '100px'

}

10、在正規js中，style屬性值都是以文字表示，而在jsx 的style定義物件中，屬性值若是以數字表示，則預設單位是"px"，但一樣可以用一般js的方式表示，jsx只是提供一個方便的處理方式，如下例:

一般js:
{
     font-size: '30px',
     height: '100vh'
}


jsx inline style 屬性值:
{
     fontSize: 30,
     height: '100vh'

}