React 安裝

React 可以直接下載使用,下載包中也提供了很多學習的實例。

你也可以直接使用手冊網教程的 React CDN 庫,地址如下:

<script src="http://ku.shouce.ren/libs/react/0.14.7/react.min.js"></script> 
<script src="http://ku.shouce.ren/libs/react/0.14.7/react-dom.min.js"></script> 
<script src="http://ku.shouce.ren/libs/react/browser.min.js"></script>

使用實例

以下實例輸出了 Hello, world!

<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://ku.shouce.ren/libs/react/0.14.7/react.min.js"></script>
    <script src="http://ku.shouce.ren/libs/react/0.14.7/react-dom.min.js"></script>
    <script src="http://ku.shouce.ren/libs/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) runoob-react-test
version: (1.0.0) description: 手冊網教程 react 測試entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/tianqixin/www/reactApp/package.json:{
  "name": "runoob-react-test",
  "version": "1.0.0",
  "description": "手冊網教程 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:設置服務器端口號為 7777,端口后你可以自己設定 。
  • 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": "runoob-react-test",
  "version": "1.0.0",
  "description": "手冊網教程 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 - 手冊網教程(shouce.ren)</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 />
            歡迎來到手冊網教程學習!!!
         </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/,輸出結果如下: