React JSX – React 白話文運動 06
前言
React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta（前身為 Facebook）開發，使開發人員能夠創建可重覆使用的元件來完成前端頁面。
不過這邊要注意，嚴格說起來，React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過，React 為 Angular 和 Vue 等框架提供了另一種解決方式，使我們可以與它一起完成覆雜的前端頁面功能。
這一篇則是會介紹一個React中重要的語法 – JSX。
JSX 也是目前我們比較常看到的 React 寫法 ，因此接下來會介紹
- JSX 是什麼？
- JSX 語法
- 使用 JSX 建構 React 元件
JSX 是什麼？
在講解 JSX 之前先來複習一下，前一篇所講解的，React 建立 DOM 語法
const dish = React.createElement("h1", "Hello World")
ReactDOM.render(dish, document.getElementById("root"))
透過上述的 React 語法可以轉換成以下 HTML DOM。
<div id="root">
<h1>Hello World</h1>
</div>
看到上面的程式碼應該不難想像，JavaScript 中的 React 語法相對難理解，且如果是一個更複雜有上千行的 HTML 文件，那程式碼會更加的複雜且難以理解。
因此 Facebook 團隊在開發 React 的同時，也針對這一個缺點，新增了一種更簡潔的語法，用來建構前端網頁元件，那就是 JSX。
JSX 是由兩個字所組成的縮寫 「JS」JavaScript 以及「X」XML。雖然 JSX 與 HTML 有點相似，但其實本質上還是透過 React 的語法去建構一個元件的，以下是一個簡單的 JSX 範例。
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
可以看到中間幾乎與 HTML 語法相同，然而程式的開頭與結尾都是 JavaScript 的語法。
電腦其實也是透過一些工具，針對 JSX 語法進行轉譯，最後才會產生純粹的 HTML，之後的文章也會針對這樣的工具進行講解。
JSX 語法
JSX 語法看似 HTML，實際上它是 JavaScript 以及 React 的語法，因此這邊會針對 JSX 語法進行講解。
className
在一般 HTML 的語法中，我們如果要對一個 tag 加上 class 會是用以下的寫法
<h1 class="hi">Hello World</h1>
然而在 JSX 的語法中，要針對一個 tag 加上任何的 class，則是要改為 className。
<h1 className="hi">Hello World</h1>
巢狀元件
JSX 的語法與 HTML 相同，都是支援巢狀格式的，JSX 也可以建立自己的元件，並且將元件變成巢狀的格式。
<AnimalList>
<Dog />
<Cat />
<Bird />
</AnimalList>
複合表達式
JSX 本身也是由 JavaScript 的語法，因此完全支援之前我們所講解的 JavaScript 語法，以及 ES6 中的語法，如果樣板字面值（Template Literals）來做舉例。
const fruits = ["Apples","Bananas","Cherries"]
const myElement = (
<ul>
<li>{fruits[0]}</li>
<li>{fruits[1]}</li>
<li>{fruits[2]}</li>
<div>`I Love ${fruits[0]}`</div>
</ul>
);
在 JSX 中可以用大括號把 JavaScript 的變數包進去，也可以使用樣板字面值（Template Literals）的語法將字串與 JSX 做結合。
JavaScript Map
既然可以使用 JavaScript 的語法，那我們也可以使用 Array 內建的 map 函數，來與 JSX 做結合。
const fruits = ["Apples","Bananas","Cherries"]
const myElement = (
<ul>
{fruits.map(element=>{
<li>{element}</li>
})}
</ul>
);
透過 map 函數的使用也可以將多個 li 組合起來。
使用 JSX 建構 React 元件
最後要講解如何建構元件的，用最一開始的程式碼來舉例。
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
第一行以及第二行用來呼叫 react 以及 react-dom/client 已經寫好的函式庫，並且使用內建的函式。
中間的 const 用來做宣告，並且裡面可以放置 JSX 的語法，其中可以寫一些 HTML，當這些完成之後就可以獲得一個名為 myElement 的元件。
最後透過 ReactDOM 裡面的 createRoot 函數，先建立一個 「id=”root”」的 DOM，最後再將自己建立的 myElement 元件放入至 root 中。
經過上面的流程，就可以建構出一個 React 元件（component）了。
結語
這一篇講解了一個很重要的 React 語法 – JSX，也是透過這樣的語法來讓我們更容易建立一個 React 元件。也另外講解了 JSX 的原理、語法以及如何建立一個元件。
如果有任何建議與疑問也歡迎留言！
如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～
備註
目前文章已移至 React JSX – React 白話文運動 06
未來文章一併更新於此網站 Hogan.B Lab
觀看分類：React 白話文運動、其他系列
React 白話文運動系列
JavaScript 高階函式 – React 白話文運動 04
JavaScript Async Await – React 白話文運動 03
你可能也想看
