在 React 中集成 REST API：综合指南-js教程-PHP中文网

Integrating REST APIs in React: A Comprehensive Guide

在 Web 开发领域，将外部数据集成到 React 应用程序中是一项常见且关键的任务。 REST API（表述性状态传输应用程序编程接口）提供了一种与服务器端数据交互的标准化方法。在本分步指南中，我们将探索如何在 React 应用程序中无缝使用 REST API，使您能够构建动态且数据驱动的 Web 体验。

第 1 步：设置你的 React 应用程序

设置 React 应用程序是构建动态 Web 体验的关键的第一步。按照以下步骤使用 Create React App 启动一个新的 React 项目，Create React App 是一种简化设置过程的流行工具。

安装 Node.js 和 npm

在创建 React 应用程序之前，请确保您的计算机上安装了 Node.js 和 npm（Node Package Manager）。您可以从 Node.js 官方网站下载并安装它们。

安装创建反应应用程序

打开终端或命令提示符并运行以下命令以全局安装 Create React App：

npm install -g create-react-app

登录后复制

创建一个新的 React 应用程序

安装后，使用 Create React App 启动一个新项目。将“my-react-app”替换为您喜欢的项目名称：

npx create-react-app my-react-app

登录后复制

导航到您的项目目录

进入新创建的项目目录：

cd my-react-app

登录后复制

启动开发服务器

启动开发服务器以查看您的 React 应用程序的运行情况：

npm start

登录后复制

此命令启动开发服务器并在新的浏览器窗口中打开您的应用程序。

探索项目结构

看一下 Create React App 创建的项目结构。关键目录包括：

src：包含您的应用程序的源代码。
public：保存公共资源，例如 HTML 文件和图像。
node_modules：包含项目所需的所有依赖项。

第 2 步：创建您的第一个组件

导航到 src 目录并打开 App.js 文件。修改文件内容以创建您的第一个 React 组件：

// src/App.js
import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
    </div>
  );
}

export default App;

登录后复制

第 3 步：在 React 中使用 REST API

要在 React 应用程序中使用 REST API，您可以使用内置的 fetch 函数或流行的库（如 Axios）。在此示例中，我们将演示如何使用 fetch 函数向 REST API 发出 GET 请求。

让我们在 src 目录中创建一个名为 DataFetcher 的新组件：

// src/DataFetcher.js
import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError('Error fetching data: ' + error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div>
      <h2>Fetched Data</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetcher;

登录后复制

第 4 步：使用 DataFetcher 组件

现在我们已经准备好了 DataFetcher 组件，我们需要将其合并到我们的主 App 组件中。修改App.js如下：

// src/App.js
import React from 'react';
import DataFetcher from './DataFetcher';

function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
      <DataFetcher />
    </div>
  );
}

export default App;

登录后复制

第 5 步：处理错误和加载状态

在前面的示例中，我们已经包含了基本的错误处理和加载状态。然而，确保用户在数据获取操作期间收到有意义的反馈非常重要。以下是我们管理这些状态的方式：

加载状态：正在获取数据时显示加载消息。
错误状态：如果获取数据出现问题，请提供反馈。
成功状态：成功检索后渲染所获取的数据。

第 6 步：使用 CSS 增强用户体验

为了提高用户体验，您可以添加一些基本的CSS样式。在 src 目录中创建一个名为 App.css 的新 CSS 文件：

/* src/App.css */
body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

ul {
  list-style-type: none;
}

li {
  background-color: #f9f9f9;
  margin: 5px;
  padding: 10px;
}

登录后复制

然后将此 CSS 文件导入到您的 App.js 中：