入門
開始學習了解 React 最方便的方式就是使用_JSFiddle_來觀察實作的範例： Hello Worlds。

事實上由於codepen.io有提供樣板與各種主流 Meta-Language 故小弟偏愛使用 CodePen。不過使用 CodePen 撰寫 JSX 需要一些額外的設定。請參考

[*] React JSFiddle
[*] React JSFiddle without JSX

下載入門套件
下載入門範例與套件。
[*] 下載 StartKit 0.11.2
[*] 官方下載頁面
[*] CND

解開壓縮檔後，在根目錄建立一個_helloworld.html_然後輸入下面的例子。

    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  
  
    <div id="example"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
      React.renderComponent(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  

在 Javascript 裡面使用 XML 格式的語法叫做_JSX_，這種語法是官方推薦的寫法。可以參考學習更多關於 JSX 的用法。為了使 JSX 可以正確的轉換為 Javascript 我們會使用 <script type="text/jsx"> 標簽，以及記得要載入_JSXTransformer.js_以確保程式正確執行。在這邊我們會先提醒那些有程式開發經驗的學習者。
不要忘記在一開始加入_/** @jsx React.DOM */_，這不是一般註解，它是 React 用來定義要處理的 JSX 。如果你沒有加入這個片段，你的程式碼將不會被轉換。

獨立的檔案
你的 React JSX 檔案可以是分開的獨立檔案。接著讓我們建立_src/helloworld.js_

/** @jsx React.DOM */
React.renderComponent(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然後在_helloworld.html_加入

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

即使是分開檔案功能仍然可以運行，這在大型專案中將有助于 DRY 原則，同樣功能的元件應該抽離獨立。

離線轉換 JSX
安裝這個指令轉換工具（command-line）需要先安裝_npm_。

npm install -g react-tools

然後轉換_src/helloworld.js_檔案為原生 Javascript。

jsx --watch src/ build/

看看自動產生的_build/helloworld.js_如下，因為使用了_--watch_參數，你可以直接修改 JSX ，然後工具就會自動更新。指令的語法是_jsx --watch <source directory> <output directory>_ ，所以請不要指定到檔案。

/** @jsx React.DOM */
React.renderComponent(
  React.DOM.h1(null, 'Hello, world!'),
  document.getElementById('example')
);

注意
註解的解析器是非常嚴格的;為了能夠提取_@jsx_修飾子，兩件事情必須遵守：

1. @jsx 註解區塊必須要在檔案或程式碼的開頭，也必須是第一段註解。
2. 註解的開頭必須是 /** （_/*和//將會不正常）。
   如果解析器找不到@jsx註解區塊_輸出時就不會執行轉換。

讓我們接著更新 HTML 如下：

    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <!-- No need for JSXTransformer! -->
  
  
    <div id="example"></div>
    <script src="build/helloworld.js"></script>
  

注意：type='text/jsx' 要拿掉，否則無法運作。

使用 CommonJS
如果你想要使用模組化的 React ， 請 fork 官方專案，然後執行_npm install_和_grunt_，便可以產出遵循 CommonJS 規則模組化的程式碼。官方提供的 jsx 編譯工具可以整合可以簡單地整合到大部份的封裝系統。
CommonJS 補充

下一步
查閱官方教學和其他_/examples_範例目錄學習更多。