vscode如何编译运行react

安装必要工具

确保Node.js已安装，React项目需要Node.js环境。可以通过命令行检查版本：

node -v
npm -v

创建React项目

使用Create React App快速初始化项目：

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

启动开发服务器

在VSCode中打开项目文件夹，通过终端运行：

npm start

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

编译生产版本

生成优化后的代码：

npm run build

编译后的文件会保存在build文件夹中。

调试配置

在VSCode中配置调试环境：

1. 点击左侧调试图标
2. 创建launch.json文件
3. 添加Chrome调试配置：

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

安装扩展推荐

提升开发效率的VSCode扩展：

• ES7+ React/Redux/React-Native snippets
• Prettier - Code formatter
• ESLint

实时错误检查

Create React App默认集成ESLint，错误会直接显示在编辑器和浏览器控制台。如需自定义规则，可创建.eslintrc.js文件。

热重载功能

修改代码后保存文件，浏览器会自动刷新。如需保持组件状态，可在项目中使用React Fast Refresh配置。