如何連線 Node 和 React？

---

Node.js 和 ReactJS 這兩種技術棧廣泛應用於現代全棧 Web 程式中。ReactJS 用於前端，Node.js 用於後端。

• ReactJS 是一個流行的 JavaScript 庫，用於構建使用者介面 (UI)。React 的主要目標是簡化構建互動式使用者介面的複雜過程。
• Node.js 是一個開源的、跨平臺的 JavaScript 執行環境。它非常適合處理快速且可擴充套件的伺服器，能夠處理具有高吞吐量的併發連線。

連線後端和前端

在連線後端和前端之前，我們需要為兩者建立程式碼和目錄，以便檢查連線性。

後端目錄步驟

步驟 1：首先，透過在終端中使用以下命令建立並進入後端目錄。

mkdir backend
cd backend

步驟 2：使用 index.js 作為入口點進行初始化。

npm init

有時也可能命名為 app.js，那麼我們必須使用 app.js 作為入口點。

步驟 3：安裝所需的庫。

npm i express nodemon

Nodemon 主要幫助開發人員構建 Node.js 應用程式，透過自動重啟應用程式來檢測目錄中檔案的更改。

安裝 nodemon 後，它的版本應該像這樣反映在 package.json 檔案中。

"express": "^4.19.2",
"nodemon": "^3.1.4"

前端目錄步驟

步驟 1：第一步，使用以下命令建立一個名為 的 React 應用程式。

npx create-react-app frontendReact

步驟 2：使用以下命令進入專案目錄。

cd frontendReact

專案結構

之後，專案結構將如下所示。

除此之外，我們還需要使用以下命令安裝其他一些依賴項

npm install express body-parser cors

連線 Node.js 和 ReactJS

在連線後端和前端之前，我們必須在 Node.js 和 ReactJS 中編寫兩端的程式碼。

後端示例程式碼

這裡我以一個簡單的後端伺服器為例。

// File path-> backend/index.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const PORT = 3000;

// Middleware
app.use(cors());
app.use(bodyParser.json());

// POST route
app.post('/api/message', (req, res) => {
  const { message } = req.body;
  console.log('Received message:', message);
  res.json({ reply: `Server received: ${message}` });
});

app.listen(PORT, () => {
  console.log(`Server is running on https://:${PORT}`);
});

使用以下命令執行後端伺服器

npm run dev

輸出

執行此命令後，輸出應如下所示。

在此步驟中，我們將透過在 React 資料夾的 package.json 檔案中新增代理來連線後端伺服器到前端，該檔案應如下所示。

"proxy": "https://:3000"

這告訴 React 將 API 請求代理到我們專案中使用 Express 構建的 Node.js 伺服器。

前端示例程式碼

此程式碼允許使用者輸入訊息，透過 POST 請求將此訊息傳送到後端，然後顯示伺服器的響應。它利用 React 的狀態管理來處理輸入、表單提交和顯示伺服器的響應。

// File path-> frontend/app.js

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('');
  const [reply, setReply] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch('https://:3000/api/message', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log('Reply from server:', data);
        setReply(data.reply);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button type="submit">Send Message</button>
      </form>
      <p>Server Reply: {reply}</p>
    </div>
  );
}

export default App;

要執行以下程式碼，請在終端中鍵入以下命令

npm start

輸出

執行前端和後端伺服器後，我們可以看到我們在前端輸入和傳送的訊息已在後端終端接收。