How to Use TMDb API in React: Step-by-Step Guide

 If you want to build a React app that shows popular and trending movies using the TMDb (The Movie Database) API, this guide will walk you through the process step-by-step. We’ll cover fetching trending and popular movies, displaying them, and creating a details page for individual movies.

Step 1: Get Your API Key from TMDb

• Visit https://www.themoviedb.org/
• 
  
• Create an account and navigate to your API section.
• 
  
• Generate an API key (v3).
• 
  
• Keep this API key safe — you’ll use it to authenticate your requests.

Or Use this Api Address key is 6977944a2fc791aa08824486e3fc045c

Step 2: Setup Your React Project

Create a React app (using create-react-app or Next.js).

•  npx create-react-app

Install axios for making HTTP requests:

• npm install axios

Step 3: Define API Base URL and API Key

in your page define 

const API_KEY = "YOUR_API_KEY_HERE";

const BASE_URL = "https://api.themoviedb.org/3";

These constants help you build requests to the TMDb API endpoints.

Example

const API_KEY = "6977944a2fc791aa08824486e3fc045c"; 

const BASE_URL = "https://api.themoviedb.org/3";

Step 4: Fetch Movies Page

Use the endpoint:

GET https://api.themoviedb.org/3/trending/movie/week?api_key=API_KEY

This returns trending movies for the week.

Example in MOVIES HOME PAGE

this two function is one to fetch trending movies and another one to fetch popular movies if you wanna you only trending movies .

Step 5:- Create a Movies Details Page

Fetch 

Get https://api.themoviedb.org/3/movie/{movie_id}?api_key=API_KEY

Summary of important Api Feilds

Field	Description	Example
id	Unique movie identifier	12345
title	Movie title	"Inception"
overview	Movie description	"A thief who steals..."
poster_path	Image path for poster	"/qJ2tW6WMUDux911r6m7haRef0WH.jpg"
backdrop_path	Image path for backdrop	"/s3TBrRGB1iav7gFOCNx3H31MoES.jpg"
release_date	Release date	"2010-07-16"
runtime	Duration in minutes	148
vote_average	Average user rating	8.3
vote_count	Number of votes	22186
genres	Array of genres (id and name)	[ {id: 28, name: "Action"} ]

Here is githup respo to do Movies page with its Movies Details page. 

Sour of code:-

Github