如何指定一个端口来运行基于 create-react-app 的项目？

当我们使用npx create-react-app命令创建一个新的 react 应用程序时，该应用程序的默认端口是 3000。我们可以从localhost:3000访问该应用程序。

在某些情况下，用户需要在他们的计算机上同时运行 2 个或多个 React 应用程序，但不能在同一端口上运行 2 个 React 应用程序。因此，用户需要更改其中一个 react 应用程序的默认端口。

创建反应应用程序：

• 第 1 步：创建一个新的反应应用程序，将以下命令运行到您的终端。

npx create-react-app testapp

• 第2步：通过在终端运行以下命令移动到项目目录。

cd testapp

项目结构：它看起来像这样。

实现：有几种方法可以更改 React 应用程序的默认端口。在本教程中，我们将一一介绍每种方法。

注意：以下是根文件即 App.js 的代码所有方法的通用方法，输出也在下面给出。

示例：在 App.js 文件中，我们将添加一些基本的 HTML 代码以在网页上呈现。

App.js

import React, { Component } from "react";
  
class App extends Component {
  render() {
    return (
      

        
GeeksForGeeks
        
Server is currently running on port 5000
      
    );
  }
}
  
export default App;

输出：

方法一：创建环境变量

这是更改 React 应用程序默认端口的最简单方法。我们需要在项目目录中创建.env文件并添加环境变量。用户需要在.env文件中添加以下代码。

PORT= 

例子：

PORT=5000

现在，使用npm start命令运行项目，react app 将自动开始在您选择的端口上运行。

方法二：编辑 package.json 文件

在这种方法中，我们必须在 package.json 文件中编辑一行代码。在这里，用户会在“ scripts ”对象中找到类似“start”的代码：“react-scripts start” 。在下图中，您可以看到“脚本”对象的默认视图。

用户需要编辑“脚本”对象的第一行，他们必须在其中添加以下代码。

"start": "set PORT= && react-scripts start"

例子：

"start": "set PORT=5000 && react-scripts start"

编辑 package.json 文件后，您的“脚本”对象应如下图所示。

方法三：安装并添加cross-env包

首先，我们需要在项目目录下安装“ cross-env”包。因此，打开终端并在项目目录中运行以下命令。

yarn add -D cross-env

安装 cross-env 包后，用户需要编辑package.json文件中“scripts”对象的第一行。用户需要通过删除“脚本”对象中的第一行来更改以下代码。

"start": "cross-env PORT= react-scripts start"

例子：

"start": "cross-env PORT=5000 react-scripts start"

在代码中进行更改后，您的“脚本”对象应如下图所示。

方法四：使用run命令指定端口

在这种方法中，我们不需要在 react 应用程序中编辑任何文件。我们只需要在 react 项目的运行命令中提到端口。用户必须使用以下命令而不是npm start 来运行项目。

PORT= npm start

例子：

PORT=5000 npm start

当用户使用上述命令运行 react 项目时，它将在用户选择的端口上启动。