一、项目构建安装脚手架

1. npm install -g create-react-app

2.  创建项目

   创建一个新文件夹my-react-app，并在该文件夹下使用终端创建项目my-react-app

3. create-react-app my-react-app --template typescript

4. 
   
   react项目默认隐藏了webpack相关配置，执行

5. npm run eject

6.  浏览器中可以看到

7. 

8. 配置路径别名

   这里我们使用craco来配置路径别名，安装craco：

9. npm i @craco/craco

10. 修改package.json中的启动脚本：

11. "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
      },

12. 在项目的根目录中创建craco.config.js，并配置路径别名：

13. const path = require('path')
     
    module.exports = {
      webpack: {
        alias: {
          '@': path.resolve(__dirname, 'src/'),
        },
      },
    }

14. 并在tsconfig.json中增加配置：

15. {
      "compilerOptions": {
        "path": {
          "@/*": ["./src/*"],
        },
      }
    }