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

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

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

首先給出項目結構：

--component    //組件文件夾
  ?--hello.jsx    //組件jsx
  --more-component  //嵌套組件可以放在次級目錄
--js
  ?--common.js    //自己常用的js方法，
--css            
  ?--hello.css   //每個組件對應一個css文件，便于管理
--img
--route
  ?--router.jsx    //路由配置組件
--store            //redux相關
  ?--action.js     //狀態發起動作方法
  ?--reducer.js    //接受動作后改變狀態
entry.jsx          //打包入口
temp.html         //打包模板html
webpack.config.js  //webpack配置

項目結構根據個人習慣可以修改，但原則上要保持條理清晰，有時候還要根據項目結構修改webpack配置等。

接下來配置webpack,同時npm安裝所需要的 loader。webpack相關配置請參考webpack中文文檔。本章不多做贅述。
給出一個簡單配置：
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")}
})

當編寫好webpack.config.js文件后，我們只需要用node運行它，那么當我們的react項目改變時會自行編譯到一個自動生成的dist文件夾里（建議一定開啟監聽文件改變編譯，而不是每次改變后手動運行webpack.config.js，因為那樣會很慢！）

做好了這些準備工作，接下來正式進入 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的模塊請npm安裝，我們在entry里僅僅創建一個狀態管理的store對象，并且將router.jsx的路由模塊渲染到body中，reducers是redux中具體需要更改哪些狀態的js文件，在creatStore里綁定。(關于redux的更多使用方法及理解需要詳細具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔redux中文文檔，我會整理后再多帶帶章節分享)

接下來我們將編寫路由組件
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有一些差別，原來的方法已經不再使用，在react-router4中HashRouter或BrowserRouter組件從react-redux-dom中引入。

關于業務組件的編寫，相信大家都很熟悉，即使以前使用es5開發的小伙伴也應該能很快上手
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)

在這個組件里，我們將redux中管理的state和觸發狀態更改的dispatch方法通過connect綁定在了props中，可以隨時調用，同時該組件將監聽redux中state的變化實時更新數據。

我們需要改變redux狀態時所觸發的動作
action.js

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

根據redux要求，這里的type屬性是必須的，不能用別的字段名，否則運行時瀏覽器會報type不存在。

接收action后執行狀態改變的文件就是
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屬性來判斷我們要做的是哪種操作，然后再根據傳入的其他屬性當做參數做你想要的改變，最后返回一個{name : ...}的對象，然后所有類似的對象通過combineReducers合并為一個總狀態對象暴露給組件訪問。

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

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

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