当前位置：首页 > news >正文

React创建项目实用教程

news 来源：原创 2025/4/29 4:09:17

✍请将整篇文章阅读完再开始使用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          # 项目说明文档