iT邦幫忙

2019 iT 邦幫忙鐵人賽

1

* 簡介

JSX是一種JavaScript的語法擴展,一種類似XML的語法,而在寫React元件時,通常會使用JSX來提升程式撰寫效率,但是JSX並非強制使用,也可以選擇不用,雖然JSX最終還是透過Babel轉成JavaScript,不過通常認識了JSX就會瞭解它的好,接下來就來認識JSX吧。

* 使用方式

簡介中有提到JSX必須透過Babel解析(瀏覽器才看得懂),而最簡單的方式就是引入babel
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
這樣就可以開始練習囉!

* 對比JSX與解析後的原生JavaSCript

是不是覺得認識JSX很美好呢?使我們撰寫上方便了許多

const text = 'Hello'
<p>{text}</p>

解析後:

var text = 'Hello'
React.createElement("p",null,"Hello")

* 使用JSX的好處

  1. 更加語意化且易懂的標籤
  2. 程式碼更加簡潔
    最終JSX會轉換成JavaScript,但使用JSX可以讓程式碼看起來更簡潔,且易懂。以下為使用JSX和不使用JSX的範例:
    <a href="https://www.google.com.tw/">google</a>
    不使用JSX的寫法
//React.createEmelent(元件/HTML標籤,元件屬性(以物件表示),子元件)
React.createElement('a',{href: 'https://www.google.com.tw/'},'google')
  1. 結合原生JavaScript語法

* JSX語法中只能有一個根元素

不允許多個根元素

<div>標題</div>
<p>內容</p>
<span>文字</span>

應要改成一個根元素

<div>
    <div>標題</div>
    <p>內容</p>
    <span>文字</span>
</div>

但是缺點是html結構因此多了一層,如果React版本是v16的話可以使用<React.Fragment/>像是:

<React.Fragment>
    <div>標題</div>
    <p>內容</p>
    <span>文字</span>
</React.Fragment>

* JSX如何分辨是開發者寫的元件還是對應HTML的DOM元素

相信這是每個初學者常碰到的問題,英文大寫字元為開頭的標記代表自訂的元件,英文小寫字元為開頭的標記則是HTML的DOM元素標記。因此,你所寫的元件類別或函式型元件的名稱,都必需以"英文大寫字元"為開頭
<Pagination /> //元件


上一篇
React 快速建置開發環境與開發工具介紹
下一篇
JSX(二)
系列文
前端工程師的30份套餐30

尚未有邦友留言

立即登入留言