使用 React 和纽约时报 API 构建新闻应用程序-js教程-PHP中文网

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

王林

发布： 2024-09-05 06:52:15

原创

972 人浏览过

Building a News App Using React and the New York Times 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 在文章之间移动时添加平滑的动画：

<TransitionGroup component="ul" className="articles-list">
  {currentArticles.map((article, index) => (
    <CSSTransition key={index} timeout={500} classNames="article">
      <ArticleItem article={article} />
    </CSSTransition>
  ))}
</TransitionGroup>

登录后复制