Erstellen einer Nachrichten-App mit React und der New York Times API

In diesem Tutorial zeige ich Ihnen, wie ich mit React und der New York Times API eine Nachrichten-App erstellt habe. Dieses Projekt war für mich eine großartige Möglichkeit, mehr über React zu erfahren, wie man mit einer API arbeitet und wie man eine Web-App mit Vercel bereitstellt.

Was wir behandeln werden:

• Nachrichtenartikel von der New York Times API abrufen
• Hinzufügen von Paginierung und flüssigen Animationen
• Bereitstellen der App auf Vercel

1. Projektübersicht

Die New York Times News App ist eine einfache Webanwendung, mit der Benutzer die neuesten Nachrichten der New York Times sehen können. Die App ruft Daten direkt von der New York Times API ab und zeigt sie in einer übersichtlichen und benutzerfreundlichen Oberfläche an.

Hauptmerkmale:

• Paginierung: Benutzer können problemlos durch verschiedene Seiten von Nachrichtenartikeln navigieren.
• Flüssige Animationen:Artikel werden mit einem sanften Übergang geladen, wodurch sich die App eleganter anfühlt.
• Bereitstellung: Die App wird auf Vercel bereitgestellt, sodass sie für jeden online verfügbar ist. Sie können sich das GitHub-Repository ansehen, um den gesamten Code zu sehen und mehr zu erfahren.

2. Einrichten des Projekts

Bevor wir mit dem Codieren beginnen, stellen Sie sicher, dass Folgendes auf Ihrem Computer vorhanden ist:

• Node.js und npm: Sie benötigen diese, um die React-App auszuführen und andere Tools zu installieren.
• Ein API-Schlüssel der New York Times: Sie können diesen erhalten, indem Sie sich im NY Times Developer Portal anmelden. Installationsschritte Lassen Sie uns das Projekt auf Ihrem lokalen Computer einrichten.

1. Klonen Sie das Repository:

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

2. Abhängigkeiten installieren:
Wir müssen die Tools sowohl für den Client- als auch für den Serverteil unserer App installieren.

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

3. Umgebungsvariablen einrichten:
Erstellen Sie eine .env-Datei im Serverordner und fügen Sie Ihren New York Times-API-Schlüssel hinzu:

NYT_API_KEY=your_api_key_here

3. Erstellen der Anwendung

Abrufen von Daten von der New York Times API

In der Komponente Articles.js habe ich die Fetch-API verwendet, um die neuesten Nachrichtenartikel abzurufen. So funktioniert es:

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`
);

Dieser Code stellt sicher, dass die App, wenn sie live ist, Daten direkt von der New York Times API erhält. Während der Entwicklung werden Daten von einem lokalen Server abgerufen, was das Testen erleichtert.

Paginierung und Animationen hinzufügen

Um die Paginierung zu handhaben, habe ich eine einfache Logik hinzugefügt, die die Liste der Artikel in Seiten unterteilt. Ich habe auch react-transition-group verwendet, um flüssige Animationen beim Wechseln zwischen Artikeln hinzuzufügen:

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

4. Herausforderungen und gewonnene Erkenntnisse

Umgang mit CORS-Problemen

Anfangs hatte ich einige Probleme mit CORS, als ich während der lokalen Entwicklung versuchte, Daten von der New York Times API abzurufen. Ich habe dieses Problem gelöst, indem ich einen einfachen Backend-Server eingerichtet habe, der als Proxy fungierte. Für die Live-Version habe ich Daten direkt von der API abgerufen, um die Dinge einfach zu halten.

Umgebungsvariablen verwalten

Ich habe auch gelernt, wie wichtig es ist, Umgebungsvariablen richtig zu verwalten, insbesondere bei der Bereitstellung auf Plattformen wie Vercel. Dies ist wichtig, um sensible Daten wie API-Schlüssel sicher aufzubewahren.

5. Fazit

Dieses Projekt war eine großartige Lernerfahrung. Es hat mir geholfen, meine Fähigkeiten in den Bereichen React, API-Integration und Webbereitstellung zu verbessern. Ich bin wirklich zufrieden mit dem Ergebnis der App und freue mich darauf, in Zukunft komplexere Projekte zu realisieren.
Wenn Sie Feedback oder Vorschläge haben, können Sie sich gerne an uns wenden oder einen Kommentar hinterlassen. Sie können sich den Code auch auf GitHub ansehen und ihn selbst ausprobieren.
Probieren Sie die Live-Demo hier aus!

Danke fürs Lesen!

Das obige ist der detaillierte Inhalt vonErstellen einer Nachrichten-App mit React und der New York Times API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!