使用 React 和 Node.js 創建簡單的全端應用程式

在我之前的部落格中，我介紹了 React 和 Node.js。現在，讓我們將它們聚集在一起建立更令人興奮的東西：一個簡單的全端應用程式！您可能認為全端應用程式僅適用於具有多個資料庫和複雜結構的大型專案。雖然從概念上講這是正確的，但實際上，全端應用程式可以像具有基本後端的小型前端一樣簡單。那麼，讓我們分解一下，看看使用 React 和 Node.js 創建一個全端應用程式是多麼容易。

第 1 步：使用 Node.js 和 Express 進行後端

讓我們從創建後端開始。我們將使用 Express 作為我們的伺服器，向前端發送簡單的 JSON 訊息回應。

1. 安裝 Express： 首先，先在終端機中執行以下命令來安裝 Express：

1. 建立伺服器： 現在，讓我們建立一個具有簡單路由的伺服器，該路由將傳回問候訊息。

說明：

• 我們導入express模組並使用express()創建它的實例。
• 我們在 /greet 設定了一個簡單的 GET 路由，它會回應包含問候訊息的 JSON 物件。
• 我們在連接埠 3000 上啟動伺服器，控制台將記錄伺服器正在運作。

---

第 2 步：使用 React 進行前端

現在，讓我們使用 React 來建立前端。我們將使用兩個鉤子：useState 和 useEffect 從後端取得資料。

1. 建立 React 應用程式： 如果您尚未設定 React 應用程序，則可以透過執行以下命令使用 create-react-app 建立應用程式：

1. 編寫前端程式碼： 現在，讓我們修改 App.js 檔案以從後端獲取資料並顯示它。

說明：

• useState 用於保存後端回傳的回應資料。
• useEffect 用於在元件掛載時觸發 fetch 請求。
• 我們使用 fetch() API 向 http://localhost:3000/greet 發送請求並處理回應。如果獲取成功，我們將使用來自後端的訊息更新回應狀態。
• 我們在元件中顯示回應，在請求正在進行時顯示「正在載入...」。

---

第 3 步：執行應用程式

1. 啟動後端： 在後端資料夾（server.js 檔案所在的位置）中，運行：

1. 啟動前端： 在前端資料夾（React 應用程式所在的位置）中，運行：

現在，打開瀏覽器並訪問 http://localhost:3000。您應該會看到從後端獲取的一條簡單訊息，它將顯示“Zee here...”。

---

結論

就是這樣！您剛剛使用 React 和 Express 創建了一個簡單的全端應用程式。這是一個很好的開始，有了這個基礎，您就可以擴展和建立更複雜的應用程式。快樂編碼！

---

重點：

• 全端應用程式不需要很複雜。一個簡單的前端和後端就可以被認為是全端。
• React 的 useState 和 useEffect 掛鉤非常適合從後端 API 取得資料。
• Express 是一個簡單且強大的框架，用於建立後端 API。

以上是使用 React 和 Node.js 創建簡單的全端應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！