The document provides an agenda for a session on fetching data in React using APIs and Axios. It discusses loading movie data from a local JSON file and displaying it using MovieCards. It then covers using the TMDB API with Postman to make requests. Axios is introduced as a library for making HTTP requests from React. The code is modified to fetch trending movie data from TMDB's API using Axios and display it.
6. Let’s create a beautiful movie list!
● https://pastebin.com/y3sfrWWS
● Copy the file and save as fetchedMovies.json in src/data folder
● From this list, we will only show poster, year, title, and rating(for now!)
● Now, let’s load and display our data!
11. Putting it all together
● Load JSON file in MovieList using
○ import fetchedMovies from './data/fetchedMovies.json';
○ In React, you don’t need to read file manually using fs!
● After loading data, store data to a state called movies.
○ Only store the array in results field!
● Pass the movie data one by one using map to MovieCard props
● At MovieCard, load the data from props then display it!
14. Load images
● To load images, you can use poster_path from JSON
● You need to add this:
○ https://image.tmdb.org/t/p/original
○ As the prefix before poster path
○ For example:
https://image.tmdb.org/t/p/original/7ucaMpXAmlIM24qZZ8uI9hCY0hm.jpg
● Create const called BASE_IMAGE_URL at the top of MovieCards, then prepend it
when you try to load the image
19. What is API?
● API is the acronym for Application Programming Interface, which is a software
intermediary that allows two applications to talk to each other.
● In this case, we will working with REST API
20. What is REST API?
● REST APIs communicate via HTTP requests to perform standard database
functions like creating, reading, updating, and deleting records (CRUD)
● HTTP Method: GET: retrieve record(s), POST: create record(s), PUT: update a
record, DELETE: delete one
22. What is Postman?
● Postman is an API platform for building and using APIs. Postman simplifies each
step of the API lifecycle and streamlines collaboration so you can create better
APIs—faster.
● Here, you can do all HTTP Method and get the result
23. Using our first API
● Go to https://www.themoviedb.org/ and create an account
● Go to Settings > API to get your API Key (v3 auth). This is like your password to
access their API
● Then, go to https://developers.themoviedb.org/3/getting-started/introduction to learn
more about their API
29. What is Axios?
● One of the fundamental tasks of any web application is to communicate with
servers through the HTTP protocol.
● Axios is a Javascript library used to make HTTP requests.
38. Checkout to branch 04-axios-instance
https://github.com/depimomo/react-tmdb-movie
Clone this for your guide 👍
39. Stop for a little, read official docs,
articles and keep coding.
At the end, you know what you
did. You should be able to
explain someone else about what
you learn.
