JSX
JavaScript Syntax Extension
或稱JavaScript XML
一種JavaScript的語法擴充
const element = <h1>Hello, world</h1>;
試圖將當時流行的XML納入設計
React藉此產生自有元件
在React上的使用
React認為算繪的邏輯本質上和其他UI邏輯內容耦合
沒有採用人為式分離標記與邏輯至不同檔案
將兩者共同存於「模組」的鬆散耦合單元
藉此實現關注點分離
內嵌表達式
在JSX裡使用JS
使用大括號{}嵌入表達式
code:javascript
const name = 'Josh Perez';
const element = <h1>Hello, {name ? name : 'John Doe'}</h1>;
JSX也是一種表達式
編譯之後,JSX表達式會轉換為普通的JavaScript函式呼叫
取值後回傳JavaScript物件
也就是說,你可以
在if語法和for迴圈的程式碼區塊使用JSX
儲存JSX至變數
從函式中回傳JSX
和HTML的差異
JSX更接近過去的XHTML
tagName會區分大小寫
小寫開頭會分類為DOM元素
大寫開頭會分類為React元件
使用.可存取JS物件成員
這種情況即使是小寫開頭也會分類為React元件
不可省略結束標籤
自前のJSX実装を作るために必要な全ての知識