前言

開始前我們先直接上一段程式碼

const element = <div style= {{ color: red }}>123</div>

讀者看到這邊應該會很好奇為何我們可以直接在 JavaScript 上，直接撰寫 HTML、CSS。注意喔，
<div style= {{ color: red }}>123</div> 這段程式碼前後並沒有單引號所以不是字串喔！
這種可以直接在 JavaScript 上撰寫 HTML 的做法就是 JSX。

何謂 JSX

這種類似 HTML 的語法結構，是 React 自創的語法，它可以讓我們直接把程式邏輯跟 UI 直接放一起。
範例：

import React from 'react'; //以前舊版本需要，目前新世代都不需要

function App(){
   return (
      <div>
	         <h1>Demo<h1/>
      </div>
   )
}

export default App;

運作流程

return React.creatElement(
    'div',
    {},
    React.createElement('h1',{}, 'Demo');
);
// createElement 會帶三個參數，第一個是標籤 第二個是物件 最後一個則是其他子元素

補充：

JSX 其實每次在 return 是就是一個 function ，也因此我們不會在 return 中寫兩個 function 。所以我們外層一定有 div 包住的主因。而這也是為什麼 React 只能掛載在一個 rootElement 原因，我們看它資料結構就蠻清楚為何我們不能回傳兩個 div 。

注意事項

1. JSX 語法中只能有一個根元素
2. 撰寫變數或是表達式必須要用花括號 {} 包起來
3. 撰寫 className 必須為小駝峰，例如：<div className="Demo"></div>
4. 必須透過 Babel 編譯，才能使用

參考資料

• React JSX
• React篇: JSX語法撰寫指引