JSFiddle
開始 Hack React 的最簡單的方法是用下面 JSFiddle 的Hello Worlds：
通過 npm 使用 React
我們建議在 React 中使用 CommonJS 模塊系統，比如 browserify 或 webpack。使用 react 和 react-dom npm 包.
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
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包.
不用 npm 的快速開始
如果你現在還沒準備要使用npm,你可以下載這個已經包含了預構建的 React 和 React DOM 拷貝的入門套件.
<div class="buttons-unit downloads">
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
下載入門套件 {{site.react_version}}
</a>
</div>
在入門教程包的根目錄，創建一個含有如下代碼的 helloworld.html。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
在 JavaScript 代碼里寫著 XML 格式的代碼稱為 JSX；可以去 JSX 語法 里學習更多 JSX 相關的知識。為了把 JSX 轉成標準的 JavaScript，我們用 <script type="text/babel"> 標簽，并引入 Babel 來完成在瀏覽器里的代碼轉換。
分離文件
你的 React JSX 代碼文件可以寫在另外的文件里。新建下面的 src/helloworld.js。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在 helloworld.html 引用該文件：
<script type="text/babel" src="src/helloworld.js"></script>
注意一些瀏覽器（比如 Chrome ）會在使用 HTTP 以外的協議加載文件時失敗。
離線轉換
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 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- 不需要 Babel! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
下一步
去看看入門教程 和入門教程包 examples 目錄下的其它例子學習更多。
我們還有一個社區開發者共建的 Wiki：workflows, UI-components, routing, data management etc.
恭喜你，歡迎來到 React 的世界。
