使用 React 和紐約時報 API 建立新聞應用程式-js教程-PHP中文網

使用 React 和紐約時報 API 建立新聞應用程式

王林

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

原創

966 人瀏覽過

Building a News App Using React and the New York Times API

在本教程中，我將向您展示如何使用 React 和紐約時報 API 建立新聞應用程式。這個專案是我了解更多有關 React、如何使用 API 以及如何使用 Vercel 部署 Web 應用程式的好方法。

我們將涵蓋的內容：

從紐約時報 API 取得新聞文章
新增分頁和流暢的動畫
在 Vercel 上部署應用程式

一、專案概況

《紐約時報新聞應用程式》是一個簡單的 Web 應用程序，可讓用戶查看《紐約時報》的最新新聞。該應用程式直接從《紐約時報》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>

登入後複製