摘要：相關(guān)配置請(qǐng)參考中文文檔。關(guān)于的更多使用方法及理解需要詳細(xì)具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔中文文檔，我會(huì)整理后再多帶帶章節(jié)分享接下來我們將編寫路由組件這與有一些差別，原來的方法已經(jīng)不再使用，在中或組件從中引入。

??????相信很多剛?cè)肟覴eact的小伙伴們有一個(gè)同樣的疑惑，由于React相關(guān)庫不斷的再進(jìn)行版本迭代，網(wǎng)上很多以前的技術(shù)分享變得不再適用。比如react-touter2與react-router4在寫法上存在不少區(qū)別，以前的調(diào)用方法將無法使得項(xiàng)目正常工作。我最近用React全家桶在構(gòu)建一個(gè)spa，由于官方文檔給的比較繁瑣，使用類似react-cli的腳手架工具會(huì)使你的理解停留在表面，能用單反相機(jī)就不用傻瓜相機(jī)~~最好還是自己動(dòng)手豐衣足食。在這里希望能用通俗易懂的方式來說一下如何快速構(gòu)建spa。(PS:此文旨在讓大家少走彎路，因此在項(xiàng)目結(jié)構(gòu)上力求全而簡(jiǎn))

在此之前你先需要懂得基本的 nodejs 操作與 ES2015 語法。
通過npm安裝webpack:npm install webpack,然后用node運(yùn)行配配置文件(這里并非絕對(duì)，也可以直接在cmd里運(yùn)行，但不推薦)

首先給出項(xiàng)目結(jié)構(gòu)：

--component    //組件文件夾
  ?--hello.jsx    //組件jsx
  --more-component  //嵌套組件可以放在次級(jí)目錄
--js
  ?--common.js    //自己常用的js方法，
--css            
  ?--hello.css   //每個(gè)組件對(duì)應(yīng)一個(gè)css文件，便于管理
--img
--route
  ?--router.jsx    //路由配置組件
--store            //redux相關(guān)
  ?--action.js     //狀態(tài)發(fā)起動(dòng)作方法
  ?--reducer.js    //接受動(dòng)作后改變狀態(tài)
entry.jsx          //打包入口
temp.html         //打包模板html
webpack.config.js  //webpack配置

項(xiàng)目結(jié)構(gòu)根據(jù)個(gè)人習(xí)慣可以修改，但原則上要保持條理清晰，有時(shí)候還要根據(jù)項(xiàng)目結(jié)構(gòu)修改webpack配置等。

接下來配置webpack,同時(shí)npm安裝所需要的 loader。webpack相關(guān)配置請(qǐng)參考webpack中文文檔。本章不多做贅述。
給出一個(gè)簡(jiǎn)單配置：
webpack.config.js

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const compiler = webpack({
    entry: "./entry.jsx"，
    output:{
        path: path.resolve(__dirname, "./dist"),
        filename:"code.min.js"
    },
    module:{
        rules:[
            {
                test:/.css$/,
                include:[path.resolve(__dirname, "./")],
                loader:"style-loader!css-loader"
            },
            {
                test:/.js$/,
                include:[path.resolve(__dirname, "./")],
                loader:"babel-loader",
                options: {
                    presets: ["es2015","stage-0"]
                }
            },
            {
                test:/.jsx$/,
                include:[path.resolve(__dirname, "./")],
                loader:"babel-loader",
                options: {
                    presets: ["es2015","stage-0","react"]
                }
            },
            {
                test: /.(png|jpeg|jpg)$/,
                include:[path.resolve(__dirname, "./img")],
                loader:"file-loader?name=img/[name]-[hash].[ext]"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./temp.html",
            filename:"./spa.html",
            inject:"body"
        })
    ]
});

const watching = compiler.watch({
    aggregateTimeout: 300,
    poll: undefined
}, (err, stats) => {
    if (err || stats.hasErrors())console.log(stats.compilation.errors);
    else{console.log("success")}
})

當(dāng)編寫好webpack.config.js文件后，我們只需要用node運(yùn)行它，那么當(dāng)我們的react項(xiàng)目改變時(shí)會(huì)自行編譯到一個(gè)自動(dòng)生成的dist文件夾里（建議一定開啟監(jiān)聽文件改變編譯，而不是每次改變后手動(dòng)運(yùn)行webpack.config.js，因?yàn)槟菢訒?huì)很慢！）

做好了這些準(zhǔn)備工作，接下來正式進(jìn)入 React 世界：
entry.js

import React from "react"
import { render } from "react-dom"
import { createStore } from "redux"
import todoApp from "./store/reducers"
import Main from "./route/router.jsx"

let store = createStore(todoApp)

render(
    
,
    document.body
)

上面import的模塊請(qǐng)npm安裝，我們?cè)?b>entry里僅僅創(chuàng)建一個(gè)狀態(tài)管理的store對(duì)象，并且將router.jsx的路由模塊渲染到body中，reducers是redux中具體需要更改哪些狀態(tài)的js文件，在creatStore里綁定。(關(guān)于redux的更多使用方法及理解需要詳細(xì)具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔redux中文文檔，我會(huì)整理后再多帶帶章節(jié)分享)

接下來我們將編寫路由組件
router.jsx

import React from "react"
import { HashRouter as Router,Route } from "react-router-dom"
import { Provider } from "react-redux"

import Hello from "../component/hello.jsx";

class Main extends React.Component {
    render(){
        const { store } = this.props
        return (
            
                
                 {
                    return(
                        

                            
                        
                    )
                }}/>
                
            
        )
    }
}

export default Main ;

這與react-router2有一些差別，原來的方法已經(jīng)不再使用，在react-router4中HashRouter或BrowserRouter組件從react-redux-dom中引入。

關(guān)于業(yè)務(wù)組件的編寫，相信大家都很熟悉，即使以前使用es5開發(fā)的小伙伴也應(yīng)該能很快上手
hello.jsx

import "../css/xxx.css";
import React from "react";
import { connect } from "react-redux";
import * as action from "../store/actions";

class Hello extends React.Component{
    constructor(props){
        super(props)
        this.state={...}
    }
    componentDidMount(){
        this.props.dispatch(action.hi())
    }
    render() {
        const { name } = this.props
        return (
            
{name}
        )
    }
}

export default connect(state => state)(Hello)

在這個(gè)組件里，我們將redux中管理的state和觸發(fā)狀態(tài)更改的dispatch方法通過connect綁定在了props中，可以隨時(shí)調(diào)用，同時(shí)該組件將監(jiān)聽redux中state的變化實(shí)時(shí)更新數(shù)據(jù)。

我們需要改變redux狀態(tài)時(shí)所觸發(fā)的動(dòng)作
action.js

export const hi = () => {
    return {
        type:"hi",
        ...//其他你需要的屬性
    }
}

根據(jù)redux要求，這里的type屬性是必須的，不能用別的字段名，否則運(yùn)行時(shí)瀏覽器會(huì)報(bào)type不存在。

接收action后執(zhí)行狀態(tài)改變的文件就是
reducers.js

import { combineReducers } from "redux"

const name = (state="", action) => {
    switch (action.type) {
        case "hi":
            return "hello world!"
        default :
            return state
    }
}

const todoApp = combineReducers({
    name,
    //more state
})  

export default todoApp;

reducer首先用action中傳入的type屬性來判斷我們要做的是哪種操作，然后再根據(jù)傳入的其他屬性當(dāng)做參數(shù)做你想要的改變，最后返回一個(gè){name : ...}的對(duì)象，然后所有類似的對(duì)象通過combineReducers合并為一個(gè)總狀態(tài)對(duì)象暴露給組件訪問。

當(dāng)以上文件利用webpack編譯打包好以后，一個(gè)最簡(jiǎn)單的react全家桶spa就完成了（雖然只包含一個(gè)組件）。
在實(shí)際的使用過程中，需要更多的庫來使我們的應(yīng)用更強(qiáng)大且美觀。比如路由過度動(dòng)畫react-addons-css-transition-group，redux異步更改state數(shù)據(jù)redux-thunk，Ajax的兼容shimwhatwg-fetch，移動(dòng)端滾動(dòng)iscroll等等。

關(guān)于react-router4與redux的詳細(xì)用法還是建議要靜下心來理解文檔，這樣才能在變化多端的開發(fā)需求中運(yùn)用自如。（我之前也用過vuex，感覺相比之下redux文檔稍顯繁瑣，vuex文檔看了很容易就理解上手了）

如果感興趣可以訪問我的成熟項(xiàng)目源碼React醫(yī)療類移動(dòng)app --Github，歡迎各位多多指教，多多star ^_^