React 项目的启动方式

一、启动前先确认 3 件事（很重要）

在项目根目录（有 package.json 的地方）：

1. 确认 Node 版本

node-v npm-v

一般建议

Node ≥ 18（Vite / 现代 React 很稳）

如果报错，大概率是 Node 太老

2. 安装依赖（只做一次）

npm install

或如果项目用的是：

yarn

或

pnpm install

== 一定要先装依赖，否则 99% 会启动失败==

3. 看一眼 package.json

重点看这一段：

"scripts":{"dev":"...","start":"...","build":"..."}

启动命令就是从这里来的。

二、不同 React 项目的启动方式（按你项目来）

情况 1：React + Vite

最常见

npm run dev

启动后终端会显示类似：

Local:http://localhost:5173/

浏览器打开即可。

情况 2：Create React App（CRA）

npm start

默认地址：

http://localhost:3000

情况 3：Next.js（如果你见过 pages / app 目录）

npm run dev

默认：

http://localhost:3000

三、最常见启动失败原因（你可以直接对号入座）

1. react-scripts: command not found

没装依赖

npm install

2. 端口被占用

Port 3000 is already in use

解决方法：

回车选择 Y 换端口

或关掉占用端口的程序

3. Node 版本不兼容

常见报错：

error:digital envelope routines::unsupported

解决：

node-v

如果 < 16 / 18，升级

4. 用错命令（最常见新手坑）

四、秒判断项目类型的方法

在项目根目录看有没有这些文件：