vscode如何运行react程序

安装必要工具

确保已安装 Node.js（建议 LTS 版本）和 npm/yarn。可通过以下命令验证安装：

node -v
npm -v

全局安装 Create React App 脚手架工具（如未安装）：

npm install -g create-react-app

创建 React 项目

在 VSCode 终端中执行以下命令创建新项目：

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

启动开发服务器

在项目根目录运行：

npm start

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

调试配置

在 VSCode 中按下 F5 或点击调试图标，选择 Chrome 调试环境。若首次使用需创建 launch.json 文件，配置如下：

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

常用插件推荐

1. ESLint：代码质量检查
2. Prettier：代码格式化
3. Reactjs code snippets：快速生成 React 代码片段
4. Debugger for Chrome：浏览器调试支持

项目结构说明

关键文件位置：

• 入口文件：src/index.js
• 根组件：src/App.js
• 样式文件：src/App.css
• 静态资源：public/ 目录