React 安裝
React 可以直接下載使用，下載包中也提供了很多學(xué)習(xí)的實(shí)例。
本教程使用了 React 的版本為 0.14.7，你可以在官網(wǎng) http://facebook.github.io/react/ 下載最新版。
你也可以直接使用php中文網(wǎng)的 React CDN 庫(kù)，地址如下：
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.php.cn/assets/react/browser.min.js"></script>
使用實(shí)例
以下實(shí)例輸出了 Hello, world!
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/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>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例解析：
實(shí)例中我們引入了三個(gè)庫(kù)： react.min.js 、react-dom.min.js 和 browser.min.js：
react.min.js - React 的核心庫(kù)
react-dom.min.js - 提供與 DOM 相關(guān)的功能
browser.min.js - 用于將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);以上代碼將一個(gè) h1 標(biāo)題，插入 id="example" 節(jié)點(diǎn)中。
注意：
如果我們需要使用 JSX，則 <script> 標(biāo)簽的 type 屬性需要設(shè)置為 text/babel。
通過(guò) npm 使用 React
如果你的系統(tǒng)還不支持 Node.js 及 NPM 可以參考我們的 Node.js 教程。
我們建議在 React 中使用 CommonJS 模塊系統(tǒng)，比如 browserify 或 webpack，本教程使用 webpack。
第一步、安裝全局包
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
第二步、創(chuàng)建根目錄
創(chuàng)建一個(gè)根目錄，目錄名為：reactApp，再使用 npm init 初始化，生成 package.json 文件：
$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) php-react-test
version: (1.0.0)
description: php中文網(wǎng) react 測(cè)試
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/tianqixin/www/reactApp/package.json:
{
"name": "php-react-test",
"version": "1.0.0",
"description": "php中文網(wǎng) react 測(cè)試",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)第三步、添加依賴包及插件
因?yàn)槲覀円褂?React, 所以我們需要先安裝它，--save 命令用于將包添加至 package.json 文件。
$ npm install react --save $ npm install react-dom --save
同時(shí)我們也要安裝一些 babel 插件
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
第四步、創(chuàng)建文件
接下來(lái)我們創(chuàng)建一些必要文件：
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
第五步、設(shè)置編譯器，服務(wù)器，載入器
打開 webpack.config.js 文件添加以下代碼:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [ {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;entry: 指定打包的入口文件 main.js。
output：配置打包結(jié)果，path定義了輸出的文件夾，filename則定義了打包結(jié)果文件的名稱。
devServer：設(shè)置服務(wù)器端口號(hào)為 7777，端口后你可以自己設(shè)定 。
module：定義了對(duì)模塊的處理邏輯，這里可以用loaders定義了一系列的加載器，以及一些正則。當(dāng)需要加載的文件匹配test的正則時(shí)，就會(huì)調(diào)用后面的loader對(duì)文件進(jìn)行處理，這正是webpack強(qiáng)大的原因。
現(xiàn)在打開 package.json 文件，找到 "scripts" 中的 "test" "echo \"Error: no test specified\" && exit 1" 使用以下代碼替換：
"start": "webpack-dev-server --hot"
替換后的 package.json 文件 內(nèi)容如下：
$ cat package.json
{
"name": "php-react-test",
"version": "1.0.0",
"description": "php中文網(wǎng) react 測(cè)試",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
}
}現(xiàn)在我們可以使用 npm start 命令來(lái)啟動(dòng)服務(wù)。--hot 命令會(huì)在文件變化后重新載入，這樣我們就不需要在代碼修改后重新刷新瀏覽器就能看到變化。
第六步、index.html
設(shè)置 div id = "app" 為我們應(yīng)用的根元素，并引入 index.js 腳本文件。
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>React App - php中文網(wǎng)(php.cn)</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
第七步、App.jsx 和 main.js
這是第一個(gè) react 組件。后面的章節(jié)我們會(huì)詳細(xì)介紹 React 組件。這個(gè)組件將輸出 Hello World!!!。
App.jsx 文件代碼
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!<br />
歡迎來(lái)到php中文網(wǎng)學(xué)習(xí)?。?！
</div>
);
}
}
export default App;我們需要引入組件并將其渲染到根元素 App 上，這樣我們才可以在瀏覽器上看到它。
main.js 文件代碼
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))注意：
如果想要組件可以在任何的應(yīng)用中使用，需要在創(chuàng)建后使用 export 將其導(dǎo)出，在使用組件的文件使用 import 將其導(dǎo)入。
第八步、運(yùn)行服務(wù)
完成以上配置后，我們即可運(yùn)行該服務(wù)：
$ npm start
通過(guò)瀏覽器訪問(wèn) http://localhost:7777/，輸出結(jié)果如下：
完整實(shí)例下載
以上測(cè)試實(shí)例各文件代碼下載地址：http://static.php.cn/download/reactApp.zip。