React+Redux开发实录（摘）

（一）搭建工程脚手架

准备工作

• 安装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)$/, //  这里加上less
  use: [
    ...
    {
      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的获取更多扩展程序 （可能要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 https://github.com/zhutx/react-redux-app.git
git push -u origin master

 

（二）React技术栈一览

从上面搭建工程脚手架中，我们看到了React开发技术栈。有ES6、babel、eslint、webpack、react、redux、react-router。

对React新手（有HTML、JavaScript、CSS基础）来说，需明确掌握React和Redux相关概念。至于其他的，了解就可以。不过我们有必要在实践之前从整体上俯瞰一下。清楚来龙去脉，避免迷迷糊糊一味跟随别人的代码去Ctrl+C & Ctrl+V，即痛苦又容易半途而废。

ES6

JavaScript的下一代标准，规定今后按年份发布新版。2015年发布的ECMAScript6.0，也叫ES2015。
实践React之前，建议先了解下ES6的模块化、箭头函数、表达式解构、Promise异步编程。

完整了解ES6，推荐阅读前端大牛Nicholas C. Zakas（尼古拉斯.泽卡斯）的《深入理解ES6》

线上阅读推荐：阮一峰的开源书《ECMAScript6入门》

Babel

JavaScript在不断发展，各种新的标准提案层出不穷，由于浏览器的多样性导致可能几年之内都无法广泛普及。Babel是一个广泛使用的转码器，可以将ES6代码转化为几乎所有浏览器都认识的ES5旧代码，你可以不必顾虑的使用ES新特性。

这里有个Babel的REPL线上编译器。在左侧输入箭头函数f=>f感受下吧。

实践React之前，知道有这么个东西就可以了。Webpack会在构建项目时自动调用Babel进行转换。

线上阅读推荐：React技术栈之Babel

ESlint

ESLint是一个JavaScript代码静态检查工具，可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则，也提供用户自定义规则去约束JavaScript风格。

ESLint是Nicholas C. Zakas（尼古拉斯.泽卡斯）创造的。前端大牛，前雅虎前端技术主管，YUI 库的贡献者。当年的我，凭着他的红宝书《JavaScript高级程序设计》，再配合《CSS网站布局实录》，就迈入前端。他同时也是《编写可维护的JavaScript》、《高性能JavaScript》和《深入理解ES6》的作者。

实践React之前，知道有这么个东西就可以了。项目过程中，需要调整规则的时候，参考ESlint完整规则列表

Webpack

Webpack是新一代打包工具。如今，前端项目日渐复杂，构建系统已成为开发过程中不可或缺的部分，而模块打包正是前端构建系统的核心。

实践React之前，了解下webpack就可以。通过ceate-react-app创建的脚手架，执行npm run eject弹出的webpack配置，就已经相当完美了。再集合项目，适当定制就可以了。

线上阅读推荐：
入门webpack
一小时包教会webpack

线上阅读推荐：
React技术栈之Webpack环境搭建（一）手动搭建
React技术栈之Webpack环境搭建（二）不同环境不同配置
React技术栈之Webpack环境搭建（三）打包性能优化

React

React是Facebook推出的JavaScript库。口号是“用来创建用户界面的JavaScript库”，所以它只是和用户界面打交道，可以把它看成MVC中的V（视图）层，项目中一般再配上Redux进行数据流和状态的管理。

实践React之前，强烈建议熟悉下React概念。

线上阅读推荐：
React技术栈之React（一）初识React
React技术栈之React（二）组件的prop和state
React技术栈之React（三）组件的生命周期

Redux

React的核心就是组件，它只负责view，当应用复杂程度增加时，还需要有数据流向控制、状态管理等方案。

React推出了Flux架构及其官方实现。同时业界也推出了很多Flux的实现，其中以Redux为翘楚，它将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。

直接使用Redux是有点烦的，因此React官方提供了react-redux库，它对redux api进行了封装，借助react-redux，可以在项目中更方便的使用Redux。

实践React之前，必须熟悉Redux和react-redux，了解Flex架构更好但不是必须。

线上阅读推荐：
Redux入门教程
React技术栈之Redux异步流
React技术栈之Redux高阶运用

react-router

路由库React-Router，是React体系的一个重要部分。它是官方维护的，事实上也是唯一可选的路由库。它通过管理URL，实现组件的切换和状态的变化。现在已经到了react-router4版本了，跟3版本用法有所不同。

实践React之前，可以了解下。

线上阅读参考：
React技术栈之React-Router(这个是react-router3)

UI框架

诸如 Ant Design、Material-UI、React bootstrap、React Desktop、Amaze UI React