React Typescript Admin 开发说明文档

该项目由 Create React App 提供技术支持

🔨 运行环境

• node >= 8.9.0
• typescript >= 3.0
• yarn >= 1.14.0 or npm >= 6.7.0
• git >= 2.10.1

🔧 开发环境

• VS Code
• Chrome
• React Developer Tools
• Redux DevTools
• Node
• Typescript
• Mac命令行工具

✨ VSCode插件推荐

• GitLens
• Auto Close Tag
• Auto Rename Tag
• ES7 React/Redux/GraphQL/React-Native snippets
• TSLint
• Path Autocomplete
• Bracket Pair Colorizer
• TODO Highlight
• Code Spell Checker

👣 可运行的命令

在该项目目录下, 你可以运行以下命令:

yarn start or npm start

以开发模式运行该项目 然后打开Chrome浏览器访问http://localhost:3000.

yarn mock or npm run mock

运行mock模拟数据服务, 启动后可以用Chrome浏览器访问http://localhost:3031 查看模拟数据服务是否启动 相关详情请阅读json-server, faker

yarn test or npm test

以监控模式运行Jest测试用例，编写测试的时候可以用此命令 相关详情请阅读running tests

yarn jest or npm jest

以普通模式运行Jest测试用例

yarn build or npm run build

构建生产资源到 build 目录, 此时环境变量为production 相关详情请阅读 deployment

yarn check or npm run check

TSLint 语法检查，检查Typescript文件是否符合 tslint.json 配置规范 相关详情请阅读 TSLint Rules

yarn tslint or npm run tslint

自动修复不符合tslint.json规范的代码，遇到git commit提交报tslint错误时，可以运行此命令修复

🏯项目架构说明

项目目录结构

.
├── mock/                         # 模拟数据服务
│   ├── db.js                     # 模拟数据DB
│   └── routes.json               # 模拟数据API路由配置
│   └── ...
├── public/                       # 静态资源文件（包括css, images, fonts, index.html等）
│   └── ...
├── src/
│   ├── components/               # 公用React组件
│   │   └── ...
│   ├── models/                   # Dva数据Store层
│   │   └── ...
│   ├── pages/                    # 页面模块
│   │   └── ...
│   ├── routes/                   # App页面路由配置
│   │   └── ...
│   ├── services/                 # API请求服务
│   │   └── ...
│   ├── style/                    # 通用CSS样式
│   │   └── ...
│   ├── utils/                    # 通用工具模块
│   │   └── ...
│   ├── App.css                   # App 页面CSS样式
│   ├── App.tsx                   # App 全局页面
│   ├── App.test.tsx              # App 页面Jest测试用例
│   ├── ent.ts                    # App 环境变量配置
│   ├── index.css                 # 全局CSS样式
│   ├── index.tsx                 # React入口文件
│   ├── logo.svg                  # App logo
│   ├── Page.tsx                  # 全局页面路由
│   │
├── build/                        # 生成环境静态资源文件
├── .gitignore                    # Git ignore 配置（禁止随意篡改配置!!!）
├── .editorconfig                 # 编辑器配置（禁止随意篡改配置!!!）
├── config-overrides.js           # Webpack 默认配置覆盖操作
├── tsconfig.json                 # Typescript规则配置（禁止随意篡改规则）
├── tslint.json                   # tslint规则配置（禁止随意篡改规则）
└── package.json                  # 构建脚本和依赖配置（禁止随意篡改配置）
└── yarn.lock                     # Yarn文件

技术栈

React Create React App Typescript React Router Redux Dva Ant Design Jest ECharts faker.js React Hot Loader React Loadable Webpack Babel enzyme json-server

React Typescript编写规范

react-redux-typescript-guide

引入资源说明

1. 图片资源需放入public/images/下, 在组件和CSS中引入图片资源时, 需用create react app 环境变量 process.env.PUBLIC_URL 来引入, 避免大量的图片资源在TS中import

CSS样式说明

1. CSS样式推荐采用的方式来写，Create React App原生支持

   • 可以避免全局样式和局部样式的冲突
   • JS和CSS可以共享变量，支持局部作用域和全局作用域
   • 可以与Sass或Less灵活搭配使用

2. 编写CSS样式时需结构清晰, 避免嵌套过深, 特别是在写Sass或Less的时候, 尤其容易层级嵌套过深，层级最好不大于4级, 尽量使用AntDesign原生的布局组件和样式. 样式需适当的空行, 例如:

    .exampleWrapper {
        background-color: #f2f2f2;
   
        .exampleChild1 {
            color: #666666;
        }
   
        .exampleChild2 {
            font-size: 16px;
        }
    }

3. 每一个组件或页面需要有独立的CSS文件, 常用页面或组件样式可以写成全局的CSS样式模块, 对于样式相对较少的组件或页面, 可以以JS对象的形式编写在组件内

4. CSS的类名和ID命名需语义清晰, 避免含糊不清的命名, 类名的英文单词和简写需符合常用英文语法习惯, 禁止自造英文单词和不那么规范的简写形式

5. 禁止在css中使用*选择器和!important

   • *选择器因为需要遍历页面的所有元素，所以编译的时候会非常消耗时间
   • !important会覆盖所以样式, 破坏CSS样式的权重关系, 导致样式难以维护

更多CSS规范请求阅读 CSS编码规范

CSS相关学习资源

CSS Modules 详解及 React 中实践 Sass中文文档

🌿Git分支管理说明

git-flow 是目前流传最广的 Git 分支管理实践。git-flow 围绕的核心概念是版本发布（release)
git-flow 流程中包含 5 类分支，分别是 master、develop、新功能分支（feature）、发布分支（release）和 hotfix

相关分支说明

分支类型	命名规范	创建自	合并到	说明
feature	feature/*	develop	develop	新功能
release	release/*	develop	develop 和 master	新版本发布
hotfix	hotfix/*	master 或 release	release 和 master	production 或 release 中bug修复

1. master 是部署到生产环境中的代码, 一般不允许随意合并其他分支到此分支上
2. develop为开发分支, 是一个进行代码集成的分支, 该分支会及时合并最新代码, 新需求的开发都从此分支上创建
3. feature/my-awesome-feature 为新功能分支, 开发新需求时, 需从develop分支创建
4. hotfix/fix-bug 为热修复bug分支, 主要是针对release或master分支测试出现的bug进行修复
5. release/0.0.1分支为部署到持续集成服务器上进行测试的分支, 是一个相对稳定的可供测试的分支

feature分支创建流程

1. 从 develop分支创建一个新的feature分支, 如feature/my-awesome-feature
2. 在该feature分支上进行开发相关需求，完成后提交代码并 push 到远端仓库
3. 当代码完成之后，提pull request, 代码审核通过后合并到develop分支, 之后可删除当前feature分支

hotfix分支创建流程

1. 从develop分支创建一个新的release分支，如 release/0.0.1
2. 把release分支部署到持续集成服务器上, 并交给相关测试人员进行测试
3. 对于测试中发现的问题，直接在release分支上创建hotfix/fix-bug分支, 进行相关的bug修复
4. 合并hotfix/fix-bug分支到release分支, 再次部署并交给测试人员进行测试

代码提交说明

Commit message 和 Change log 编写指南

Jest测试

Jest 测试框架官方网站Jest

🔭 学习更多

想获取更多信息，可以访问Create React App documentation.

想学习更多React内容，可访问React官方网站 React documentation.