JSX：

在React (import React from 'react';) 寫的看似HTML的語法，其實都是JSX，而JSX 單純只是 React.createElement(component, props, ...children) function 的一個語法糖，寫好的JSX語法會透過babel等工具轉譯成原生的JS，所以若你不使用JSX語法，單純寫JS也是可以的，或是可以參考社群專案像是 react-hyperscript 和 hyperscript-helpers，這些專案提供了更為簡潔的語法。

JSX語法：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

編譯成

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

如果想知道JSX語法會被編譯成什麼樣子，可以參考這個網站

JSX語法需要注意：

  • 原本在HTML的class屬性，在JSX必須改成className，因class為JSX關鍵字 (但新版本可直接使用class了)
    <div className="test">TEST</div>
  • JSX中所有元素都需要有閉合標籤
    <div>content</div> 或 <img /> (self-closing)
  • 事件觸發需使用駝峰式命名
    <div onClick={() => console.log('click test')}>Click Me</div>
  • style 屬性要以 JS 物件的格式撰寫，採用駝峰式命名法而非dash(-)，單位要用單引號包住 (例: ‘50%’)。外面則要再加上一層大括號，這樣指的是使用JSX語法。
    <p style={{fontSize: '15px',marginTop: '20px'}}>Some text</p>

參考資料：

深入 JSX、JSX 語法 ＆＆ Virtual DOM