React.js快速入門 — (3)JSX
JSX — React.js的簡潔助手，針對16.8版後的React.js所製作的新手入門上手文章
在上一篇的文章：React.js快速入門 — (2)Overview，簡單介紹一下React.js的Hello World以及整體結構。對於Javascript能夠直接寫入HTML-style的東西任誰都會感到好奇。
這東西就是為React.js打造的JSX，全名JavaScript Extensible。取經於XML概念，可以自行創造標籤，像是 <Hello/> ，但是也能使用Javascript所有功能。順帶一提，所以HTML也是XML一種，只是標籤名稱或其他屬性名稱已經被限制住了。
React 並不要求使用 JSX，但大部分人覺得在 JavaScript 程式碼中撰寫使用者界面的同時，這是一個很好的視覺輔助。這也允許 React 顯示更有用的錯誤及警告訊息。
如同官方文本所說，不會強迫使用，但是用了會很不一樣。也會比較安全，因為JSX的變數都會在render(呈現到網頁)之前轉為字串，這可以避免 XSS(跨網站指令碼)攻擊。
怎麼用
JSX在用到XML語法配合變數的時候會有明顯的差別，只要使用大括號{}就能使用所有Javascript的語法或是已經宣告的變數，其餘跟Javascript沒太大不同。例子如下：
const mystyle = "BetterThanBrian";
const str = "Hello";
const element = <h1 className={mystyle}>{str}</h1>;
// output: <h1 class="BetterThanBrian">Hello</h1>const element2 = <h1>{1+2+3+4}</h1>;
// output: <h1>10</h1>
斷行
有時候在宣告一個大的結構的時候難免會將程式碼分行。Javascript本身在做每行的句點沒有像C語言來得嚴謹，可以不使用分號 ; 做結尾，因為它會幫你自動加上分號來斷句。
const str = "Hello"
// 會變成
const str = "Hello";所以貿然對JSX做分行會造成下面問題：
const element = <h1 className="greeting">
Hello, World!
</h1>
// 會變成
const element = <h1 className="greeting">;
Hello, World!;
</h1>;因此，我們必須在頭尾加上小括號 () 這個運作機制，讓Javascript知道這個是同一行程式碼：
const element = ( <h1 className="greeting">
Hello, World!
</h1>
)
// 等於
const element = ( <h1 className="greeting">
Hello, World!
</h1>
);JSX裡HTML屬性命名法則
由於 JSX 比較接近 JavaScript 而不是 HTML，React DOM 使用
camelCase來命名屬性而不是使用慣有的 HTML 屬性名稱。
之前被同學嘴說都在Python用camelCase(駝峰式命名)，因為這概念我是從Javascript學來的🤪。camelCase起源於Perl，很多Javascript的轉譯工具都會依照camelCase完成相對應的宣告。所以現在先習慣一下有別往Python或HTML的命名風格，例如Javascript的 className 在Python通常寫法是 class_name ；HTML則是 classname。
在JSX的HTML中，必須依照camelCase命名屬性。因此差別如下：
<h1 class="greeting" tabindex="0">
//變成
<h1 className="greeting" tabIndex="0">這裡HTML的 class 與 JSX的 className 名字不同原因是，如果不想讓CSS經手到React.js的時候，必須採用 class 。若沒這特殊情況就使用 className 。
JSX的Children(子節點)
JSX還是保留HTML的特性，可以在節點之下創造一個巢狀特性。
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);而他的Children可以傳進去Component後再利用 {props.children} 取得，將在下一篇的Composition章節提及。
與下一篇銜接
這邊講到稍微進階一點的，其實JSX就是 React.createElement() 的優雅包裝紙(就是所謂的語法糖)。
const element = (
<h1 className="greeting">
Hello, World!
</h1>
);
// 等於
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, World!'
);只要使用這方式寫都會被協助轉譯成React.js的Element物件，將在下一篇Component提及差異。但使用JSX會讓你程式碼變乾淨，容易找到錯誤。因此，現在可以在腦海中把JSX跟React.js Element畫上等號。
順帶一提，React.createElement() 會幫忙檢查你寫的JSX是否會有Bug。
看完JSX後，若對語法還不熟可以先擱著。接下來是React.js重頭戲，會大量使用到JSX來複習。也就是Component，將功能模組化以建立我們的房子。達成”Write less, do more.”(雖然這句話是我從jQuery抄來的)
喜歡的話可以給我一點掌聲唷！
上一篇：React.js快速入門 — (2)Overview
下一篇：React.js快速入門 — (4)Component
