mfyx_web

弘则研究买方研选平台前端 v1.0

该项目致力于构建一个数据分析、研究输出、逻辑沉淀、知识管理的投研平台。项目前端基于 React17 构建，UI 组件库使用 Antd

编码规范

参考 .eslintrc.js 及 .prettierrc.js 中的预设

[
   'react-app', // default from cra
    'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
    'plugin:react-hooks/recommended', // Uses the recommended rules from react-hooks
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ]

组件

• 一律使用函数组件，禁止使用类组件

• 一律使用 hooks

• 原则上一个文件只写一个组件

• 组件 props 必须以 Interface 的形式显式声明

代码风格

• 两格缩进

• 不使用分号

• 一律使用箭头函数而非函数表达式

其他请参考

• TypeScript Handbook（中文版）
• Airbnb React/JSX Style Guide

参考文档

项目规范

• 版本管理系统基于Git工作流模式GitHub flow
• 项目包括
  • 两个长期分支（basic branch） - master：主分支，用于线上生产环境 - debug：开发分支，包括新开发及不稳定特性 长期分支仅项目负责人可操作
  • 若干功能分支（feature branch） - author_feature：成员 author 处理 feature 的分支 - zk_route：成员 zk 处理路由系统的分支 - ... 功能分支以 author_feature 的规则命名，项目成员可操作

工作流为

1. 团队讨论并提出 feature/bug，项目负责人在 mfyx 项目中建立 issue，并标记相应标签
2. 团队基于项目进度和优先级考虑确定工作内容，项目负责人将To Do版相应 issue 手动移至In Process版中，并 assign 对应成员推进
3. 相应成员在 develop 分支检出新分支 author_feature，并在此分支进行开发工作
4. 成员开发时需编写对应测试代码，遵循代码规范（如在开发过程中 develop 分支更新，并且更新存在对此特性的影响，建议拉取 develop 后 merge 同步）
5. 成员完成功能后，在准备提交 Pull Request 前，保证代码通过测试并通过 lint 检查
6. 成员提交 Pull Request 并链接对应 issue（此时In Process版中的 issue 将会自动迁移到Review In Process）
7. 项目负责人review 此 Pull Request， 经过 review-suggestion-change-commit-push-review-...的流程后，项目负责人merge PR 或者关闭 PR（此时Review In Process版中 issue 将会自动迁移到Done，并关闭 issue）
8. 成员删除本地及远程 author_feature 分支

Available Scripts

首先添加 .env.development 文件，并设置API_BASEURL属性，用于实例化axios instance，后端地址暂为http://192.168.200.166:2999/api/

In the project directory, you can run:

npm start

Runs the app in the development mode.\ Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.\ You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.\ See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.\ It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\ Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.