react 脚手架

create-react-app(v5.0.1)

临时安装 create-react-app(node > 14)，通过 create-react-app 创建一个纯前端 react 项目

npx create-react-app app_01

完成后 package.json 内容

{
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
}

默认会安装 webpack 相关依赖，但不是显式在 package.json 中声明。若想查看，可以在 package-lock.json 中找到 webpack 的依赖信息。

启动项目后报错

react-refresh-runtime.development.js:488 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at Object.injectIntoGlobalHook (react-refresh-runtime.development.js:488:1)
    at ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js (ReactRefreshEntry.js:17:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at startup:4:1
    at startup:7:1

原因: chrome 插件 react devtools 版本 v3 太低，和 react@18 配套的 devtools 至少 v4
解决方案：

• 下载 react 仓库，仓库中有 react-devtools-extensions 包，手动构建，将构建结果加载进 chrome extensions 扩展程序中
• 下载现成的 crx:https://www.crx4chrome.com/crx/3068/