將 React 前端與 Node.js 後端結合是建立全端 Web 應用程式的常見且強大的設定。 Node.js 為伺服器端開發提供了強大的環境，使您能夠有效地處理 API、身份驗證和資料庫操作。在本指南中，我們將逐步為您的 React 應用程式設定 Node.js 後端。
先決條件
在開始之前，請確保您已安裝以下軟體：
第 1 步：初始化 Node.js 後端
1。建立一個新目錄：
mkdir react-node-app cd react-node-app
2。初始化 Node.js 專案：
npm init -y
這將產生一個具有預設設定的 package.json 檔案。
3。安裝 Express.js：
Express 是一個用於建立 Node.js 應用程式的輕量級框架。
npm install express
第 2 步：設定 Express 伺服器
1。建立一個index.js檔：
在您的專案目錄中，建立一個名為index.js的檔案。
2。編寫基本伺服器程式碼：
const express = require('express');
const app = express();
const PORT = 5000;
app.get('/', (req, res) => {
res.send('Backend is running!');
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
3。運作伺服器：
使用以下命令啟動伺服器：
node index.js
在瀏覽器中造訪 http://localhost:5000 以查看回應。
第 3 步：連接 React 前端
1。建立一個 React 應用程式：
在同一目錄中，使用 create-react-app 或 Vite 設定前端。
npx create-react-app client cd client
2。運行 React 應用程式：
啟動React開發伺服器：
npm start
你的 React 應用程式將在 http://localhost:3000 上運行。
第 4 步：為 API 呼叫配置代理
要從 React 向 Node.js 後端發出 API 請求，請在 React 應用程式中設定代理程式。
1。新增代理到 package.json:
在 React 應用程式的 package.json 中，加入以下內容：
"proxy": "http://localhost:5000"
2。在 React 中進行 API 呼叫：
範例：從 Node.js 伺服器取得資料。
import React, { useEffect, useState } from 'react';
function App() {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('/')
.then((res) => res.text())
.then((data) => setMessage(data));
}, []);
return <div>{message}</div>;
}
export default App;
第 5 步：新增 API 端點
使用自訂 API 端點增強您的後端。
1。更新index.js：
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from the backend!' });
});
2。更新 React 以取得數據：
useEffect(() => {
fetch('/api/data')
.then((res) => res.json())
.then((data) => setMessage(data.message));
}, []);
第 6 步：連接到資料庫（可選）
為了讓後端更動態，請連線到 MongoDB 等資料庫。
1。安裝 MongoDB 驅動程式或 Mongoose：
mkdir react-node-app cd react-node-app
2。設定資料庫連線：
更新你的index.js檔：
npm init -y
第 7 步：部署您的應用程式
1。在 Heroku 或 Render 上部署後端：
2。在 Vercel 或 Netlify 上部署 React：
結論
為 React 應用程式設定 Node.js 後端可提供強大的全端開發環境。透過遵循本指南，您將為建立可擴展且高效能的 Web 應用程式奠定堅實的基礎。後端就位後，您可以擴展應用程式以包含身份驗證、即時更新和資料庫整合等功能。
開始編碼並將您的全端專案變為現實！ ？
以上是為您的 React 應用程式設定 Node.js 後端的詳細內容。更多資訊請關注PHP中文網其他相關文章！
