vscode如何运行react

在VSCode中运行React项目

确保已安装Node.js和npm/yarn。若未安装，需先下载并配置环境变量。

创建React项目

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

npx create-react-app my-app

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

cd my-app

启动开发服务器

在项目目录下运行以下命令启动开发服务器：

npm start

或使用yarn：

yarn start

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

安装必要扩展

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

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

配置调试环境

在VSCode侧边栏点击调试图标，选择"Create a launch.json file"，选择"Chrome"环境。生成的配置如下：

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

保存后即可通过F5启动调试。

项目结构说明

主要文件目录结构：

• src/：存放源代码
  • App.js：主组件文件
  • index.js：入口文件
• public/：静态资源
• package.json：项目依赖配置

常见问题解决

若遇到端口冲突，修改启动命令：

PORT=3001 npm start

如需HTTPS运行，设置环境变量：

HTTPS=true npm start