摘要：我的入門到放棄之路最近看到很多相關的問題跟討論，越來越多的小伙伴喜歡這個框架了，同時也在看到了有些入門的小伙伴遇到了各種各樣的問題，本人也是框架使用都一枚，公司是騰訊阿里平安三巨頭合資的一家公司，分別上海深圳杭州北京廣州等多個分部，前端人員

最近看到很多react相關的問題跟討論，越來越多的小伙伴喜歡這個框架了，

同時也在看到了有些入門的小伙伴遇到了各種各樣的問題，本人也是react框架使用都一枚，

公司是騰訊、阿里、平安三巨頭合資的一家公司，分別上海、深圳、杭州、北京、廣州等多個分部，前端人員也有近100人，

框架也在統一往react靠齊，本人也在實際項目中應用了蠻長一段時間，跟社區的很多新伙伴一樣，入坑的過程中，遇到過各種各樣的問題，

這里就不一一詳細吐槽了，吐下去，你們估計要罵我瘋了，重點就講講我們項目的一些整個框架結構吧，

因為很多小伙伴在入門后，上手做項目時，都會苦腦于項目結構如何構建，便于后期維護、項目迭代等等的問題；

地址：github項目示例地址 ，如果覺得不錯，對你有幫助記得幫 轉發 和 star哦，感謝您的支持。

可以掃碼預覽哦

上面是項目的大體結構，有興趣的小伙伴，可以進入項目詳細看看，

1、首先我們會分不同的環境，寫不同的配置文件，便于結構清晰，維護修改；
2、所有的項目組件都放在pages里，pages里再按項目模塊去劃分項目結構，actions、reducers內也是如何，共用的組件放在components內，
路由文件也是按項目模塊來劃分，不要全部放在一個文件內，找起來特別不方便，也不容易維護，
4、后面統一引入在一個入口文件內，對外輸出，
5、實現了按需加載，共用代碼提取，
6、該項目主要用到了
react、react-router、redux、redux-thunk、es6、babel、webpack、node、express、fetch等
7、特別說明，window.devToolsExtension是redux的一個調試工具，在chrome瀏覽器應用商店搜索redux后按裝，開發環境就能看到redux狀態的每一步變化了，便于調試提高開發效率;
8、當然還有其他的，就不一一說明了，可進入項目細看，

/server/config.js

var dev = require("./env/dev"),
    test = require("./env/test"),
    pre = require("./env/pre"),
    prd = require("./env/prd");

var defaults = {
  root: path.normalize(__dirname + "/..")
};

module.exports = {
  dev: extend(dev, defaults),
  test: extend(test, defaults),
  pre: extend(pre, defaults),
  prd: extend(prd, defaults)
}[process.env.DEPLOY_ENV || "dev"]; //DEPLOY_ENV 為 node服務端環境變量

路由文件也是按項目模塊來劃分
/src/pages/route.js
import React from "react";
import ReactDOM from "react-dom";
import {Provider} from "react-redux";
import useBasename from "history/lib/useBasename";
import { hashHistory, browserHistory, Router } from "react-router";
import Store from "src/store";
import bridge from "src/utils/bridge"

const rootRoute = {
  path: "/",
  component: require("../components/app/App"),
  childRoutes: [
    require("./Home/route"),//引入不同模塊的路由
    require("./Intro/route"),
    require("./Handler/route"),
    require("./Setting/route"),
    {
      path: "*",
      getComponent(location, cb) {
        require.ensure([], (require) => {
          cb(null, require("./NotFoundPage"));
        });
      },
      onEnter: () => bridge.doAction("setTitle", { title: "出錯啦" })
      // onEnter: () => bridge.doAction("setWechat")
    }
  ],
  indexRoute:{ onEnter: (nextState, replace) => replace("/home") }, //默認重定向到->首頁
};

import {createStore,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import reducers from "src/reducers";

function configStore (){
    let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
    //dev環境開啟redux調試
    let store  = createStoreWithMiddleware(reducers,(__DEBUG__ && window.devToolsExtension ? window.devToolsExtension() : undefined));
    return store;
};

export default configStore();

地址：github項目示例地址 ，如果覺得不錯，對你有幫助記得幫 轉發 和 star哦，感謝您的支持。

想更詳細的了解我？還有更多疑惑？請猛戳這里吧，記得關注我們的公眾號哦！

作者：蘇南 - 首席填坑官
交流群：912594095，公眾號：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權，非商業轉載請注明原鏈接及出處。