How to create a movie trailer app in ReactJS ?
In this article, we are going to make a simple app that searches for any movie/web series trailers. We will use ‘movie-trailer’ npm package to find such URLs and display the content using another npm package called ‘react-player’.
Prerequisites: The pre-requisites for this project are:
Approach: Our app contains two sections i.e a section for taking the user input and the other for displaying the video. Whenever a user searches for a video, we will store that inside a state variable and whenever a user clicks on the search button we will call a function that will fetch the required video URL and store it in another state variable. Now we have the required URL, we will simply render that video using the ‘ReactPlayer’ component.
Creating React app and installing module:
- Step 1: Create a react application by typing the following command in the terminal:
npx create-react-app movie-app
- Step 2: Now, go to the project folder i.e movie-app by running the following command:
- Step 3: Let’s install some npm packages required for this project:
movie-trailer: Fetch Youtube trailers for any movies/series.
npm install --save movie-trailer
react-player: A react component for playing a variety of URLs, including file paths, YouTube, etc.
npm install react-player
Project Structure: It should look like this:
Edit src/App.js file: This file contains our app logic:
Edit src/App.css file: This file contains all the required styling for that app:
Step to run application: Type the following command in the terminal:
Output: Now Open http://localhost:3000/ in your browser to see our working app.