React项目结构

合理的项目架构，对于项目的扩展与维护是至关重要的。

架构图

一般项目中，主要有三个文件夹与业务页面关系耦合。

api：API，不建议按业务区分文件。

views：具体模板，建议按业务区分文件。

const: 常量，建议按业务区分文件。

style: 样式文件，建议按业务区分文件。

TIP

views、const、style的文件结构应该一致。

|-- src 项目主目录
  |-- api
    |-- index.js 项目API文件，不建议区分各个模块的API。
  |-- views 项目模板页面文件夹
    |-- Home 一级目录，一级模块
      |-- Query 二级目录，二级模块
        |-- Register 三级目录，三级模块（建议最多三级目录）
          |-- User （模块级-独立路由组件以文件夹存储，方便扩展，比如此模块存在详情页）
            |-- components 模块组件（不含有独立路由）
              |-- Common.jsx 公共组件
              |-- list 组件下的子组件（与组件同名）
                |-- ListSearch.jsx 搜索组件
                |-- ...
              |-- detail
                |-- FormButton.jsx
                |-- ...
            |-- List.jsx 用户列表
            |-- Detail.jsx 注册详情
          |-- Admin 
            |-- List.jsx 管理员列表
            |-- Detail.jsx 注册详情
          |-- ... 其他组件
        |-- ... 其他三级目录
      |-- Welcome 二级目录（无三级目录的情况）
        |-- Hello （模块级组件文件夹即可）
          |-- Hello.jsx
          |-- ...其他组件
      |-- ... 其他二级目录
    |-- Admin 一级目录（无二级目录的情况）
      |-- User （模块级组件文件夹即可）
        |-- User.jsx
        |-- ...其他组件
    |-- ... 其他一级目录
  |-- style
    |-- layout-style 项目layout相关样式
    |-- view-style （对齐view文件结构）
      |-- home.module.scss 主页样式，建议一个模块(可能包含多页)一个样式文件即可
      |-- ...其他模块样式
    |-- reset.scss 重置样式
    |-- global.scss 全局样式
  |-- const 项目常量存放文件夹（对齐view文件结构）
    |-- fields 表格表单等
      |-- home
        |-- query
          |-- register
            |-- user
              |-- components
                |-- common.js 公共组件
                |-- list list子组件
                  |-- listSearch.js
                  |-- ...
              |-- list.js
              |-- detail.js
            |-- ...
          |-- ...
        |-- ...
      |-- ...

****无单独路由的组件，应该都放在components下****。

文件命名及路由

文件命名规则为大驼峰，不要下划线。

|-- ApplyProduct.jsx 文件规范命名

路由参数规则如下：

URL路径上的参数path，应该为中划线-分隔，不使用小驼峰。