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