在我之前的博客中，我介紹了 React 和 Node.js。現(xiàn)在，讓我們將它們聚集在一起構(gòu)建更令人興奮的東西：一個(gè)簡(jiǎn)單的全棧應(yīng)用程序！您可能認(rèn)為全棧應(yīng)用程序僅適用于具有多個(gè)數(shù)據(jù)庫和復(fù)雜結(jié)構(gòu)的大型項(xiàng)目。雖然從概念上講這是正確的，但實(shí)際上，全棧應(yīng)用程序可以像帶有基本后??端的小型前端一樣簡(jiǎn)單。那么，讓我們分解一下，看看使用 React 和 Node.js 創(chuàng)建一個(gè)全棧應(yīng)用程序是多么容易。

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

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

1. 安裝 Express： 首先，首先在終端中運(yùn)行以下命令來安裝 Express：

   npm install express

1. 創(chuàng)建服務(wù)器： 現(xiàn)在，讓我們創(chuàng)建一個(gè)具有簡(jiǎn)單路由的服務(wù)器，該路由將返回問候消息。

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

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

說明：

• 我們導(dǎo)入express模塊??并使用express()創(chuàng)建它的實(shí)例。
• 我們?cè)?/greet 設(shè)置了一個(gè)簡(jiǎn)單的 GET 路由，它響應(yīng)包含問候消息的 JSON 對(duì)象。
• 我們?cè)?strong>端口 3000 上啟動(dòng)服務(wù)器，控制臺(tái)將記錄服務(wù)器正在運(yùn)行。

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

現(xiàn)在，讓我們使用 React 創(chuàng)建前端。我們將使用兩個(gè)鉤子：useState 和 useEffect 從后端獲取數(shù)據(jù)。

1. 創(chuàng)建 React 應(yīng)用： 如果您尚未設(shè)置 React 應(yīng)用程序，則可以通過運(yùn)行以下命令使用 create-react-app 創(chuàng)建一個(gè)應(yīng)用程序：

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. 編寫前端代碼： 現(xiàn)在，讓我們修改 App.js 文件以從后端獲取數(shù)據(jù)并顯示它。

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

說明：

• useState 用于保存后端返回的響應(yīng)數(shù)據(jù)。
• useEffect 用于在組件掛載時(shí)觸發(fā) fetch 請(qǐng)求。
• 我們使用 fetch() API 向 http://localhost:3000/greet 發(fā)送請(qǐng)求并處理響應(yīng)。如果獲取成功，我們將使用來自后端的消息更新響應(yīng)狀態(tài)。
• 我們?cè)诮M件中顯示響應(yīng)，在請(qǐng)求正在進(jìn)行時(shí)顯示“正在加載...”。

第 3 步：運(yùn)行應(yīng)用程序

1. 啟動(dòng)后端： 在后端文件夾（server.js 文件所在的位置）中，運(yùn)行：

   npm install express

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

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

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

現(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ò)展和構(gòu)建更復(fù)雜的應(yīng)用程序?？鞓肪幋a！

要點(diǎn)：

• 全棧應(yīng)用程序不需要很復(fù)雜。一個(gè)簡(jiǎn)單的前端和后端就可以被認(rèn)為是全棧。
• React 的 useState 和 useEffect 掛鉤非常適合從后端 API 獲取數(shù)據(jù)。
• Express 是一個(gè)簡(jiǎn)單而強(qiáng)大的框架，用于構(gòu)建后端 API。

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