当前位置：首页 > React

react run如何搭配

2026-02-11 19:19:31React

运行React项目的常见方法

使用create-react-app脚手架创建的项目通常通过以下命令运行开发服务器：

npm start

或

yarn start

自定义配置运行方式

修改package.json中的scripts字段可添加自定义命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

环境变量配置

创建.env文件定义环境变量：

REACT_APP_API_URL=https://api.example.com
PORT=3001

生产环境构建

生成优化后的生产版本：

npm run build

构建后会生成build目录，可直接部署到静态服务器。

使用自定义服务器

结合Express等Node框架运行：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

调试配置

在Chrome开发者工具中使用React Developer Tools扩展，或在VS Code中配置launch.json：

react run如何搭配

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