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

第 1 步：使用 Node.js 和 Express 進(jìn)行後端

讓我們從創(chuàng)建後端開始。我們將使用 Express 作為我們的伺服器，向前端發(fā)送簡(jiǎn)單的 JSON 訊息回應(yīng)。

1. 安裝 Express： 首先，先在終端機(jī)中執(zhí)行以下命令來(lái)安裝 Express：

1. 建立伺服器： 現(xiàn)在，讓我們建立一個(gè)具有簡(jiǎn)單路由的伺服器，該路由將傳回問候訊息。

說明：

• 我們導(dǎo)入express模組並使用express()創(chuàng)建它的實(shí)例。
• 我們?cè)?/greet 設(shè)定了一個(gè)簡(jiǎn)單的 GET 路由，它會(huì)回應(yīng)包含問候訊息的 JSON 物件。
• 我們?cè)?strong>連接埠 3000 上啟動(dòng)伺服器，控制臺(tái)將記錄伺服器正在運(yùn)作。

第 2 步：使用 React 進(jìn)行前端

現(xiàn)在，讓我們使用 React 來(lái)建立前端。我們將使用兩個(gè)鉤子：useState 和 useEffect 從後端取得資料。

1. 建立 React 應(yīng)用程式： 如果您尚未設(shè)定 React 應(yīng)用程序，則可以透過執(zhí)行以下命令使用 create-react-app 建立應(yīng)用程式：

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

說明：

• useState 用於保存後端回傳的回應(yīng)資料。
• useEffect 用於在元件掛載時(shí)觸發(fā) fetch 請(qǐng)求。
• 我們使用 fetch() API 向 http://localhost:3000/greet 發(fā)送請(qǐng)求並處理回應(yīng)。如果獲取成功，我們將使用來(lái)自後端的訊息更新回應(yīng)狀態(tài)。
• 我們?cè)谠酗@示回應(yīng)，在請(qǐng)求正在進(jìn)行時(shí)顯示「正在載入...」。

第 3 步：執(zhí)行應(yīng)用程式

1. 啟動(dòng)後端： 在後端資料夾（server.js 檔案所在的位置）中，運(yùn)行：

1. 啟動(dòng)前端： 在前端資料夾（React 應(yīng)用程式所在的位置）中，運(yùn)行：

現(xiàn)在，打開瀏覽器並訪問 http://localhost:3000。您應(yīng)該會(huì)看到從後端獲取的一條簡(jiǎn)單訊息，它將顯示“Zee here...”。

結(jié)論

就是這樣！您剛剛使用 React 和 Express 創(chuàng)建了一個(gè)簡(jiǎn)單的全端應(yīng)用程式。這是一個(gè)很好的開始，有了這個(gè)基礎(chǔ)，您就可以擴(kuò)展和建立更複雜的應(yīng)用程式?？鞓肪幋a！

重點(diǎn)：

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

以上是使用 React 和 Node.js 創(chuàng)建簡(jiǎn)單的全端應(yīng)用程式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！