Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a movie trailer app in ReactJS ?

  • Last Updated : 06 Aug, 2021

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:
cd movie-app
  • 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:

Example code:

Edit src/App.js file: This file contains our app logic:

Javascript




import './App.css';
import { useState } from 'react';
import ReactPlayer from 'react-player';
import movieTrailer from 'movie-trailer';
   
function App() {
   
  //Setting up the initial states using
  // react hook 'useState"
  const [video, setVideo] = useState("inception");
  const [videoURL, setVideoURL] = 
    useState("https://youtu.be/sa9l-dTv9Gk");
   
  //A function to fetch the required URL
  // and storing it inside the
  // videoURL state variable
  function handleSearch() {
    movieTrailer(video).then((res) => {
      setVideoURL(res);
    });
  }
   
  return (
    <div className="App">
      <div className="search-box">
        <label>
            Search for any movies/shows:{ " " }
        </label>
        <input type="text" onChange=
            {(e) => { setVideo(e.target.value) }} />
  
        <button onClick={()=>{handleSearch()}}>
            Search
        </button>
      </div>
  
      // Using 'ReactPlayer' component to
      // display the video
      <ReactPlayer url={videoURL} controls={true}/>
    </div>
  );
}
   
export default App;

Edit src/App.css file: This file contains all the required styling for that app:

CSS




.App {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100vh;
    width: 100%;
    font-size: 22px;
}
  
.search-box {
    height: 10vh;
}
  
.search-box>input,
button {
    box-sizing: border-box;
    height: 25px;
    font-size: 20px;
}

Step to run application: Type the following command in the terminal:

npm start

Output: Now Open http://localhost:3000/  in your browser to see our working app.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!