vsc如何运行react项目

安装必要工具

确保已安装Node.js（包含npm或yarn）。React项目依赖Node.js环境运行，建议安装LTS版本。可通过命令检查是否安装成功：

node -v
npm -v

创建React项目

使用Create React App快速初始化项目。在终端执行以下命令：

npx create-react-app my-app

my-app为项目名称，可根据需要修改。该命令会自动安装React及相关依赖。

打开项目

在VSCode中通过菜单栏选择File > Open Folder，或直接拖拽项目文件夹到VSCode界面。确保项目根目录包含package.json文件。

安装VSCode扩展（可选）

推荐安装以下扩展提升开发效率：

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

启动开发服务器

在VSCode终端中进入项目目录并运行：

cd my-app
npm 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}"
    }
  ]
}

按F5即可启动调试模式。

构建生产版本

需要部署时运行：

npm run build

生成的文件位于build目录，可直接部署到服务器。