React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录（二）React技术栈一览

搭建工程脚手架

准备工作

• 安装node
• 安装git
• 安装一款前端IDE
  推荐VSCode，最火的前端IDE，比sublime开源，比WebStrom轻，比XCode快。人性化，配色也很舒服，用来开发很惬意。

create-react-app基础脚手架

借助React官方的create-react-app工具，开发人员可以从配置工作中解脱出来，无需过早关注React技术栈，通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发：

npm install -g create-react-app

安装结束后，就可以在终端用create-react-app命令创建工程：

create-react-app react-redux-app

react-redux-app工程集成了react应用框架，在此基础上进行React应用开发，就避免了繁琐的初始配置工作。

进入工程目录，启动工程：

cd react-redux-app
npm start

启动了一个开发模式的服务器，指向本机http://localhost:3000/，显示如下：

弹出webpack配置

实际开发中，通常要定制webpack的配置，因此我们弹出应用的webpack配置：

npm run eject

执行完以上命令，react-redux-app下多了config和scrips目录，分别对应webpack配置和npm脚本。

安装redux相关库

安装redux核心库：

npm install redux --save

直接使用redux的API会比较繁琐。react官方提供的react-redux库，可以更方便的使用redux：

npm install react-redux --save

安装babel插件transform-decorators-legacy，可以使用@connect更方便的连接UI组件与容器组件：

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

安装transform-decorators-legacy插件后，需在package.json配置该插件：

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

安装下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

配置下代理

开发中，前端工程与后端API不在一个域名，为避免跨域限制，方便接口调试，需在package.json中配下代理：

# 比如，任何ajax请求，都代理到localhost:9093域
"proxy": "http://localhost:9093"

来一款CSS预处理器

less、sass或stylus都行，这里我安装less。

npm install less-loader less --save-dev

分别修改/config/webpack.config.dev.js和/config/webpack.config.prod.js：

{test: /\.(css|less)$/, //  这里加上lessuse: [...{loader: require.resolve('less-loader') // 配置less-loader}]
}

配合一款UI框架

React开发，国内首选蚂蚁金服的antd设计，移动端的话，安装antd-mobile：

npm install antd-mobile --save-dev

最好配置antd组件样式的按需加载，借助babel的import插件：

npm install babel-plugin-import --save-dev

package.json中，记得配置上该插件：

"babel": {"plugins": ["transform-decorators-legacy",["import", { "libraryName": "antd-mobile", "style": "css" }]]
}

初始目录文件

创建一些初始目录和文件，在入口处完成redux和router的一些基础工作：

创建目录/src/component

创建目录/src/container

创建目录/src/redux

创建/src/container/login/index.js，编辑如下：

import React from 'react'class Login extends React.Component {render() {return <h2>登录页</h2>}
}export default Login

创建/src/container/register/index.js，编辑如下：

import React from 'react'class Register extends React.Component {render() {return <h2>注册页</h2>}
}export default Register

创建/src/config.js，编辑如下：

import axios from 'axios'
import { Toast } from 'antd-mobile'axios.interceptors.request.use(function(config) {Toast.loading('加载中', 0)return config
})axios.interceptors.response.use(function(config) {Toast.hide()return config
})

创建/src/reducer.js，编辑如下：

import { combineReducers } from 'redux'function reducer(state = 0, action) {return state
}export default combineReducers({reducer})

创建/src/app.js，编辑如下：

import React from 'react'
import { Route } from 'react-router-dom'import Login from './container/login'
import Register from './container/register'class App extends React.Component {render () {return (<div><Route path="/Register" component={Register}></Route><Route path="/login" component={Login}></Route></div>)}
}export default App

修改/src/index.js，编辑如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'import registerServiceWorker from './registerServiceWorker';
import reducers from './reducer'
import './config'
import App from './app'registerServiceWorker()const store = createStore(reducers, compose(applyMiddleware(thunk),window.devToolsExtension ? window.devToolsExtension() : f => f
))ReactDOM.render((<Provider store={store}><BrowserRouter><App></App></BrowserRouter></Provider>
), document.getElementById('root'));

删除其他多余的文件，保持脚手架工程为如下结构：

再次启动工程：

npm start

访问登录页http://localhost:3000/login，显示：

访问注册页http://localhost:3000/register，显示：

安装Chrome扩展

访问Chrome的获取更多扩展程序 （可能要翻墙）。搜索安装react-developer-tools和redux-devtools。

或者自己去网上下载扩展程序的crx文件，进入chrome扩展程序页面，勾选开发者模式，然后把crx文件拖进去。

也不必刻意学习要怎么使用，开发中自己调出来，多点几下就都明白了。

按需安装其他库

其他库，视自身项目情况安装吧。比如，如果你的后端使用node服务端暴露接口API，而你又使用express框架进行node开发。那么，你需要安装express：

npm install express --save

假如你不想每次修改后端接口都重启node服务端，那么你可以安装nodemon库：

npm install -g nodemon

安装了nodemon库后，用nodemon命令代替node命令启动node服务端就可以了。

安装node.js的消息体解析中间件：

npm install body-parser --save

假如你用cookie存储用户会话，可以安装node操作cookie的库cookie-parse：

npm install cookie-parser --save

如果你要在node里用DM5进行密码加密的话，你可能需要utility库：

npm install utility --save

如果有实时聊天等功能的话，可能socket库你也需要：

npm install socket.io --save

再如果，你是使用mongodb数据库，那么你要在机器上安装mongodb：

# mac电脑可以用brew工具在本机安装mongodb
brew install mongodb
# 完了后，你可以用以下命令启动和停止mongodb服务：
brew services start mongodb
brew services stop mongodb

安装mongoose库，封装了node对mongodb的api操纵：

npm install mongoose --save

npm里海量的库，自己按需安装去吧......

源代码托管一下

去github上创建下远程仓库react-redux-app。
然后在工程目录下执行以下命令，关联上远程仓库：

git init
git remote add origin https://github.com/zhutx/react-redux-app.git
git push -u origin master

React+Redux开发实录（一）搭建工程脚手架
React+Redux开发实录（二）React技术栈一览