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

# Web 开发 # JavaScript # 编程 # 初学者

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

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

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

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

npm install express

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

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` 从后端获取数据。

创建 React 应用程序：如果你尚未设置 React 应用程序，则可以通过运行 create-react-app 来创建一个：

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

编写前端代码：现在，让我们修改 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 (
       
         {response ? {response}
 : Loading...}
       
     );
   }

**解释**：

useState 用于保存来自后端的响应数据。

useEffect 用于在组件挂载时触发 fetch 请求。

我们使用 fetch() API 向 http://localhost:3000/greet 发送请求并处理响应。如果获取成功，我们将使用来自后端的消息更新响应状态。

我们在组件中显示响应，在请求进行时显示“正在加载...”。

步骤 3：运行应用程序

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

node server.js

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

npm start

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

结论

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

关键要点：

全栈应用不需要很复杂，只要有简单的前端和后端就可以算作全栈。

React 的 useState 和 useEffect 钩子非常适合从后端 API 获取数据。

Express 是一个用于构建后端 API 的简单而强大的框架。

CLIS.CC

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

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

第 2 步：使用 React 进行前端

步骤 3：运行应用程序

结论

关键要点：