<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-{{site.react_version}}.js"></script>
    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">

      // ** 在這里替換成你的代碼 **

    </script>
  </body>
</html>

在接下去的文檔中，我們只關(guān)注 JavaScript 代碼，假設(shè)我們把代碼插入到上面那個模板中。用下面的代碼替換掉上面用來占位的注釋。

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);

被動更新 (Reactive Updates)

在瀏覽器中打開 hello-react.html ，在輸入框輸入你的名字。你會發(fā)現(xiàn) React 在用戶界面中只改變了時間，任何你在輸入框輸入的內(nèi)容一直保留著，即使你沒有寫任何代碼來完成這個功能。React 為你解決了這個問題，做了正確的事。

我們想到的方法是除非不得不操作 DOM ，React 是不會去操作 DOM 的。它用一種更快的內(nèi)置仿造的 DOM 來操作差異，為你計算出出效率最高的 DOM 改變。

對這個組件的輸入稱為 props - "properties"的縮寫。得益于 JSX 語法，它們通過參數(shù)傳遞。你必須知道在組件里，這些屬性是不可改變的，也就是說 this.props 是只讀的。

組件就像是函數(shù)

React 組件非常簡單。你可以認為它們就是簡單的函數(shù)，接受 props 和 state (后面會討論) 作為參數(shù)，然后渲染出 HTML。正是應為它們是這么的簡單，這使得它們非常容易理解。

注意:

只有一個限制: React 組件只能渲染單個根節(jié)點。如果你想要返回多個節(jié)點，它們必須被包含在同一個節(jié)點里。

JSX 語法

我們堅信組件是正確方法去做關(guān)注分離，而不是通過“模板”和“展示邏輯”。我們認為標簽和生成它的代碼是緊密相連的。此外，展示邏輯通常是很復雜的，通過模板語言實現(xiàn)這些邏輯會產(chǎn)生大量代碼。

我們得出解決這個問題最好的方案是通過 JavaScript 直接生成模板，這樣你就可以用一個真正語言的所有表達能力去構(gòu)建用戶界面。為了使這變得更簡單，我們做了一個非常簡單、可選類似 HTML 語法，通過函數(shù)調(diào)用即可生成模板的編譯器，稱為 JSX。

JSX 讓你可以用 HTML 語法去寫 JavaScript 函數(shù)調(diào)用 為了在 React 生成一個鏈接，通過純 JavaScript 你可以這么寫：

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')。

通過 JSX 這就變成了

<a >Hello React!</a>。

我們發(fā)現(xiàn)這會使搭建 React 應用更加簡單，設(shè)計師也偏向用這用語法，但是每個人可以有它們自己的工作流，所以JSX 不是必須用的。

JSX 非常?。簧厦妗癶ello, world”的例子使用了 JSX 所有的特性。想要了解更多，請看深入理解 JSX?；蛘咧苯邮褂迷诰€ JSX 編譯器觀察變化過程。

JSX 類似于 HTML，但不是完全一樣。參考 JSX 陷阱學習關(guān)鍵區(qū)別。

最簡單開始學習 JSX 的方法就是使用瀏覽器端的 JSXTransformer。我們強烈建議你不要在生產(chǎn)環(huán)境中使用它。你可以通過我們的命令行工具 react-tools 包來預編譯你的代碼。

沒有 JSX 的 React

你完全可以選擇是否使用 JSX，并不是 React 必須的。你可以通過 React.createElement 來創(chuàng)建一個樹。第一個參數(shù)是標簽，第二個參數(shù)是一個屬性對象，每三個是子節(jié)點。

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 標簽提供內(nèi)置工廠方法。

var root = React.DOM.ul({ className: 'my-list' },
  React.DOM.li(null, 'Text Content')
);

上一篇：事件系統(tǒng)下一篇：組件的引用