React入門指南

JSFiddle

實驗React最便捷的途徑就是開始擺弄下面這個小例子:Hello World。

入門示例

下載示例開始體驗：Download Starter Kit 0.13.3
在示例項目的根目錄中，創建helloworld.html文件，並輸入以下內容:

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(        <h1>Hello, world!</h1>,        document.getElementById('example')
      );    </script>
  </body>
</html>

JavaScript腳本中嵌入的類xml代碼我們稱作JSX；通過 JSX語法文檔來深入瞭解它吧。要在瀏覽器中把JSX代碼轉化爲清香的Javascript，我們需要使用<script type="text/jsx">標籤並引入JSXTransformer.js庫。

獨立腳本文件

你的JSX代碼可以放入單獨的文件中。創建src/helloworld.js，如下：

React.render(  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然後在helloworld.html中引用。

<script type="text/jsx" src="src/helloworld.js"></script>

對JSX脫機轉碼

首先安裝命令行工具(依賴npm)：

npm install -g react-tools

之後就可以把helloworld.js翻譯爲純javascript了。

jsx --watch src/ build/

修改JSX的同時，會被自動翻譯爲javascript。

React.render(
  React.createElement('h1', null, 'Hello, world!'),
  document.getElementById('example')
);

更新我們的HTML文件，不再需要JSXTransformer.js。

<!DOCTYPE html><html>
  <head>
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- 無需引入 JSX 轉換庫 -->
  </head>
  <body>
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  </body></html>

喜歡CommonJS？

如果你想結合browserify，webpack或者其他包管理工具來使用React，那就使用react npm包吧。此外，可以十分方便地把jsx構建工具整合到很多包管理系統中(不僅僅是CommonJS)。

下一步

通過新手工具包examples目錄下的教程和例子來深入瞭解react。我們還建立了wiki，這裏有來自社區貢獻的各種工作流、界面組件、路由和數據管理實踐等等。react歡迎你，並祝你好運。

React入門指南