转载请注明出处: http://qiudeqing.com/react/2021/09/29/react-jira.html

第二章项目起航：项目初始化与配置

2.1 用create react app初始化项目

npx create-react-app react-jira --template typescript

2.2 eslint和commitlint规范工程

tsconfig.json配置baseUrl

{
  "compilerOptions": {
 "baseUrl": "./src",
 "target": "es5",
 "lib": [
   "dom",
   "dom.iterable",
   "esnext"
 ],
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "strict": true,
 "forceConsistentCasingInFileNames": true,
 "noFallthroughCasesInSwitch": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "noEmit": true,
 "jsx": "react-jsx"
  },
  "include": [
 "src"
  ]
}

配置格式化工具prettier

2.3 对比常见Mock方案，配置JSON SERVER

npm install json-server -D

根目录新建文件__json_server_mock__/db.json

{
  "users": [
 {
   "id": 1,
   "name": "高修文"
 },
 {
   "id": 2,
   "name": "熊天成"
 },
 {
   "id": 3,
   "name": "郑华"
 },
 {
   "id": 4,
   "name": "王文静"
 }
  ],
  "projects": [
 {
   "id": 1,
   "name": "骑手管理",
   "personId": 1,
   "organization": "外卖组",
   "created": 1604989757139
 },
 {
   "id": 2,
   "name": "团购 APP",
   "personId": 2,
   "organization": "团购组",
   "created": 1604989757139
 },
 {
   "id": 3,
   "name": "物料管理系统",
   "personId": 2,
   "organization": "物料组",
   "created": 1546300800000
 },
 {
   "id": 4,
   "name": "总部管理系统",
   "personId": 3,
   "organization": "总部",
   "created": 1604980000011
 },
 {
   "id": 5,
   "name": "送餐路线规划系统",
   "personId": 4,
   "organization": "外卖组",
   "created": 1546900800000
 }
  ]
}

package.json下配置scripts添加：

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

2.4 不手动引入React

https://coding.imooc.com/lesson/482.html#mid=41564

编译工具plugin-transform-react-jsx 从v7.9.0开始不用手动引入React默认关闭，create-react-app 4.0开始默认开启，所以不用引入React也可以。

3.2 组件状态提升

配置不同运行环境的变量如`baseUrl`

在项目根目录添加配置文件.env, .env.development填写内容
```
REACT_APP_BASE_URL=http://localhost:3001
```
代码中读取const baseUrl = process.env.REACT_APP_BASE_URL，npm start时读取.env.development内的变量，npm run build读取.env内变量

注意：在create-react-app中使用时，变量名需以REACT_APP_开头

第二章 项目起航：项目初始化与配置