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