攻城獅跳火圈

前一篇文章有使用到簡單的JSX語法(原來不是Facebook他們發明的)以產生React Component，這種寫法會比使用Javascript來建立React Component還來得簡單。使用 JSX語法可以讓程式碼變得更簡潔，也更容易理解。

 

JSX 與 Javascript的對應

---

JSX語法在React中的目的，是為了要建立DOM的Element架構。雖然開發時使用JSX語法，但最終還是會被轉換成Javascript語法，才能在瀏覽器中執行。React官網有提供一個線上轉換的工具-JSX Compiler，可以在上面直接實測不同的JSX語法如何被轉換為React.JS實際使用的Javascript語法。

例如底下這個JSX的Example，它只是很簡單的一個div，標籤內文為Hello World。

var Hello = React.createClass({
  render: function() {
    return <div>Hello World</div>;
  }
});

var HelloElement = <Hello  />;

React.render(HelloElement, mountNode);

 

透過JSX Compiler，它會轉換成以下的程式碼。

var Hello = React.createClass({displayName: "Hello",
  render: function() {
    return React.createElement("div", null, "Hello World");
  }
});

var HelloElement = React.createElement(Hello, null);

React.render(HelloElement, mountNode);

 

可以看到有兩個主要的function - React.createClass() 及 React.createElement()。在React進行DOM建構時，概念上類似在建立自定義的標籤。這個標籤的定義，是透過React.createClass()這個function來進行。裡面最基本需要建立render() function 來定義要產生的 DOM內容。當然，這個class不只需要定義外觀，還需要定義行為，詳細的資訊，可以參考官網的說明 - Component Specs and Lifecycle。

當有React 的Class之後，產生DOM需要的是React的Element，可以把它視為是Class的實體化。透過React.createElement()來建立DOM所需要的Element。當自訂的的標籤定義好，並且依據該定義產生Element後，再呼叫React.render(HelloElement, mountNode)來將React的Element掛載在網頁的HTML element(mountNode)中。

React.render(HelloElement, mountNode);

 

產生Element - HTML Tags vs. React Components

---

React除了可以寫自訂的React Components，並產生Element外，當然也可以產生HTML Tag的Element。不過，要注意到，要使用小寫字母開頭的標籤名(<div>)。

var myDivElement = <div className="foo">Hello World</div>;

以上的語法，會轉換成底下的Javascript語法

var myDivElement = React.createElement("div", {className: "foo"}, "Hello World");

 

如果標籤名用大寫開頭(Div)，JSX Compiler會認定是自訂的React Components，產生出的Javascript就不一樣。

var myDivElement = React.createElement(Div, {className: "foo"}, "Hello World");

 

React的JSX的Convention分別是使用字首字母的大寫與小寫，來區分React Components與HTML 標籤。

 

設定Element的屬性(Attribute)

---

使用JSX語法要設定Eelement的屬性(Attribute_值，其實很直覺。就跟HTML的語法一樣，直接寫在標籤內就可以了。

var myHello = <input type="text" value="Hello World"  className="redFont"></input>;

使用 JS Bin來看執行結果

 

JS Bin on jsbin.com

不過，要注意到兩個屬性 - class 與 for，因為跟XML的屬性相衝，所以在React的JSX中，要使用className 與 htmlFor來做對應的屬性。

 

使用Javascript statement當作屬性值

如果屬性值需要透過程式給與，也就是透過Javascript進行運算及處理的話，則需要使用大括號({})包住

<input type="text" value={ new Date()}  className="BlueFont"></input>