JSFiddle

開始 Hack React 的最簡單的方法是用下面 JSFiddle 的Hello Worlds：

React JSFiddle

React JSFiddle without JSX

通過 npm 使用 React

我們建議在 React 中使用 CommonJS 模塊系統，比如browserify或webpack。使用react和react-domnpm 包.

// main.jsvarReact=require('react');varReactDOM=require('react-dom');ReactDOM.render(

Hello,world!

,document.getElementById('example'));

要用 browserify 安裝 React DOM 和構建你的包。

$npm install --save react react-dom babelify babel-preset-react$browserify -t[babelify --presets[react]]main.js -o bundle.js

要用 webpack 安裝 React DOM 和構建你的包:

$npm install --save react react-dom babel-preset-react$webpack

注意:

如果你正在使用 ES2015, 你將要使用babel-preset-es2015包.

注意:默認情況下，React 將會在開發模式，很緩慢，不建議用于生產。要在生產模式下使用 React，設置環境變量NODE_ENV為production（使用 envify 或者 webpack's DefinePlugin）。例如：

newwebpack.DefinePlugin({"process.env":{NODE_ENV:JSON.stringify("production")}});

不用 npm 的快速開始

如果你現在還沒準備要使用npm,你可以下載這個已經包含了預構建的 React 和 React DOM 拷貝的入門套件.

下載入門套件 15.3.1

在入門教程包的根目錄，創建一個含有如下代碼的helloworld.html。

Hello React!ReactDOM.render(

Hello,world!

,document.getElementById('example'));

在 JavaScript 代碼里寫著 XML 格式的代碼稱為 JSX；可以去JSX 語法里學習更多 JSX 相關的知識。為了把 JSX 轉成標準的 JavaScript，我們用標簽，并引入 Babel 來完成在瀏覽器里的代碼轉換。在瀏覽器里打開這個html，你應該可以看到成功的消息！

分離文件

你的 React JSX 代碼文件可以寫在另外的文件里。新建下面的src/helloworld.js。

ReactDOM.render(

Hello,world!

,document.getElementById('example'));

然后在helloworld.html引用該文件：

注意一些瀏覽器（比如 Chrome ）會在使用 HTTP 以外的協議加載文件時失敗。

離線轉換

先安裝Babel命令行工具（需要npm）：

npm install --global babel-cli

npm install babel-preset-react

然后把你的src/helloworld.js文件轉成標準的 JavaScript:

babel --presets react src --watch --out-dir build

注意:

如果你正在使用 ES2015, 你將需要使用babel-preset-es2015包.

build/helloworld.js會在你對文件進行修改時自動生成。 閱讀Babel CLI 文檔了解高級用法。

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

對照下面更新你的 HTML 代碼

Hello React!

下一步

去看看入門教程和入門教程包examples目錄下的其它例子學習更多。

我們還有一個社區開發者共建的 Wiki：workflows, UI-components, routing, data management etc.

恭喜你，歡迎來到 React 的世界。