渲染與開發中的 node.js 反應

Question

我是 node.js 的（非常）新手，我正在嘗試從 React 開始開發環境。

const express = require('express')
const mongoose = require('mongoose')
const app = express()

// this displays the index.html file
app.use(express.static(__dirname + '/public'));
// trying to see the app.js
app.get('/',  (req, res) => {
 
  res.render('app')
})



app.listen(process.env.PORT || 5000);

現在，我只是想在運行 nodemon 時查看我的 app.js。 但現在它只顯示public文件夾中的 index.html 文件。 當我運行npm start ，它會同時呈現 index.html 和 app.js。
我 100% 做錯了什么，我不在我這里。 任何幫助/建議將不勝感激。
我的完整回購在這里供查看 提前謝謝你。

Answer 1

如果你想將你的react js項目連接到node js

開發中

您只需運行他們的服務器並啟動它

生產中

您可以使用來自express.js的sendFile function 來運行frontend

https://dev.to/loujaybee/using-create-react-app-with-express

Answer 2

每次用戶向根發出 GET 請求（在您的情況下為localhost:5000 ）時，您的代碼只是為位於public目錄中的 static HTML 文件提供服務。 它還沒有與 React 交互。

通常在使用 React（前端）和 Node（后端）啟動項目時，您會將它們創建為單獨的項目，在單獨的存儲庫中。 因此，您可以使用引導程序創建一個 React 應用程序，例如在 PORT 3000 上運行的 create-react-app 並在另一個終端選項卡中，像在您的示例中一樣在 PORT 5000 中啟動您的 NodeJS 應用程序。 然后，您可以從前端 React 應用程序調用后端端點，通過引用http://localhost:5000通過這樣做，您的后端代碼不再需要提供 static 文件，它可以返回諸如 Z0ECD4D1F814 之類的數據並建立連接 7BBD78以數據庫為例。

由於您的問題不夠具體，您可能正在談論服務器端渲染。 在使用 Node 和 React 的服務器端渲染應用程序中，您有一個使用 React 構建的前端和一個 Node 服務器，它將返回相同的 React 代碼作為字符串，使用react-dom/server package 來提供幫助。 這更復雜，但基本上你將在客戶端和服務器上擁有相同的 React 代碼。 有性能優勢，因為用戶可以在進入頁面時看到一些正確呈現的內容，而無需等待 React 包（javascript 文件）加載。 如果您想了解有關使用 React 和 Node 創建服務器端渲染應用程序的更多信息， 這里有一個不錯的數字海洋教程