react连接node服务器

要将React应用程序连接到Node.js服务器，可以使用以下步骤：

1. 在React应用程序的根目录中，使用终端或命令提示符打开一个新的命令窗口。
2. 使用以下命令初始化一个新的React应用程序：

   npx create-react-app my-app

这将创建一个名为 "my-app" 的新React应用程序。

3. 安装与Node.js服务器相关的依赖项。在React应用程序的根目录中运行以下命令：

   npm install express axios

这将安装Express和Axios模块，用于在React应用程序中处理服务器请求和响应。

4. 创建一个新的文件夹，用于存放服务器文件。在React应用程序的根目录中创建一个名为 "server" 的文件夹。

5. 在 "server" 文件夹中创建一个新的JavaScript文件，例如 "server.js"。在该文件中，编写以下代码来创建一个简单的Node.js服务器：

   const express = require('express');
   const app = express();

   app.get('/api/data', (req, res) => {
     res.json({ message: 'Hello from the server!' });
   });

   const port = process.env.PORT || 5000;
   app.listen(port, () => {
     console.log(`Server listening on port ${port}`);
   });

这个简单的服务器会在根路径下的 "/api/data" 路由上返回一个包含消息 "Hello from the server!" 的JSON响应。

6. 在React应用程序的根目录中的 "src" 文件夹中创建一个新的文件，例如 "api.js"。在该文件中，编写以下代码来处理从服务器获取数据的逻辑：

   import axios from 'axios';

   export const fetchData = async () => {
     try {
       const response = await axios.get('/api/data');
       return response.data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   };

这个代码片段使用Axios库来发送GET请求到服务器的 "/api/data" 路由，并返回响应数据。

7. 在React组件中使用从服务器获取的数据。在React应用程序的根组件或其他需要数据的组件中，使用以下代码来获取并显示从服务器返回的数据：

   import React, { useEffect, useState } from 'react';
   import { fetchData } from './api';

   const App = () => {
     const [data, setData] = useState(null);

     useEffect(() => {
       const getData = async () => {
         const result = await fetchData();
         setData(result);
       };

       getData();
     }, []);

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

   export default App;

这个组件使用React的 `useEffect` 钩子和 `useState` 钩子来在组件加载时获取数据，并将其存储在状态变量 `data` 中。然后，根据数据是否存在，显示相应的消息或 "Loading..." 文本。

8. 启动React应用程序和Node.js服务器。在React应用程序的根目录中，分别在两个不同的终端或命令提示符窗口中运行以下命令：

   npm start

   node server/server.js

`npm start` 命令将启动React开发服务器，而 `node server/server.js` 命令将启动Node.js服务器。

现在，React应用程序将通过Axios库从Node.js服务器获取数据，并在应用程序中显示。