React 安裝


React 可以直接下載使用，下載套件中也提供了許多學習的實例。

本教學使用了 React 的版本為 0.14.7，你可以在官網 http://facebook.github.io/react/ 下載最新版。

你也可以直接使用php中文網的React CDN 函式庫，位址如下：

<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>

使用實例

以下實例輸出了Hello, world!

#實例

<!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>

運行實例»

#點擊"運行實例" 按鈕查看線上實例

#

實例解析：

實例中我們引入了三個函式庫： react.min.js 、react-dom.min.js 和browser.min.js：

  • react.min.js - React 的核心函式庫

  • #react-dom.min.js -  提供與DOM 相關的功能

  • browser.min.js - 用於將JSX 語法轉換為JavaScript 語法

#
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

以上程式碼將一個h1 標題，插入id="example" 節點中。

注意：

如果我們需要使用 JSX，則 <script> 標籤的 type 屬性需要設定為 text/babel。

透過 npm 使用 React

如果你的系統還不支援 Node.js 及 NPM 可以參考我們的 Node.js 教學。

我們建議在 React 中使用 CommonJS 模組系統，例如 browserify 或 webpack，本教學使用 webpack。

第一步、安裝全域套件

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

第二步、建立根目錄

#建立一個根目錄，目錄名稱為：reactApp，再使用npm init 初始化，產生package.json 檔案：

$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) php-react-test
version: (1.0.0) 
description: php中文网 react 测试
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中文网 react 测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

第三步驟、新增依賴套件及外掛程式

#因為我們要使用React, 所以我們需要先安裝它，--save 指令用於將套件新增至package.json 檔。 

$ npm install react --save
$ npm install react-dom --save

同時我們也要安裝一些babel 外掛

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

第四步、建立檔案

接下來我們建立一些必要檔案：

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

第五步、設定編譯器，伺服器，載入器

#開啟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：配置打包結果，path定義了輸出的資料夾，filename則定義了打包結果檔案的名稱。

  • devServer：設定伺服器連接埠號碼為 77777，連接埠後你可以自己設定 。

  • module：定義了模組的處理邏輯，這裡可以用loaders定義了一系列的載入器，以及一些正規。當需要載入的檔案符合test的正規則時，就會呼叫後面的loader對檔案進行處理，這正是webpack強大的原因。

現在開啟package.json 文件，找到"scripts" 中的"test" "echo \"Error: no test specified\" && exit 1" 使用以下程式碼替換：

"start": "webpack-dev-server --hot"

替換後的package.json 檔案內容如下：

$ cat package.json 
{
  "name": "php-react-test",
  "version": "1.0.0",
  "description": "php中文网 react 测试",
  "main": "index.js",
  "scripts": {
	"start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  }
}

現在我們可以使用npm start 指令來啟動服務。 --hot 指令會在檔案變更後重新載入，這樣我們就不需要在程式碼修改後重新刷新瀏覽器就能看到變化。

第六步、index.html

設定 div id = "app" 為我們套用的根元素，並引入  index.js 腳本檔。 

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App - php中文网(php.cn)</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

第七步、App.jsx 和 main.js

這是第一個 react 元件。後面的章節我們會詳細介紹 React 元件。這個元件將會輸出 Hello World!!!。

App.jsx 檔案程式碼

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到php中文网学习！！！
         </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'))

注意：

如果想要元件可以在任何的應用程式中使用，則需要在創建後使用export 將其匯出，在使用元件的檔案中使用import 將其導入。

第八步驟、執行服務

完成上述設定後，我們即可執行服務：

$ npm start

透過瀏覽器存取 #http:/ /localhost:7777/，輸出結果如下：

QQ截图20161019101041.png

#完整實例下載

以上測試實例各檔案代碼下載位址：http ://static.php.cn/download/reactApp.zip。