React 安裝

React 可以直接下載使用，下載包中也提供了很多學(xué)習(xí)的實(shí)例。

本教程使用了 React 的版本為 v17.0.2，你可以在官網(wǎng) http://facebook.github.io/react/ 下載最新版。

你也可以直接使用 React CDN 庫(kù)，地址如下：

<script src="https://unpkg.com/react@17/umd/react.production.min.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" rel="external nofollow"  rel="external nofollow" ></script>

使用實(shí)例

實(shí)例解析：

實(shí)例中我們引入了三個(gè)庫(kù)：? react.production.min.js? 、?react-dom.production.min.js? 和 ?babel.min.js?：

• react.production.min.js - React 的核心庫(kù)
• react-dom.production.min.js - 提供與 DOM 相關(guān)的功能
• babel.min.js - Babel 可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，這樣我們就能在目前不支持 ES6 的瀏覽器上執(zhí)行 React 代碼。
• Babel 內(nèi)嵌了對(duì) JSX 的支持。
• 通過(guò)將 Babel 和 babel-sublime 包（package）一同使用可以讓源碼的語(yǔ)法渲染上升到一個(gè)全新的水平

 注意：在瀏覽器中使用Babel來(lái)編譯JSX效率是非常低的，一般來(lái)說(shuō)前端開(kāi)發(fā)工作者在頁(yè)面部署到網(wǎng)站前先使用babel進(jìn)行編譯。

ReactDOM.render(
	<h1>學(xué)編程，就到W3Cschool</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。

國(guó)內(nèi)使用 npm 速度很慢，你可以使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認(rèn)的 npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

這樣就可以使用 cnpm 命令來(lái)安裝模塊了：

$ cnpm install [name]

更多信息可以查閱：http://npm.taobao.org/。

 還有一款新的構(gòu)建工具非常值得一試——vite，給你帶來(lái)更快的構(gòu)建體驗(yàn)，相關(guān)教程可以前往vite教程進(jìn)行了解！

使用webpack搭建React

第一步、安裝全局包

$ 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) youj-react-test
version: (1.0.0) 
description: W3Cschool教程 react 測(cè)試
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/laolan/www/reactApp/package.json:

{
  "name": "youj-react-test",
  "version": "1.0.0",
  "description": "W3Cschool教程 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

 注：touch是linux下創(chuàng)建新文件的命令，在Windows中可以使用ni命令替換touch命令。即

ni index.html
ni App.jsx
ni main.js
ni webpack.config.js

第五步、設(shè)置編譯器，服務(wù)器，載入器

打開(kāi) 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)在打開(kāi) package.json 文件，找到 ?"scripts" ?中的? "test" "echo \"Error: no test specified\" && exit 1"? 使用以下代碼替換：

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

替換后的 package.json 文件 內(nèi)容如下：

{
  "name": "youj-react-test",
  "version": "1.0.0",
  "description": "W3Cschool教程 react 測(cè)試",
  "main": "index.js",
  "scripts": {
	"start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

現(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 - W3Cschool教程(w3cschool.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)到W3Cschool教程學(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í)例各文件代碼下載地址：reactApp.zip。