React 项目的架构与实现（一）

[sweeetcc]

大约一周半以前结束了一个比较大的 React 项目的开发，这也是为公司做的第三个真正意义上的 React 项目。业余时间也用 React 实现过一些个人网站，所觉得以对 React 项目的开发做一些总结性的沉淀了。所以，这一系列文章就以本次开发的项目为蓝本，总结一下 React 项目的架构与实现。

---

一· 前期准备阶段

决定使用 React，一方面是基于目前的框架流行趋势，React 仍然是最火爆的框架之一，很长一段时间内，用 React 开发企业级网站肯定不会落伍，当然这也是基于我们的技术视野做出的判断；另一方面，经过我们在团队内的使用，我认为我们对于使用 React 开发的技术储备已经足够。我们开发过两个虽小却全的东西：一个是帮助中心文档，另一个是金融论坛，其中金融论坛是使用同一个项目，同时服务于 WEB 端和 APP 端，APP 端使用的是 Hybird 开发模式。

回到项目的准备期，我主要做了以下几个方面的调研：

1. 技术栈：需要集成进来的技术栈包括哪些？
2. 项目结构：基于选定的技术栈，需要约定好的目录结构，文件命名等如何安排？
3. 技术栈生态和周边：基于已经选定的技术栈，我调研了一些周边的组件、开发工具、中间件等；
4. 开发流程：包括项目的组织，编写的顺序等；
5. 其他：其他一些考虑，比如速度、SEO、优化方式等。

经过以上几个方面的调研，我基本确定本次开发使用的：

1. 技术栈： react + redux + webpack
2. 项目工程结构基础：

3. 技术栈生态和周边：包括 redux 中间件、react 视图组件等有一些备选方案被确定；
4. 开发流程：代码约定决定依靠编程工具和 webpack 插件来做到，另外一些包括组件的分类，请求的约定等；
5. 其他：确定使用 express 作为 server render 方案服务端。

项目搭建阶段：

在前期调研的基础上，进行项目搭建可以说很快。

1. 按照已经设计好的目录结构，创建好目录结构；
2. 加入 webpack 配置，这个阶段比较曲折……
3. 加入 gulp 配置，已经相关的 npm scripts；

以上几个阶段之后，基本完成项目的初始化配置，其实让一个项目跑起来很简单，可能照着 webpack 文档配置一番就可以，但是我觉得从零开始做一个大型前端项目必定会经历不断磨合修改的过程。

比如，选择 css 的预处理器，选择 webpack 的插件等，可能需要实验好多次才能够找到顺手的工具。

开发前期阶段：

规范设定：

1. stylelint 样式检查：
2. eslint 代码格式检查；
3. 颜色 attributes 文件编写，color panel 设计；

颜色设计：

1. 颜色常量：大写字母下划线；（比如 GOLD_YELLOW）；
2. 颜色变量：小写开头驼峰标识；（比如 borderColor）；

原型设计：

为了更快实现出网站的结构，我编写了一个组件用来填充结构。给这个组件起了个名字叫做 prototypeBox（原型框）。

import React, { Component } from 'react';

import './style.less';

class PrototypeBox extends Component {
  render() {
    const { width, height, bg, children, extraStyle } = this.props;
    const styles = {
      width,
      height,
      lineHeight: height,
      backgroundColor: bg,
      ...extraStyle,
    };

    return (
      <div className="prototype-box" style={{...styles}}>
        {children}
      </div>
    );
  }
}

React.propTypes = {
  width: React.PropTypes.string.isRequired,
  height: React.PropTypes.string.isRequired,
  children: React.PropTypes.element,
  bg: React.PropTypes.string,
  extraStyle: React.PropTypes.object,
};

export default PrototypeBox;

这个组件可以接收几个参数，包括：

1. 宽度；
2. 高度；
3. 背景；
4. 其他样式设置；

大概的作用如下：

我喜欢“渐进式”地开发，所以习惯上先写结构再顾细节，所以这种方式比较符合我的开发习惯。

好啦，关于 React 项目的架构与实现，先说到这里吧，题目有点大了，主要是为了总结一下这次的开发经验。