我們前面講完了甚麼是React Component 相信大家對於React應該都有了更深的了解，今天我要來介紹的就是JSX!

甚麼是JSX?

JSX全名是JavaScript XML，是一個 JavaScript 的語法擴充，格式比較像是模版語言，你可以在寫 React 的時候透過這個語法來描述使用者介面的外觀，JSX看上去很像HTML，但要注意，這個有趣的標籤語法不是一個字串也不是 HTML，那JSX與HTML最大的不同在哪呢? JSX與HTML最大的不同在於你可以在HTML中加入邏輯或者是動態變數。

為甚麼要用JSX，他有甚麼好處?

• 提供讓人更好理解易讀的標籤
• 更加簡潔
  我會介紹使用JSX和不使用JSX的差別，這是一段用了JSX的程式碼

<a href="https://www.youtube.com/watch?v=59c02gYZ9fA">Hello!</a>

這是不使用JSX

React.createElement('a', {href: 'https://www.youtube.com/watch?v=59c02gYZ9fA'}, 'Hello!')

相信大家應該能明顯的看出區別，使用JSX的程式碼看起來就像HTML

當然，JSX語法中的這些HTML標記，並不是真正的網頁上HTML的標記，而是人造的、假的，這是經過React中設計的用來對應合法的HTML標記。

使用 JSX 指定屬性
JSX可以使用引號將字符串文字指定為屬性

const element = <a href="https://www.reactjs.org"> link </a>;

還可以使用括號將 JavaScript 表達式嵌入到屬性中：

const element = <img src={user.avatarUrl}></img>;

className 屬性
在 JSX 中，若要為元素代入樣式，需使用 className 屬性 ，不能使用class，一但往後使用react的js工具之後就會出現串錯誤碼，所以為了要避免出現error，人們習慣使用classname去代替class，還有for用htmlFor代替、tabindex用tabIndex代替。

return(
<div>
<p className="React JSX"> className</p>
</div>
)

Boolean屬性
在 JSX 中不能使用if-else 語句，但可以使用條件表達式。

const App = () => {
   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}

上面將會render

<div>
  <h1>true</h1>
</div>

JSX表示對象
Babel (編譯器)將 JSX 編譯為React.createElement()調用。

const element = (
  <h1 className="say hi">
    Hello, world!
  </h1>
);

這兩段的結果相等

const element = React.createElement(
  'h1',
  {className: 'say hi'},
  'Hello, world!'
);

React.createElement會執行一些動作來幫你檢查你代碼中的錯誤

React.createElement簡稱h函數

const element = React.createElement(
  'div',
  { id: 'sun' },
  React.createElement('a', null, 'hmt'),
  React.createElement('b')
)

第一個參數:是html tag，也可以是組件名(首字母大寫)
第二個參數:可以是標籤或是null
第三個參數:是children element 的h函數，可以是數組排列，也可以打散

所以利用上面的範例，我們會得到

const element = {
  type: 'h1',
  props: {
    className: 'say hi',
    children: 'Hello, world!'
  }
};

參考連結
https://zhuanlan.zhihu.com/p/401053178
https://reactjs.org/docs/introducing-jsx.html
https://www.youtube.com/watch?v=MHT0BIElttU&list=PL91gvBcdjUtbeAJEDWP_eEknED4el1afy&index=6&t=13s
https://blog.techbridge.cc/2016/04/21/react-jsx-introduction/
https://blog.csdn.net/weixin_46116626/article/details/123469179