（6）react
a. >npm install --save react react-dom
使用react修改上述src/index.js的内容
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
React使用成功, document.getElementById('app'));
运行命令：npm run build ，再打开浏览器查看效果
a. react组件化
为了体现组件化，将“React使用成功”放到Display组件里
import React, {Component} from 'react';
export default class Dispaly extends Component {
render() {
return{
React安装成功
}
}
}
同时修改src/index.js的内容
import React from 'react';
import ReactDom from 'react-dom';
+ import Display from './component/Display/Display'
+ ReactDom.render(
b. react-router
安装
npm install --save react-router-dom
新建router文件夹和组件
** >cd src**
** >mkdir router && touch router/router.js **
编辑一个最基本的router.js,包含两个页面home和page1：
import React from 'react';
import {BrowserRouter as Router, Route, Swich, Link} from 'react-router-dom';
import Home from '../pages/Home/Home';
import Page1 from '../pages/Page1/Page1';
const getRouter = () => (
- 首页
- Page1
);
export default getRouter;
新建页面文件夹
cd src
mkdir pages
新建两个页面 Home,Page1
cd src/pages
mkdir Home && touch Home/Home.js
mkdir Page1 && touch Page1/Page1.js
填充内容：
src/pages/Home/Home.js
import React, {Component} from 'react';
export default class Home extends Component {
render() {
return (
This is Home
)
}
}
这是点击link会在Console显示error, Failed to execute 'pushState' on 'History': A history state object with URL 'file:///D:/' cannot be created in a document with origin 'null' and URL 'file:///D:… /dist/app.html'。这是因为一直以来我们通过[file:///F:/react/react-family/dist/index.html](file:///F:\react\react-family\dist\index.html)路径访问html。不是我们想象中的路由那样的路径http://localhost:3000~。因此，我们需要配置一个简单的WEB服务器，指向index.html~有下面两种方法来实现：
① Nginx, Apache, IIS等配置启动一个简单的的WEB服务器。
② 使用webpack-dev-server来配置启动WEB服务器。
所以，下面对dev-server进行配置，在本文章后再对react-router做详细介绍。
（7） webpack-dev-server配置WEB服务器
webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。这里webpack-dev-server需要全局安装，要不后面用的时候要写相对路径。
a. 安装
npm install webpack-dev-server --save-dev
npm install webpack-dev-server -g
b. 添加 webpack.config.js配置
devServer: {
contentBase: path.join(__dirname, './dist')
}
其中，contentBase指向文件根路径。
c. 添加运行指令
在package.json中添加
"start": "webpack-dev-server --config webpack.config.js"
执行 npm run start ，打开http://localhost:8080/查看效果
webpack-dev-server编译后的文件，都存储在内存中，我们并不能看见的。你可以删除之前遗留的文件dist/bundle.js，仍然能正常打开网站！
color（CLI only） console中打印彩色日志
historyApiFallback 任意的404响应都被替代为index.html。有什么用呢？你现在运行
npm start，然后打开浏览器，访问http://localhost:8080,然后点击Page1到链接http://localhost:8080/page1，然后刷新页面试试。发现刷新后404了。
为什么？dist文件夹里面并没有page1.html,当然会404了，所以我们需要配置
historyApiFallback，让所有的404定位到index.html。
host 指定一个host,默认是localhost。如果你希望服务器外部可以访问，指定如下：host: "0.0.0.0"。比如你用手机通过IP访问。
hot 启用Webpack的模块热替换特性。
port 配置要监听的端口。默认就是我们现在使用的8080端口。
proxy 代理。比如在 localhost:3000 上有后端服务的话，你可以这样启用代理：
proxy: {
"/api": "http://localhost:3000"
}
progress（CLI only） 将编译进度输出到控制台。
根据这几个配置，修改下我们的webpack-dev-server的配置~
devServer: {
port: 8080,
contentBase: path.join(__dirname, './dist'),
historyApiFallback: true,
host: '0.0.0.0'
}
CLI ONLY的需要在命令行中配置package.json
"dev": "webpack-dev-server --config webpack.dev.config.js --color --progress" ```
运行 npm start ，这个时候会发现编译正确，但是浏览器显示** Cannot GET /**。这是为什么呢？上面说到了，historyApiFallback，让所有的404定位到index.html。而我们代码中使用的是app.html，所以可以将app.html更换名字index.html或者使用：
historyApiFallback: {
rewrites: [
{ from: /./, to: './dist/app.html' }
]
}
初次之外，devServer还有一个hot属性，它是个布尔值，表示是否开启热替换模块，下面一节将讲到。
（8） Hot Module Replacement
从上可以发现，每当在js内修改内容，都需要重新编译。因此我们使用webpack的一个热替换插件Hot Module Replacement，当在编辑页面修改代码时，浏览器会自动刷新。使用功能如下：
在package.json 增加 --hot
"dev": "webpack-dev-server --config webpack.dev.config.js --color --progress --hot"
或者
在webpack.config.js中添加配置
const webpack = require('webpack');
devServer: { hot: true}
plugins:[ new webpack.HotModuleReplacementPlugin()]
我们分别尝试一下上面的配置，并使用下面的重置state案例：
修改Home.js,增加计数state
import React, {Component} from 'react';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
_handleClick() {
this.setState({
count: ++this.state.count
})
}
render() {
return (
This is Home
当前计数：{this.state.count}
)
}
}