使用

使用 npm 安装 Yeoman 以及 generator-react-cmri 。
( 我们假定您已安装 node.js )

npm install -g yo generator-react-cmri  // 下载依赖
yo react-cmri                           // 构建项目

优势

• 快速启动项目。两行命令即可生成一个可直接开发业务的框架。
• 风格指南已定义。包括代码规范、变量风格、目录结构等。

限制

• 仅支持 React 生态圈。

规划

• 本框架将根据当前正在运行的项目迭代优化。
• 当前不支持 Typescript。如开发同学对 Typescript 掌握不佳，只会增加一些开发成本，无法起到提升代码可读性、可维护性的作用。随 Typescript 普及，后续考虑切换为 Typescript。
• 考虑后续丰富自定义组件以补充 Antd 组件库。同时会关注MATERIAL-UI组件库。
• 会补充一些常用技术点的使用 demo， 比如: Mobx（已有，参考后文）。
• 考虑美化一下首页

文档

项目技术栈

基于 React + React-router + Mobx + Antd + LESS + ECMAScript + Axios + Webpack

参考文档

React 中文

React-router 路由

Mobx 状态管理

Antd UI 框架

目录结构

.
├── config                              // webpack配置
├── public                              // 项目公开目录
├── scripts
├── src                                 // src开发目录
│   ├── app
│   │   ├── modules                     // 子模块目录(目录结构递归)
│   │   │   ├── modules-a
│   │   │   │   ├── modules
│   │   │   │   ├── components
│   │   │   │   ├── routers
│   │   │   │   ├── stores
│   │   │   │   ├── modules-a.jsx       // 不建议使用"index.jsx", 在编辑器中不易区分文件
│   │   │   │   └── modules-a.less
│   │   │   ├── modules-b
│   │   │   └── modules-c
│   │   ├── components                  // 组件
│   │   ├── routers                     // 路由
│   │   ├── stores                      // mobx store
│   │   ├── app.jsx                     // 入口首页
│   │   └── app.less
│   ├── common                          // 公共文件夹
│   │   ├── assets                      // 公共静态资源
│   │   ├── components                  // 公共组件
│   │   ├── components                  // 公共常量
│   │   ├── services                    // 公共接口请求、服务等
│   │   ├── stores                      // 公共mobx store
│   │   ├── styles                      // 公共样式
│   │   └── utils                       // 工具库/通用函数
│   ├── index.js                        // 项目入口文件
│   ├── index.less
│   └── setup-proxy.js                  // 开发环境代理配置文件
├── .editorconfig                       // 项目格式配置
├── .eslintignore                       // ESLint 忽略配置
├── .gitignore                          // git 忽略配置
├── jsconfig.json                       // js配置
├── package-lock.json
├── package.json                        // 依赖包配置
└── README.md                           // 项目说明

启动项目

1. 下载项目依赖npm install
2. 修改代理文件 src/setup-proxy.js，更改 target 为自己的虚拟机地址
3. 执行npm start启动项目，在浏览器中打开http://localhost:3000 即可

测试

执行npm test启动测试 详见running tests

tips

• import 尽量使用绝对路径，即

  import xxx from '@src/**/*.*'
  import '@src/**/*.less'

• vscode 使用以下插件实现保存时格式化代码

  1. editorconfig
  2. prettier
  3. settings>"editor.formatOnSave": true

• 变量风格

  1. 肉串风格（kebab-case）: 文件夹名、文件名、样式类名、className、url 路由地址
  2. 大驼峰（UpperCamelCase）: 组件、类
  3. 小驼峰（camelCase）: 方法名

Mobx 使用（以 class 组件为例）

• 启用装饰器 方式

  1. 安装npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators，并配置.bebelrc文件

  {
      "plugins": [
          ["@babel/plugin-proposal-decorators", { "legacy": true }],
          ["@babel/plugin-proposal-class-properties", { "loose": false }]
      ]
  }

  2. 创建 observable, action 属性

  import { action, observable, makeAutoObservable } from 'mobx'
  
  class TodosStore {
      constructor() {
          makeAutoObservable(this); // mobx6.0以上必须加这个，不然store更新了，但是页面不重新渲染
      }
      @observable todos = [];
  
      @action createTodo = (todoObj) => {
          this.todos.unshift(todoObj);
      };
  }
  const todosStore = new TodosStore();
  export default todosStore;

  3. 创建 observer 组件

  import todosStore from '...';
  
  @observer
  class Todos extends React.Component {
      /* ... */
  }
  export default Todos

• 不启用装饰器 方式

  1. 创建 observable, action 属性

  import { makeAutoObservable } from 'mobx'
  
  class TodosStore {
      constructor() {
          makeAutoObservable(this); // mobx6.0以上必须加这个，不然store更新了，但是页面不重新渲染
      }
      todos = [];
  
      createTodo = (todoObj) => {
          this.todos.unshift(todoObj);
      };
  }
  const todosStore = new TodosStore();
  export default todosStore;

  2. 创建 observer 组件

  import todosStore from '...';
  
  const Todos = observer(class Todos extends React.Component {
      /* ... */
  })
  export default Todos

• mobx 包中的 observer 函数/装饰器用来将 react 组件转变为 observer 组件。 @observer class ComponentName {} 只是 const ComponentName = observer(class { }) 的语法糖