如何用vscode 启动react项目

安装必要工具

确保已安装Node.js（包含npm或yarn），可在终端运行node -v和npm -v检查版本。未安装需从Node.js官网下载。

创建React项目

打开VSCode终端（快捷键Ctrl+`或菜单栏Terminal > New Terminal），执行以下命令创建项目：

npx create-react-app my-app

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

cd my-app

启动开发服务器

在项目根目录下运行：

npm start

或使用yarn：

yarn start

默认自动打开浏览器访问http://localhost:3000。若未自动打开，手动输入该地址即可。

配置VSCode扩展（可选）

安装以下扩展提升开发体验：

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

调试配置

在VSCode侧边栏点击“运行和调试”（或按Ctrl+Shift+D），创建launch.json文件，添加以下配置：

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

保存后即可通过调试面板启动Chrome调试。

项目结构说明

主要文件及目录：

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

修改代码后保存，开发服务器会自动热更新页面。