vscode如何编译运行react

安装必要工具

确保已安装 Node.js（包含 npm 或 yarn），可通过命令行输入 node -v 和 npm -v 检查版本。未安装需从 Node.js 官网 下载。

创建 React 项目

使用 Create React App 快速初始化项目，在终端运行：

npx create-react-app my-react-app

my-react-app 为项目名称，可自定义。完成后进入项目目录：

cd my-react-app

启动开发服务器

在项目根目录执行以下命令启动开发服务器：

npm start

默认自动打开浏览器访问 http://localhost:3000，代码修改后会实时热更新。

安装 VS Code 插件

推荐安装以下插件提升开发体验：

• ES7+ React/Redux/React-Native snippets：提供 React 代码片段快捷输入
• Prettier - Code formatter：代码自动格式化
• ESLint：代码质量检查

调试配置

在项目根目录创建 .vscode/launch.json 文件，添加以下配置：

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

按 F5 可启动调试模式。

生产环境构建

需部署时运行构建命令生成优化后的代码：

npm run build

构建结果保存在 build 目录中，可直接部署到静态文件服务器。