React と New York Times API を使用したニュース アプリの構築

このチュートリアルでは、React と New York Times API を使用してニュース アプリを構築する方法を示します。このプロジェクトは、React、API の操作方法、Vercel を使用して Web アプリをデプロイする方法について詳しく学ぶのに最適な方法でした。

取り上げる内容:

• New York Times API からニュース記事を取得する
• ページネーションとスムーズなアニメーションの追加
• Vercel へのアプリのデプロイ

1. プロジェクト概要

ニューヨーク タイムズ ニュース アプリは、ユーザーがニューヨーク タイムズの最新ニュースを見ることができるシンプルな Web アプリケーションです。このアプリは、New York Times API から直接データを取得し、クリーンで使いやすいインターフェイスに表示します。

主な特徴:

• ページネーション: ユーザーはニュース記事の別のページを簡単に移動できます。
• スムーズなアニメーション: 記事はスムーズな移行で読み込まれ、アプリがより洗練された印象になります。
• 展開: アプリは Vercel に展開されるため、オンラインで誰でも利用できます。 GitHub リポジトリをチェックアウトして、すべてのコードを確認し、詳細を確認できます。

2. プロジェクトのセットアップ

コーディングを開始する前に、コンピューターに次のものがインストールされていることを確認してください:

• Node.js と npm: これらは、React アプリを実行し、他のツールをインストールするために必要になります。
• New York Times API キー: これは、NY Times 開発者ポータルにサインアップすることで取得できます。 インストール手順 ローカル コンピューターにプロジェクトをセットアップしましょう。

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 ファイルを作成し、New York Times API キーを追加します:

NYT_API_KEY=your_api_key_here

3. アプリケーションの構築

New York Times 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`
);

このコードは、アプリが稼働中に New York Times 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>

4. 課題と学んだ教訓

CORS 問題の処理

最初、ローカル開発中に New York Times API からデータを取得しようとしたときに、CORS でいくつかの問題が発生しました。私はプロキシとして機能する単純なバックエンド サーバーを設定することでこれを解決しました。ライブバージョンでは、物事をシンプルにするために API から直接データを取得しました。

環境変数の管理

また、特に Vercel のようなプラットフォームにデプロイする場合、環境変数を適切に管理することがいかに重要であるかを学びました。これは、API キーなどの機密データを安全に保つために重要です。

5. 結論

このプロジェクトは素晴らしい学習体験でした。これは、React、API 統合、Web デプロイメントのスキルを向上させるのに役立ちました。アプリの出来には本当に満足しており、将来的にはより複雑なプロジェクトを構築できることに興奮しています。
フィードバックや提案がありましたら、お気軽にご連絡いただくか、コメントを残してください。 GitHub でコードをチェックアウトして、自分で試してみることもできます。
ここでライブデモをお試しください!

読んでいただきありがとうございます!

以上がReact と New York Times API を使用したニュース アプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。