vscode如何运行react

运行 React 项目的基本步骤

确保已安装 Node.js（建议版本 16+）和 VS Code。通过以下命令检查 Node.js 和 npm 是否安装成功：

node -v
npm -v

在 VS Code 终端中，使用 Create React App 快速初始化项目：

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

启动开发服务器

进入项目目录后，运行以下命令启动开发服务器：

npm start

默认情况下，浏览器会自动打开 http://localhost:3000 并显示 React 应用。

常用开发插件推荐

安装以下 VS Code 插件提升开发效率：

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

项目结构说明

典型的 React 项目结构包含：

• src/：主要源代码目录
• public/：静态资源文件
• package.json：项目配置和依赖管理

调试配置

在 VS Code 中配置调试：

1. 打开调试面板（Ctrl+Shift+D）
2. 创建 launch.json 文件
3. 添加以下配置：

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

构建生产版本

准备部署时运行构建命令：

npm run build

这会生成优化后的静态文件到 build/ 目录。