iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 2
0

JSX


React以Component為基礎,我們把相關的介面、功能整合在一起就是一個Component。JSX是一種語法糖,XML-like的Javascript語法延伸,它讓我們可以比較直覺的撰寫React Component,而我們需要透過Babel把JSX轉譯成真正的Javascript。當然寫React Component也可以不用JSX,可是看起來就會比較複雜、不直覺,透過Babel也可以讓我們直接使用ES6+的語法,所以使用這些工具Z>B。(不想把每一種寫法都列出來,這樣很容易在一開始就覺得寫法太多很難懂,所以分享的系列文章,都還是會採用JSX、ES6的語法喔!)

(1)JSX基本寫法


const ele = <h1>Hello, world!</h1>;

這邊使用ES6 const的語法宣告,可以參考let一起做比較。

上面的語法透過Babel線上轉譯,我們可以得到編譯後的js,JSX產生React elements

var ele = React.createElement(
  "h1",             // HTML元素 或是 React Component,這裏是h1
  null,             // 屬性值,用物件表示,這裏沒有傳屬性
  "Hello, world!"   // 元素子元素,這裏只有文字
);

轉譯前的code簡潔很多,當Component越來越複雜,div裡面又包覆其他子元件,子元件還有子元件的時候,就越能體會JSX帶來的好處喔!

(2)允許使用{}包住JavaScript Expression


可以利用function,帶入我們要顯示的string

function getName() {
  return 'World';
}
const ele = <h1>Hello, {getName()}!</h1>;

上面function回傳一個string,也可以是回傳另一個JSX,如下:

function getName() {
  return <span>World</span>;
}
const ele = <h1>Hello, {getName()}!</h1>;

(3)設定JSX屬性 (Attribute)


JSX就像XML一樣,除了可以設定children,也可以設定attribute。而attribute代入的內容可以是string,也可以是一個object。

// 傳入字串
const ele1 = <div name="Allen" />;

// 傳入物件
const ele2 = <div user={ name: 'Allen', age: 30 } />;

JSX雖然某部分跟HTML的tag element很像,但它是Javascript的延伸語法,為了和HTML屬性有所區別,React DOM在屬性的命名上採用camelCase方式。例如:

const ele1 = <div className="wrap" />;       // class -> className
const ele2 = <div tabIndex="0" />;           // tabindex -> tabIndex
const ele3 = <label htmlFor="checkbox" />;   // for -> htmlFor

另外,style設定也是一個需要注意的地方,和一般直接寫CSS style不同,JSX元件style設定值為一個Object,裡面的CSS屬性也是用camelCase方式命名。第一個{}是表示JSX傳入Javascript Expression,第二個{}表示是Object。例如:

// font-size => fontSize
const ele = <div name="Allen" style={{ color: '#999', fontSize: '24px'}}  />;

(4)設定JSX子元素 (Children)


一開始我們有示範,在JSX裡面顯示Hello World,除了字串它也可以設定其他子元件,而當沒有其他子元件時,通常用 /> 的表示方式。

// 包含children
const ele1 = (
        <div>
            <h1>Hello,</h1>
            <h2>Allen</h2>
        </div>
    );

// 沒有children,空一格用 />結尾
const ele2 = <img src={user.avatarUrl} />;

今天就先介紹到這邊,了解JSX會對寫React有很大的幫助,而且越寫會越發現這樣的格式很直覺很容易上手,UI架構一目了然!

參考


React官網 Introducing JSX


上一篇
React Day1 - 開發工具簡單說
下一篇
React Day3 - Virtual DOM與ReactDOM.render
系列文
寫React的那些事31

1 則留言

1
卡西
iT邦新手 5 級 ‧ 2016-12-02 16:50:01

這邊使用ES6 cont的語法宣告

cont 應為 const ~

XD

chiouchu iT邦新手 5 級 ‧ 2016-12-02 18:27:11 檢舉

非常感謝你~已修正!
/images/emoticon/emoticon07.gif

我要留言

立即登入留言