【项目笔记】React17+React Hook+TS4 最佳实践 仿 Jira 企业级项目（一）项目创建和配置

参考的项目网址：React + React Hook + TS 最佳实践-慕课网

目录

1.创建项目

2.eslint、prettier和commitlint配置

3.数据mock方案：

---

1.创建项目

npx create-react-app jira --template typescript
cd jira
yarn start

-生成的项目结构如图：

-src文件夹参与打包，入口文件为index.tsx，源代码里面用到的资源都要放到src文件夹里面

-public文件夹一般用得不多，里面有一个robots.txt来限制网站的搜索访问

-用npm start启动项目可以看到初始化React App的网站

2.eslint、prettier和commitlint配置

-路径配置：在tsconfig.json里面添加配置：

        在"compilerOptions"里面添加"baseUrl": "./src"，可以省略 src/ 之前的路径，直接从 src 目录开始引用

-格式配置：Prettier配置

       根据 Install · Prettier 的前三步操作。这里可以使用npx prettier . --write的命令来手动format，也可以Pre-commit Hook · Prettier里面的precommit hook来自动format（在代码每次提交之前自动进行格式化）

-Git提交名的格式配置：commitlint

        根据GitHub - conventional-changelog/commitlint: 📓 Lint commit messages 里面的指令操作

3.数据mock方案：

因为一般都是前后端并行开发，所以前端前期没有后端接口可用，需要Mock数据。

方案一：写到代码里面（与真实server的环境切换很麻烦）

方案二：请求拦截（如Mock.js，其实是重新写http request里面的数据，可以生成重新数据，但是数据都是动态生成的假数据，无法模拟真实增删改查，只支持ajax不支持fetch）

方案三：接口管理工具（如swagger，接口管理与Mock一体，依赖后端配置，配置复杂）

方案四：本地node服务器（如json-server，启动REST API server的配置简单，自定义度高，真实度高，但是与接口管理工具相比无法随着后端api的修改而自动修改）（这里采用这种方案）

什么是REST API？是API的一种设计风格

JSON Server配置：

参考网址GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)
-创建__json_server_mock__文件夹：这种命名方式主要意思是，这个文件夹中的内容和代码没什么关系

-在里面创建db.json

-在package.json的“scripts”里面添加配置：

"json-server": "json-server __json_server_mock__/db.json -watch"