react+redux开发详细步骤

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 

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

npm install react-redux 

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

npm install babel-plugin-transform-decorators-legacy 

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

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

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

npm install redux-thunk

其他配套库

路由库react-router4
npm install react-router-dom --save
ajax库
npm install axios --save
组件属性校验库
npm install prop-types --save

配置下代理

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

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

来一款CSS预处理器

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

npm install less-loader less 

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

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

配合一款UI框架

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

npm install antd-mobile 

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

npm install babel-plugin-import 

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的获取更多扩展程序 （可能要FQ）。搜索安装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 你的地址
git push -u origin master