用戶界面能做的最基礎的事就是呈現一些數據。React 讓顯示數據變得簡單，當數據變化時，用戶界面會自動同步更新。
## 快速開始
讓我們看一個非常簡單的例子。新建一個名為?`hello-react.html`?的文件，內容如下：
~~~
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.13.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
// ** 在這里替換成你的代碼 **
</script>
</body>
</html>
~~~
在接下去的文檔中，我們只關注 JavaScript 代碼，假設我們把代碼插入到上面那個模板中。用下面的代碼替換掉上面用來占位的注釋。
~~~
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`?，在輸入框輸入你的名字。你會發現 React 在用戶界面中只改變了時間，你在輸入框的輸入內容會保留著，即使你沒有寫任何代碼來完成這個功能。React 也為你解決了這個問題，做了正確的事。
我們想到的解決方案是React 是不會去操作 DOM 的，除非不得不操作 DOM 。**它用一種更快的內置仿造的 DOM 來操作差異，為你計算出效率最高的 DOM 改變**。
這個組件的輸入被稱為?`props`?- "properties"的縮寫。它們通過 JSX 語法進行參數傳遞。你必須知道，在組件里這些屬性是不可直接改變的，也就是說?**`this.props`?是只讀的**。
## 組件就像是函數
React 組件非常簡單。你可以認為它們就是簡單的函數，接受?`props`?和?`state`?(后面會討論) 作為參數，然后渲染出 HTML。正是由于它們如此簡單，使得它們非常容易理解。
> 注意:
>
> **一個限制**: React 組件只能渲染單個根節點。如果你想要返回多個節點，它們_必須_被包含在同一個節點里。
## JSX 語法
我們始終堅信，組件使用了正確方法去做關注分離，而不是通過“模板引擎”和“展示邏輯”。我們認為標簽和生成它的代碼是緊密相連的。此外，展示邏輯通常是很復雜的，通過模板語言實現這些邏輯會產生大量代碼。
我們得出解決這個問題最好的方案是通過 JavaScript 直接生成模板，這樣你就可以用一個真正語言的所有表達能力去構建用戶界面。為了使這變得更簡單，我們做了一個非常簡單、**可選**類似 HTML 語法 ，通過函數調用即可生成模板的編譯器，稱為 JSX。
**JSX 讓你可以用 HTML 語法去寫 JavaScript 函數調用。**?為了在 React 生成一個鏈接，通過純 JavaScript 你可以這么寫：?`React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')`。通過 JSX 這就變成了?`Hello React!`。我們發現這會使搭建 React 應用更加簡單，設計師也偏向用這種語法，但是每個人都有自己的工作流，所以**JSX 并不強制必須使用的。**
JSX 非常小；上面“hello, world”的例子使用了 JSX 所有的特性。想要了解更多，請看?[深入理解 JSX](http://reactjs.cn/react/docs/jsx-in-depth.html)。或者直接使用[在線 JSX 編譯器](http://reactjs.cn/react/jsx-compiler.html)觀察變化過程。
JSX 類似于 HTML，但不是完全一樣。參考?[JSX 陷阱](http://reactjs.cn/react/docs/jsx-gotchas.html)?學習關鍵區別。
最簡單開始學習 JSX 的方法就是使用瀏覽器端的?`JSXTransformer`。我們強烈建議你不要在生產環境中使用它。你可以通過我們的命令行工具?[react-tools](http://npmjs.org/package/react-tools)?包來預編譯你的代碼。
## 沒有 JSX 的 React
你完全可以選擇是否使用 JSX，并不是 React 必須的。你可以通過?`React.createElement`來創建一個樹。第一個參數是標簽，第二個參數是一個屬性對象，第三個是子節點。
~~~
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);
~~~
方便起見，你可以創建基于自定義組件的速記工廠方法。
~~~
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
React.render(root, document.body);
~~~
React 已經為 HTML 標簽提供內置工廠方法。
~~~
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
~~~
