搭建 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”
配置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/
启动成功