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.
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.
Bevor wir mit dem Codieren beginnen, stellen Sie sicher, dass Folgendes auf Ihrem Computer vorhanden ist:
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
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.
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>
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.
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.
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!
