How to create a movie trailer app in ReactJS ? - GeeksforGeeks

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:
React.
React Hooks.
JavaScript ES6.
React Axios & API
Functional Components
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.
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set background images in ReactJS ?
How to navigate on path by button click in react router ?
ReactJS useNavigate() Hook
How to create a table in ReactJS ?
Axios in React: A Guide for Beginners
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Angular Libraries For Web Developers