vscode如何编译运行react

安装必要工具

确保已安装 Node.js（建议 LTS 版本）和 npm/yarn，React 项目依赖它们管理包和运行脚本。通过终端输入 node -v 和 npm -v 验证安装。

创建 React 项目

使用官方脚手架工具 Create React App 初始化项目：

npx create-react-app my-react-app
cd my-react-app

此命令会生成标准 React 项目结构，包含预配置的编译和运行脚本。

启动开发服务器

在 VSCode 中打开项目文件夹，通过终端运行：

npm start

开发服务器默认在 http://localhost:3000 启动，代码修改会自动热重载。

配置构建生产版本

需要部署时运行生产构建：

npm run build

生成的文件会保存在 build 目录中，可直接部署到静态服务器。

调试配置（可选）

在 VSCode 中调试 React 项目：

1. 安装扩展 "Debugger for Chrome" 或 "Debugger for Firefox"。
2. 创建 .vscode/launch.json 文件：

   {
   "version": "0.2.0",
   "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
   ]
   }

   按 F5 启动调试会话。