使用 React 和纽约时报 API 构建新闻应用程序

在本教程中，我将向您展示如何使用 React 和纽约时报 API 构建新闻应用程序。这个项目是我了解更多有关 React、如何使用 API 以及如何使用 Vercel 部署 Web 应用程序的好方法。

我们将涵盖的内容：

• 从纽约时报 API 获取新闻文章
• 添加分页和流畅的动画
• 在 Vercel 上部署应用

一、项目概况

纽约时报新闻应用程序是一个简单的网络应用程序，可让用户查看纽约时报的最新新闻。该应用程序直接从《纽约时报》API 获取数据，并将其显示在干净且易于使用的界面中。

主要特点：

• 分页：用户可以轻松地浏览新闻文章的不同页面。
• 流畅的动画：文章加载时平滑过渡，使应用程序感觉更加精致。
• 部署：该应用程序部署在 Vercel 上，因此任何人都可以在线使用。 您可以查看 GitHub 存储库以查看所有代码并了解更多信息。

2. 设置项目

在我们开始编码之前，请确保您的计算机上有以下内容：

• Node.js 和 npm：您将需要它们来运行 React 应用程序并安装其他工具。
• 《纽约时报》API 密钥：您可以通过在《纽约时报》开发者门户网站上注册来获取此密钥。安装步骤让我们在本地计算机上设置项目。

1。克隆存储库：

git clone https://github.com/tomasdevs/the-new-york-times-app.git cd the-new-york-times-app

2。安装依赖项：
我们需要为应用程序的客户端和服务器部分安装工具。

cd client npm install npm install react-transition-group cd ../server npm install

3。设置环境变量：
在服务器文件夹中创建一个 .env 文件并添加您的《纽约时报》API 密钥：

NYT_API_KEY=your_api_key_here

3. 构建应用程序

从纽约时报 API 获取数据

在Articles.js组件中，我使用Fetch API来获取最新的新闻文章。其工作原理如下：

const response = await fetch( process.env.NODE_ENV === "production" ? `https://api.nytimes.com/svc/topstories/v2/home.json?api-key=${process.env.REACT_APP_NYT_API_KEY}` : `${process.env.REACT_APP_API_URL}/api/articles` );

此代码确保应用程序运行时，它直接从纽约时报 API 获取数据。在开发过程中，它从本地服务器获取数据，这使得测试更容易。

添加分页和动画

为了处理分页，我添加了简单的逻辑，将文章列表分为页面。我还使用react-transition-group在文章之间移动时添加平滑的动画：

 {currentArticles.map((article, index) => (    ))} 

4. 挑战和经验教训

处理 CORS 问题

最初，我在本地开发期间尝试从纽约时报 API 获取数据时遇到了 CORS 的一些问题。我通过设置一个充当代理的简单后端服务器来解决这个问题。对于实时版本，为了简单起见，我直接从 API 获取数据。

管理环境变量

我还了解了正确管理环境变量的重要性，尤其是在部署到 Vercel 这样的平台时。这对于保证 API 密钥等敏感数据的安全非常重要。

5. 结论

这个项目是一次很棒的学习经历。它帮助我提高了 React、API 集成和 Web 部署方面的技能。我对应用程序的结果非常满意，并且很高兴将来能够构建更复杂的项目。
如果您有任何反馈或建议，请随时联系或发表评论。您也可以查看 GitHub 上的代码并自行尝试。
在这里尝试现场演示！

感谢您的阅读！

以上是使用 React 和纽约时报 API 构建新闻应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！