顯示數(shù)據(jù)
用戶界面能做的最基礎(chǔ)的事就是顯示一些數(shù)據(jù)。React 讓顯示數(shù)據(jù)變得簡單，當(dāng)數(shù)據(jù)變化的時(shí)候，用戶界面會(huì)自動(dòng)同步更新。
開始
讓我們看一個(gè)非常簡單的例子。新建一個(gè)名為 hello-react.html 的文件，代碼內(nèi)容如下：
<!DOCTYPE html><html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-{{site.react_version}}.js" rel="external nofollow" ></script>
<script src="http://fb.me/JSXTransformer-{{site.react_version}}.js" rel="external nofollow" ></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx"> // ** 在這里替換成你的代碼 **
</script>
</body></html>在接下去的文檔中，我們只關(guān)注 JavaScript 代碼，假設(shè)我們把代碼插入到上面那個(gè)模板中。用下面的代碼替換掉上面用來占位的注釋。
var HelloWorld = React.createClass({
render: function() { return (
<p>
Hello, <input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);被動(dòng)更新 (Reactive Updates)
在瀏覽器中打開 hello-react.html ，在輸入框輸入你的名字。你會(huì)發(fā)現(xiàn) React 在用戶界面中只改變了時(shí)間， 任何你在輸入框輸入的內(nèi)容一直保留著，即使你沒有寫任何代碼來完成這個(gè)功能。React 為你解決了這個(gè)問題，做了正確的事。
我們想到的方法是除非不得不操作 DOM ，React 是不會(huì)去操作 DOM 的。它用一種更快的內(nèi)置仿造的 DOM 來操作差異，為你計(jì)算出出效率最高的 DOM 改變。
對這個(gè)組件的輸入稱為 props - "properties"的縮寫。得益于 JSX 語法，它們通過參數(shù)傳遞。你必須知道在組件里，這些屬性是不可改變的，也就是說this.props 是只讀的。
組件就像是函數(shù)
React 組件非常簡單。你可以認(rèn)為它們就是簡單的函數(shù)，接受 props 和 state (后面會(huì)討論) 作為參數(shù)，然后渲染出 HTML。正是應(yīng)為它們是這么的簡單，這使得它們非常容易理解。
注意:
只有一個(gè)限制: React 組件只能渲染單個(gè)根節(jié)點(diǎn)。如果你想要返回多個(gè)節(jié)點(diǎn)，它們必須被包含在同一個(gè)節(jié)點(diǎn)里。
JSX 語法
我們堅(jiān)信組件是正確方法去做關(guān)注分離，而不是通過“模板”和“展示邏輯”。我們認(rèn)為標(biāo)簽和生成它的代碼是緊密相連的。此外，展示邏輯通常是很復(fù)雜的，通過模板語言實(shí)現(xiàn)這些邏輯會(huì)產(chǎn)生大量代碼。
我們得出解決這個(gè)問題最好的方案是通過 JavaScript 直接生成模板，這樣你就可以用一個(gè)真正語言的所有表達(dá)能力去構(gòu)建用戶界面。為了使這變得更簡單，我們做了一個(gè)非常簡單、可選類似 HTML 語法 ，通過函數(shù)調(diào)用即可生成模板的編譯器，稱為 JSX。
JSX 讓你可以用 HTML 語法去寫 JavaScript 函數(shù)調(diào)用 為了在 React 生成一個(gè)鏈接，通過純 JavaScript 你可以這么寫：
React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')。
通過 JSX 這就變成了
<a rel="external nofollow" target="_blank" >Hello React!</a>。
我們發(fā)現(xiàn)這會(huì)使搭建 React 應(yīng)用更加簡單，設(shè)計(jì)師也偏向用這用語法，但是每個(gè)人可以有它們自己的工作流，所以JSX 不是必須用的。
JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，請看深入理解 JSX。或者直接使用在線 JSX 編譯器觀察變化過程。
JSX 類似于 HTML，但不是完全一樣。參考 JSX 陷阱 學(xué)習(xí)關(guān)鍵區(qū)別。
最簡單開始學(xué)習(xí) JSX 的方法就是使用瀏覽器端的 JSXTransformer。我們強(qiáng)烈建議你不要在生產(chǎn)環(huán)境中使用它。你可以通過我們的命令行工具 react-tools 包來預(yù)編譯你的代碼。
沒有 JSX 的 React
你完全可以選擇是否使用 JSX，并不是 React 必須的。你可以通過 React.createElement 來創(chuàng)建一個(gè)樹。第一個(gè)參數(shù)是標(biāo)簽，第二個(gè)參數(shù)是一個(gè)屬性對象，每三個(gè)是子節(jié)點(diǎn)。
var child = React.createElement('li', null, 'Text Content');var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.getElementById('example'));方便起見，你可以創(chuàng)建基于自定義組件的速記工廠方法。
var Factory = React.createFactory(ComponentClass);
...var root = Factory({ custom: 'prop' });
React.render(root, document.getElementById('example'));React 已經(jīng)為 HTML 標(biāo)簽提供內(nèi)置工廠方法。
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
更多建議：