vscode如何运行react

安装必要工具

确保已安装Node.js（包含npm/yarn），这是运行React项目的基础。官网下载安装包并完成环境配置。

创建React项目

打开VSCode终端，使用以下命令创建新项目：

npx create-react-app my-app

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

cd my-app

安装VSCode插件

在扩展商店中搜索并安装以下插件：

• ESLint：代码质量检查
• Prettier：代码格式化
• Reactjs code snippets：React代码片段快捷输入

启动开发服务器

在项目根目录的终端中运行：

npm start

或使用yarn：

yarn start

默认会自动打开浏览器访问http://localhost:3000。

调试配置

在VSCode侧边栏点击“运行和调试”，创建launch.json文件，添加以下配置：

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

项目结构说明

关键目录和文件：

• src/App.js：主组件入口
• src/index.js：React渲染入口
• public/index.html：HTML模板文件

修改任意代码后，开发服务器会实时热更新页面。