Création d'une application d'actualités à l'aide de React et de l'API du New York Times

Dans ce tutoriel, je vais vous montrer comment j'ai créé une application d'actualités à l'aide de React et de l'API du New York Times. Ce projet a été pour moi un excellent moyen d'en apprendre davantage sur React, comment travailler avec une API et comment déployer une application web avec Vercel.

Ce que nous couvrirons :

• Obtenir des articles d'actualité depuis l'API du New York Times
• Ajout de pagination et d'animations fluides
• Déploiement de l'application sur Vercel

1. Aperçu du projet

L'application New York Times News est une application Web simple qui permet aux utilisateurs de consulter les dernières nouvelles du New York Times. L'application obtient les données directement de l'API du New York Times et les affiche dans une interface claire et facile à utiliser.

Principales caractéristiques :

• Pagination : Les utilisateurs peuvent facilement parcourir différentes pages d'articles d'actualité.
• Animations fluides : Les articles se chargent avec une transition fluide, ce qui rend l'application plus soignée.
• Déploiement : L'application est déployée sur Vercel, elle est donc accessible à tous en ligne. Vous pouvez consulter le référentiel GitHub pour voir tout le code et en savoir plus.

2. Mise en place du projet

Avant de commencer à coder, assurez-vous d'avoir les éléments suivants sur votre ordinateur :

• Node.js et npm : Vous en aurez besoin pour exécuter l'application React et installer d'autres outils.
• Une clé API du New York Times : Vous pouvez l'obtenir en vous inscrivant sur le portail des développeurs du NY Times. Étapes d'installation Configurons le projet sur votre ordinateur local.

1. Cloner le référentiel :

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

2. Installer les dépendances :
Nous devons installer les outils pour les parties client et serveur de notre application.

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

3. Configurer les variables d'environnement :
Créez un fichier .env dans le dossier du serveur et ajoutez votre clé API du New York Times :

NYT_API_KEY=votre_api_key_here

3. Création de l'application

Récupération de données depuis l'API du New York Times

Dans le composant Articles.js, j'ai utilisé l'API Fetch pour obtenir les derniers articles d'actualité. Voici comment cela fonctionne :

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

Ce code garantit que lorsque l'application est en ligne, elle obtient les données directement de l'API du New York Times. Pendant le développement, il obtient les données d'un serveur local, ce qui facilite les tests.

Ajout de pagination et d'animations

Pour gérer la pagination, j'ai ajouté une logique simple qui divise la liste des articles en pages. J'ai également utilisé react-transition-group pour ajouter des animations fluides lors du déplacement entre les articles :

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

4. Défis et leçons apprises

Gestion des problèmes CORS

Au début, j'ai eu quelques problèmes avec CORS en essayant d'obtenir des données de l'API du New York Times lors du développement local. J'ai résolu ce problème en configurant un simple serveur backend qui faisait office de proxy. Pour la version live, j'ai récupéré les données directement depuis l'API pour garder les choses simples.

Gestion des variables d'environnement

J'ai également appris à quel point il est important de gérer correctement les variables d'environnement, en particulier lors du déploiement sur des plateformes comme Vercel. Il est important de protéger les données sensibles, telles que les clés API.

5. Conclusion

Ce projet a été une formidable expérience d’apprentissage. Cela m'a aidé à améliorer mes compétences en React, en intégration d'API et en déploiement Web. Je suis vraiment satisfait du résultat de l'application et j'ai hâte de construire des projets plus complexes à l'avenir.
Si vous avez des commentaires ou des suggestions, n'hésitez pas à nous contacter ou à laisser un commentaire. Vous pouvez également consulter le code sur GitHub et l'essayer vous-même.
Essayez la démo en direct ici !

Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!