如何在 ReactJS 中创建电影预告片应用程序？

在本文中，我们将制作一个简单的应用程序来搜索任何电影/网络系列预告片。我们将使用“movie-trailer”npm 包来查找此类 URL，并使用另一个名为“react-player”的 npm 包显示内容。

先决条件：该项目的先决条件是：

• 做出反应。
• 反应钩子。
• JavaScript ES6。
• 反应 Axios 和 API
• 功能组件

方法：我们的应用程序包含两个部分，即一个用于获取用户输入的部分，另一个用于显示视频。每当用户搜索视频时，我们会将其存储在状态变量中，并且每当用户单击搜索按钮时，我们将调用一个函数，该函数将获取所需的视频 URL 并将其存储在另一个状态变量中。现在我们有了所需的 URL，我们将使用“ReactPlayer”组件简单地呈现该视频。

创建 React 应用并安装模块：

• 第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

npx create-react-app movie-app

• 第2步：现在，通过运行以下命令进入项目文件夹，即movie-app：

cd movie-app

• 第 3 步：让我们安装此项目所需的一些 npm 包：

电影预告片：获取任何电影/系列的 Youtube 预告片。

npm install --save movie-trailer

react-player：一个react组件，用于播放各种URL，包括文件路径、YouTube等。

npm install react-player

项目结构：应该是这样的：

示例代码：

编辑 src/App.js 文件：该文件包含我们的应用程序逻辑：

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 (
    

      

        
            Search for any movies/shows:{ " " }
        
         { setVideo(e.target.value) }} />
  
        {handleSearch()}}>
            Search
        
      
  
      // Using 'ReactPlayer' component to
      // display the video
      
    
  );
}
   
export default App;

编辑 src/App.css 文件：此文件包含该应用程序所需的所有样式：

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;
}

运行应用程序的步骤：在终端中键入以下命令：

npm start

输出：现在在浏览器中打开 http://localhost:3000/ 以查看我们正在运行的应用程序。