在webstorm上如何运行react
安装 Node.js 和 npm
确保已安装 Node.js（包含 npm）。可在终端运行 node -v 和 npm -v 检查版本。若未安装，需从 Node.js 官网 下载并安装。
创建 React 项目
使用 create-react-app 脚手架生成项目。在终端执行：
npx create-react-app my-react-appmy-react-app 为项目名称，可自定义。完成后进入项目目录：
cd my-react-app在 WebStorm 中打开项目
启动 WebStorm，选择 File > Open，导航至项目文件夹（如 my-react-app），点击 OK 打开。
配置运行脚本
打开项目后，WebStorm 会自动识别 package.json 中的脚本。在底部工具栏找到 Terminal，运行开发服务器：
npm start或通过 WebStorm 界面操作：
- 点击右上角运行配置下拉菜单。
- 选择 npm start（若未显示，需手动添加 npm 配置）。
- 点击绿色运行按钮。
调试 React 应用
WebStorm 支持调试 React 代码：
- 在代码中设置断点。
- 右键点击
package.json中的start脚本，选择 Debug。 - 浏览器打开
http://localhost:3000，触发断点逻辑。
构建生产版本
在终端运行以下命令生成优化后的代码：
npm run build输出文件位于 build 文件夹，可直接部署。
注意事项
- 确保 WebStorm 已安装 Node.js 插件（默认通常包含）。
- 若端口冲突，修改
package.json中start脚本为set PORT=3001 && react-scripts start（Windows）或PORT=3001 react-scripts start（Mac/Linux）。 - 使用 WebStorm 的 File Watchers 功能可自动处理代码格式化（如 Prettier）。
