使用 Airtable API 和 React 获取和显示数据

在本教程中，我们将使用 Airtable 作为简单 React 应用程序的数据源。如果您不熟悉 Airtable，他们会将自己描述为拥有数据库的强大功能和熟悉的电子表格。如果您熟悉电子表格，那么使用 Airtable 就不会遇到任何问题。

在开始编写代码之前，我们将从 Airtable 设置开始。如果您还没有，请注册一个新的 Airtable 帐户。请随意使用此推荐链接，我将收到 10 美元的 Airtable 积分。

Airtable 使用起来非常简单，因此您可能只想从此处导入我在创建本教程时使用的数据。否则，设置数据所涉及的步骤如下：

创建一个新的基础（Airtable 的数据库名称）。
将标题和表名更改为食谱。
将第一个字段 (Name) 重命名为 recipe。
删除注释、附件和状态字段。
添加新的网址和照片字段。
我们现在可以继续创建组件以在 React 中显示此数据。我们将使用Create React App来设置开发环境，但这个组件可以很容易地放在现有的应用程序中：

npx create-react-app react-airtable
1

接下来在包含导入的目录中创建一个新Recipes.js文件：/src

import React