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

慕课网react jira学习笔记

源码

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

2.1 用create react app初始化项目

npm create-react-app react-jira --template typescript

2.2 eslint和commitlint规范工程

1. 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"
     ]
   }
   

2. 配置格式化工具prettier

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

1. npm install json-server -D
2. 根目录新建文件__json_server_mock__/db.json

   {
     "users": []
   }
   

3. package.json下配置scripts添加：

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

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

1. 在项目根目录添加配置文件.env, .env.development填写内容

   REACT_APP_BASE_URL=http://localhost:3001
   

2. 代码中读取const baseUrl = process.env.REACT_APP_BASE_URL，npm start时读取.env.development内的变量，npm run build读取.env内变量

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