react+redux环境

项目实录：

安装create-react-app基础脚手架

npm install -g create-react-app

创建工程

create-react-app react-redux-app

进入工程

cd react-redux-app

启动工程

npm start

webpack配置

npm run eject

安装redux相关库

npm  install redux --save

react-redux库

npm install react-redux --save

安装bable插件transform-decorators-legacy

npm install babel-plugin-transform-decorators-legacy --save-dev

配置package.json

"babel" : {
    "plugins" : [
            "transform-decorators-legacy" 
    ]
}

但是我配置这一步，之后有报错，
Error: The ‘decorators’ plugin requires a ‘decoratorsBeforeExport’ option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the ‘decorators-legacy’ plugin instead of ‘decorators’
所以换了另一种解决方法

npm install babel-plugin-transform-decorators-legacy  --save-dev
npm install  @babel/plugin-proposal-decorators --save-dev

"babel" : {
    plugins : [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose" : true }]
    ]
}

安装redux异步调用的库redux-thunk

npm install redux-thunk --save

其他配套库

# 路由库react-router4
npm install react-router-dom --save

# ajax库
npm install axios --save

# 组件属性校验库
npm install prop-types --save

# cookie操纵库
npm install browser-cookies --save

# socket.io客户端
npm install socket.io-client --save

配置代理

"proxy": "[http://localhost:9093](http://localhost:9093/)"

配置css预处理器

npm install less-loader less --save-dev

修改/config/webpack.config.js

{
    test : /\.(css|less)$/,
    use : [
            ... 
            {
                    loader : require.resolve('less-loader') 
            } 
    ] 
}

配合UI框架（此处使用antd）

npm install antd --save-dev

配置ui组件按需加载

npm install babel-plugin-import

package.json配置插件

"babel": {
  "plugins": [
    ...
    ["import", { "libraryName": "antd", "style": "css" }]
    ]
}

package.json修改配置结果如下：

package.json

工程中穿件基础目录等
/src/conponent
/src/container
/src/redux

/src/container/login/index.js

login

/src/container/register/index.js

register

/src/config.js

config

/src/reducer.js

reducer

/src/app.js

app

/src/index.js——清理工程目录，如下图左边所示

index.js

然后再次启动工程

npm start

http://localhost:3000/

启动成功 登录页
注册页

开发准备就已经ok了o(￣︶￣)o