React项目模板-从项目搭建到部署

前一段时间作了一个小项目，时间比较紧，就一我的月。最终但愿可以经过微信公众号连接启动应用。
项目的业务细节就很少说了，主要是想分享一下作这个项目技术方面的一些经验。

技术选型

参考范围大体三种：AngularJS，Angular，React。

这里可能会有些困惑，AngularJS和Angular不是一个东西吗？

没错，它们是一个东西，但也不是一个东西。好了，废话少说，首先说明一下AngularJS和Angular的区别。

引用官方文档中的一句话

Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.

这回很清晰了。

Angular：指的是 v2.x 及之后的版本

AngularJS：特指 v1.x

因为Angular从2.0之后版本更新比较大，因此为了作区分，只能想出这么一招了。

好了，回归正题，这三种技术怎么选择？

如下是我当时的考虑：

AngularJS：因为以前两个项目一直在用AngularJS，因此使用起来并不陌生，相对buffer也会少不少(前面说了，时间比较紧，只有一个月)。碰到问题还能够和你们商量一下。
可是AngularJS性能及体积是个问题，尤为是要在手机端运行。

Angular: 性能不是问题，体积也还好。可是接触比较少，以前只作过一个Web端的项目。

React: 前一段时间刚刚研究过，性能，体积都不是问题。可是同Angular同样，没有实际项目经验啊，出了问题就只能百度了。

通过以上的一番权衡，其实我内心是想用React的。其中一个缘由是通过前一段时间的学习，很想经过一个项目积累一些React的开发经验，
另一个缘由是React不管从性能上（得益于Virtual DOM）仍是思想上（组件化）都更为先进。

基于以上两点缘由，因此在和项目经理肯定技术选型的时候，我极力推荐React，虽然可能会存在一些buffer，可是从可持续化发展的角度考虑（本身瞎猜的...），最终项目经理赞成了。

项目框架搭建

在GitHub上看了不少的boilerplate工程，或多或少都和本身的需求有些出入。
因此，最终本身经过React官方的create-react-app cli搭建了一个seed工程。

1. 准备环境

node.js

2. 安装creat-react-app cli

npm install -g create-react-app

3. 建立工程

create-react-app react-seed

而后进入项目根目录react-seed安装相关依赖

cd react-seed
npm install

4. 暴露配置项

因为采用create-react-app建立的项目webpack等配置信息都是封装好的，因此为了灵活修改相关配置，能够经过如下命令让封装好的配置文件暴露出来。

npm run eject

建立好的项目目录以下：

5. 本地服务启动

// 启动本地server用于开发
npm run start

将会在本地 3000 端口启动

redux集成

熟悉React的可能都知道，React是单向数据流，因此有些状况下单单依赖React自身没法实现组件之间的通讯，这时就须要Redux登场了。

本文不介绍Redux的语法及思想，只说明如何集成。

首先须要安装Redux相关依赖，因为不一样版本之间可能存在兼容性问题，因此安装的时候最好制定版本：

npm install redux@3.7.2 --save
npm install redux-thunk@2.1.0 --save
npm install react-redux@5.0.6 --save

而后就能够在项目中引入redux了，能够像以下方式组织目录结构：

路由集成

react-router

npm install react-router@3.0.5 --save

路由支持嵌套，代码以下：

const routes = (
    <Router history={hashHistory}>
        <Route path="/home" component={Layout} onEnter={onEnter}>
            <IndexRoute getComponent={home} onEnter={onEnter}/>
            <Route path="/home" getComponent={home} onEnter={onEnter}/>
            <Route path="/detect" getComponent={detect} onEnter={onEnter}/>
            <Route path="/about" getComponent={about} onEnter={onEnter}/>
        </Route>
        <Route path="/unauthorized" getComponent={unauthorized}/>
        <Redirect from="*" to="/home" />
    </Router>
);

export default routes;

国际化方案

采用的是经常使用的react-intl

npm install react-intl@2.4.0 --save

UI组件集成

基于React的UI组件在这里推荐两个，一个是蚂蚁金服的Ant Design；另一个是Material-UI。

两个都很不错，本人使用的是Ant Design。

npm install antd@2.13.10 --save

fetch集成

关于请求数据有不少种方式，本人用的是fetch。

npm install fetch@1.1.0 --save

能够简单封装一下，以下：

import 'whatwg-fetch'
import loggerService from './logger'

let notAuthorizedCounter = 0;
let fetchService = {
    fetch: (url, method, header, body) => {
        if (!header) {
            header = {}
        }

        return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
            loggerService.log('fetchService failed:', exception);

            // token过时，从新获取token并发起请求
            if (exception.code === '401' || exception.code === '403') {
                notAuthorizedCounter++;
                // 最多重试3次
                if (notAuthorizedCounter > 2) {
                    notAuthorizedCounter = 0;
                    loggerService.warn("401 or 403 received. Max attemps reached.");
                    return;
                } else {
                    return fetchService.fetch(url, method, header, body);
                }
            }
        });
    },
    get: (url, header) => {
        return fetch(url, {
            method: 'GET',
            headers: header
        }).then((response) => {
            return response.json();
        });
    },
    post: (url, header, body) => {
        header['Content-Type'] = 'application/json';
        return fetch(url, {
            method: 'POST',
            headers: header,
            body: JSON.stringify(body)
        }).then((response) => {
            return response.json();
        });
    }
};
export default fetchService;

项目部署

首先对项目进行打包。

npm run build

能够经过如下命令在本地环境运行打包后的项目。

serve -s build

注意：

若是项目中引入路由的时候使用的是BrowserRouter,
那么当执行npm run build打包以后，本地打开index.html文件，会出现空白页面。

缘由是BrowserRouter是用浏览器history对象的方法去请求服务器，
若是服务器没有配置相对应的路由去指向对应的页面，路由会找不到资源。

BrowserRouter会变成相似这样的路径http://111.230.139.105:3001/detail/9459469， 这样的路径在访问服务器时，服务器会认为是请求查找某个接口数据。

因此这时候必须使用HashRouter，这时候访问具体页面时就是http://111.230.139.105:3001/#/detail/9459469

---

项目源码已经开源到github上，喜欢的给个Star支持下吧！（^_^）

react-seed