vscode如何运行react程序

安装必要工具

确保Node.js已安装，可通过终端输入node -v和npm -v验证版本。React项目依赖Node.js环境。

全局安装create-react-app脚手架工具（若未安装）：

npm install -g create-react-app

创建React项目

在VSCode终端中，通过以下命令初始化新项目：

npx create-react-app my-app

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

cd my-app

启动开发服务器

在项目根目录下运行：

npm start

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

调试配置

在VSCode中安装官方扩展"Debugger for Chrome"。创建调试配置文件（.vscode/launch.json）：

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

按F5即可启动调试模式。

项目结构说明

关键文件目录：

• src/App.js: 主组件入口
• src/index.js: React渲染入口
• public/index.html: HTML模板
• package.json: 依赖和脚本配置

扩展推荐

安装VSCode插件提升开发效率：

• ES7+ React/Redux Snippets（代码片段）
• Prettier（代码格式化）
• ESLint（代码检查）