webstorm如何运行react
运行 React 项目的方法
确保项目已初始化
在 WebStorm 中打开已创建的 React 项目（通过 create-react-app 或类似工具生成）。若未初始化，需在终端运行 npx create-react-app 项目名 生成新项目。
安装依赖
在 WebStorm 的终端（Terminal）中执行 npm install 或 yarn install，确保所有依赖包已安装。
配置运行脚本
打开 package.json 文件，确认 scripts 部分包含以下命令（通常由 create-react-app 自动生成）：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}启动开发服务器
通过终端运行
在 WebStorm 终端输入 npm start 或 yarn start，WebStorm 会自动启动开发服务器，并在默认浏览器中打开 http://localhost:3000。
通过运行配置启动
点击 WebStorm 顶部菜单栏的 Run > Edit Configurations，添加一个 npm 类型的配置。在 Command 字段选择 start，保存后点击运行按钮即可。
调试 React 应用
使用 Chrome 调试
确保项目已运行，在 Chrome 中安装 React Developer Tools 扩展。通过 WebStorm 的 Debug 模式启动项目，断点可直接在代码中设置。
WebStorm 内置调试
在 Edit Configurations 中添加 JavaScript Debug 配置，填写 URL 为 http://localhost:3000。启动调试后，断点会生效。
构建与部署
生成生产环境代码
运行 npm run build 或 yarn build，生成优化后的代码到 build 文件夹。WebStorm 会自动识别此文件夹并显示其内容。
部署到服务器
将 build 文件夹内的文件上传至静态服务器（如 Nginx、Apache）或托管服务（如 Vercel、Netlify）。WebStorm 支持通过 FTP 工具直接上传。
