如何使用 Express JS 提供 React JS 静态文件?

在使用 Express JS 来构建 Web 应用程序时，通常需要提供一些静态资源，例如 CSS 样式、图片或 JavaScript 文件。如果您正在使用 React JS 开发前端应用程序，则还需要托管您的 React 应用程序的静态文件。在本文中，我们将介绍如何使用 Express JS 提供 React JS 静态文件。

步骤一：安装 React JS 库

首先要安装 React JS 库。可以通过运行以下命令进行安装：

npm install react react-dom

步骤二：设置 React JS 静态文件路径

创建一个名为 public 的文件夹，将您的 React 应用程序中生成的静态文件放入其中。文件名可能包括 index.html、main.js、main.css 等。

在您的 Express JS 应用程序中，使用以下代码读取静态文件路径：

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

这将设置 Express JS 应用程序中的静态文件路径。

步骤三：创建路由

接下来，在您的 Express JS 应用程序中创建路由。在这个例子中，我们将使用 / 作为访问 React 应用程序的根路径。

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

步骤四：运行应用程序

现在，您已经完成了应用程序的全部设置，可以使用以下命令运行应用程序：

node app.js

它将启动应用程序并运行在您的本地计算机的 http://localhost:3000 端口上。当您在浏览器中打开该 URL 时，将会显示您的 React 应用程序。

结论

在本文中，我们已经学习了如何使用 Express JS 提供 React JS 静态文件。这是一个简单而有效的方法，可帮助您将 React 应用程序构建到 Express JS 应用程序中。从这里开始，您可以扩展应用程序以提供更多静态文件并构建更高级的应用程序。