CATALOGUE Code & Data Formation ReactJS Apprendre ReactJS 2018 - Les fondamentaux

Récupération de films avec OMDB API en JavaScript

Retour à la formation
Chapitre 5 Leçon 2
Précédent
Suivant

Apprenez comment récupérer des listes de films en utilisant l'OMDB API avec des requêtes fetch en JavaScript.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez à utiliser l'API OMDB, qui est directement connectée à IMDB, pour récupérer des listes de films en fonction de queries spécifiques. Nous commencerons par l'obtention d'une clé d'API gratuite que vous pourrez générer après avoir créé un compte Free sur OMDB, vous permettant de faire jusqu'à 1000 requêtes par jour.

Ensuite, nous implémenterons une fonction de recherche de films dans un fichier fetch.js en utilisant fetch pour envoyer des requêtes et récupérer les données des films au format JSON. Nous verrons comment gérer les réponses asynchrones avec then et catch, en traitant les résultats et les erreurs possibles.

Enfin, nous intégrerons cette fonctionnalité dans un composant React pour afficher les résultats des films correspondants à une query, en utilisant le lifecycle method componentDidMount pour lancer la récupération des données et mettre à jour le state de notre composant pour ré-render automatiquement les nouveaux résultats.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à :
- Obtenir une clé d'API OMDB
- Envoyer des requêtes fetch en JavaScript
- Traiter des réponses JSON asynchrones
- Intégrer ces fonctionnalités dans un composant React et gérer le state

Prérequis pour cette leçon

Pour suivre cette vidéo, il est nécessaire de connaître les bases de JavaScript, notamment la syntaxe ES6, les promesses, et avoir des notions en développement avec React.

Métiers concernés

Les compétences acquises dans cette vidéo peuvent être appliquées à différents métiers, tels que développeur web front-end, développeur JavaScript, et ingénieur logiciel travaillant sur des projets nécessitant l'intégration de sources de données externes.

Alternatives et ressources

Si vous recherchez des solutions alternatives pour travailler avec des données de films, vous pouvez expérimenter avec les APIs de TMDb (The Movie Database), Netflix ou encore avec une base de données filmographique locale.

Questions & Réponses

La méthode utilisée est fetch().
La clé API gratuite d'OMDB permet jusqu'à 1000 requêtes par jour.
La lifecycle method utilisée est componentDidMount().