React创建项目实用教程

✍请将整篇文章阅读完再开始使用create-react-app react-project创建项目

检查node版本

node -v // node版本：v22.10.0

使用nvm降版本修改到了node V20.11.1之后再进行一系列操作的

react脚手架安装：

npm install -g create-react-app // node版本：v22.10.0

使用create-react-app react-project创建项目， 报错@testing-library/dom要求react v18.0.0但我的为react v19.0.0版本。

在package.json配置如下：

"react": "^18.0.0", "react-dom": "^18.0.0",

执行指令 npm i ，重新node_module下载依赖 下载react-router-dom:

npm add react-router-dom

使用 npm run start 运行项目， 提示找不到not found web-vitals报错。 下载依赖web-vitals：

npm install web-vitals

再次 npm run start，项目成功运行起来

不知道为什么react项目第一次运行起来很慢

在原有cmd窗口不关闭的情况下，使用Ctrl+c，两次结束本次运行，再次npm run start，第二次速度明显提示

刚好放假了，过了几天，星期一再创建，使用create-react-app创建项目时，此时提示版本过低v5.0.1

然后就是卸载create-react-app(windows用法):

npm uninstall -g create-react-app

突然发现无法卸载，只好手动删除相关目录

安装最新版本脚手架create-react-app升级到v5.1.0：

npm install -g create-react-app@latest

再次创建项目create-react-app react-project02

使用npx创建：

npx create-react-app react-project03

npx 是 npm 5.2.0 及以上版本自带的一个工具，用于临时安装并运行 npm 包。 它的作用是： 不需要全局安装包（如 create-react-app），直接运行最新版本的包。 避免全局安装包的版本冲突问题。 简化开发流程。

react-project项目：*

react-project/ ├── node_modules/ # 项目依赖 ├── public/ # 静态资源（如 index.html） ├── src/ # 项目源代码 │ ├── App.js # 主组件 │ ├── index.js # 项目入口文件 │ └── ... ├── package.json # 项目配置和依赖信息 └── README.md # 项目说明文档