react17_react17安装-CSDN博客

本文链接：https://blog.csdn.net/weixin_39786582/article/details/113916632

本文档介绍了如何使用create-react-app创建一个TypeScriptReact项目，并详细阐述了配置baseUrl以简化文件引用，以及如何设置代码规范如prettier和eslint。此外，还涉及了git提交规范、数据mock使用json-server以及URL参数处理。同时，提到了.env文件用于添加自定义变量，并讲解了如何处理prettier和eslint的冲突问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可将全局状态分为客户端全局状态和服务端全局状态。有api请求接口返回的全局数据则为服务端全局和状态。
使用create-react-app创建一个ts项目命令npx create-react-app projectName --template typescript
可在tsconfig.json中配置 baseUrl,具体文件可通过绝对路径来访问目标目录。避免../../的书写方式

  "compilerOptions": {
    "baseUrl": "./src",

项目代码规范格式化： prettier
安装：yarn add --dev --exact prettier
新建.prettierrc.json文件
echo {}> .prettierrc.json
新建 .prettierignore 文件来指明不要格式化的文件
使用pre-commit hook在代码提交之前格式化代码
安npx mrm lint-staged
解决prettier和eslint一起工作时的冲突：
安装eslint-config-prettier
并在eslint配置中添加 prettier
添加git commitlint规范。每次代码提交检验commit的规范程度
安装yarn add @commitlint/{config-conventional,cli}
运行命echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js 会多一个配置文件；里面初始化了一个要使用的提交规则

package.json中添加
在这里插入图片描述

在这里插入图片描述
查看某个提交规则的使用说明
https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional
7. 数据mock使用json-server
安装yarn add json-server -D
github
在项目中添加一个__json_server_mock__文件来存放mock文件。并在page.json中添加一个script命令
在这里插入图片描述
8. qs url请求传参处理
9. 在creat-react-app中添加自定义变量需要创建.env文件，自定义变量应该以REACT_APP_开头