## JSFiddle
開始學習 React 最簡單的方式是使用如下JSFiddle的 Hello World例子:
* **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
* [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
## 初學者教程包 (Starter Kit)
開始先下載初學者教程包。
[下載初學者教程包 0.13.0](http://reactjs.cn/react/downloads/react-0.13.0.zip)
在初學者教程包的根目錄,創建一個包含以下內容的?`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 語法](http://reactjs.cn/react/docs/jsx-in-depth.html)?里學習更多 JSX 相關的知識。為了把 JSX 轉成標準的 JavaScript,我們用?`<script type="text/jsx">`?標簽包裹著含有 JSX 的代碼,然后引入?`JSXTransformer.js`?庫來實現在瀏覽器里的代碼轉換。
### 分離文件
你的 React JSX 代碼文件可以寫在單獨的文件里。創建?`src/helloworld.js`?文件,內容如下:
~~~
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
~~~
然后在?`helloworld.html`?引用它:
~~~
<script type="text/jsx" src="src/helloworld.js"></script>
~~~
### 離線轉換
先安裝命令行工具(依賴?[npm](http://npmjs.org/)):
~~~
npm install -g react-tools
~~~
然后將你的?`src/helloworld.js`?文件轉成標準的 JavaScript:
~~~
jsx --watch src/ build/
~~~
一旦你修改了,?`build/helloworld.js`?文件會自動生成。
~~~
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
~~~
對照以下內容更新你的 HTML 代碼
~~~
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="build/react.js"></script>
<!-- 不需要JSXTransformer! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
~~~
## 想要遵循 CommonJS 規范?
如果你想在使用 React 時,遵循?[browserify](http://browserify.org/),[webpack](http://webpack.github.io/)?或者或其它兼容CommonJS的模塊系統,只要使用?[`react`?npm包](https://www.npmjs.org/package/react)?即可。而且,`jsx`?轉換工具可以很輕松的地集成到大部分打包系統里(不僅僅是 CommonJS)。
## 下一步
接著學習更多?[入門教程](http://reactjs.cn/react/docs/tutorial.html)?和初學者教程包?`examples`?目錄下的其它例子。
我們還有一個社區開發者共同建設的 Wiki:[workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)
祝你好運,歡迎來到 React 的世界。