使用 React 和 Node.js 创建简单的全栈应用程序

在我之前的博客中，我介绍了 React 和 Node.js。现在，让我们将它们聚集在一起构建更令人兴奋的东西：一个简单的全栈应用程序！您可能认为全栈应用程序仅适用于具有多个数据库和复杂结构的大型项目。虽然从概念上讲这是正确的，但实际上，全栈应用程序可以像带有基本后​​端的小型前端一样简单。那么，让我们分解一下，看看使用 React 和 Node.js 创建一个全栈应用程序是多么容易。

第 1 步：使用 Node.js 和 Express 进行后端

让我们从创建后端开始。我们将使用 Express 作为我们的服务器，向前端发送简单的 JSON 消息响应。

1. 安装 Express： 首先，首先在终端中运行以下命令来安装 Express：

   npm install express

1. 创建服务器： 现在，让我们创建一个具有简单路由的服务器，该路由将返回问候消息。

   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}`)); 

说明：

• 我们导入express模块​​并使用express()创建它的实例。
• 我们在 /greet 设置了一个简单的 GET 路由，它响应包含问候消息的 JSON 对象。
• 我们在端口 3000 上启动服务器，控制台将记录服务器正在运行。

---

第 2 步：使用 React 进行前端

现在，让我们使用 React 创建前端。我们将使用两个钩子：useState 和 useEffect 从后端获取数据。

1. 创建 React 应用： 如果您尚未设置 React 应用程序，则可以通过运行以下命令使用 create-react-app 创建一个应用程序：

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

1. 编写前端代码： 现在，让我们修改 App.js 文件以从后端获取数据并显示它。

   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 用于保存后端返回的响应数据。
• useEffect 用于在组件挂载时触发 fetch 请求。
• 我们使用 fetch() API 向 http://localhost:3000/greet 发送请求并处理响应。如果获取成功，我们将使用来自后端的消息更新响应状态。
• 我们在组件中显示响应，在请求正在进行时显示“正在加载...”。

---

第 3 步：运行应用程序

1. 启动后端： 在后端文件夹（server.js 文件所在的位置）中，运行：

   npm install express

1. 启动前端： 在前端文件夹（React 应用程序所在的位置）中，运行：

   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}`)); 

现在，打开浏览器并访问 http://localhost:3000。您应该会看到从后端获取的一条简单消息，它将显示“Zee here...”。

---

结论

就是这样！您刚刚使用 React 和 Express 创建了一个简单的全栈应用程序。这是一个很好的开始，有了这个基础，您就可以扩展和构建更复杂的应用程序。快乐编码！

---

要点：

• 全栈应用程序不需要很复杂。一个简单的前端和后端就可以被认为是全栈。
• React 的 useState 和 useEffect 挂钩非常适合从后端 API 获取数据。
• Express 是一个简单而强大的框架，用于构建后端 API。

以上是使用 React 和 Node.js 创建简单的全栈应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！