¿Cómo crear una aplicación de avance de película en ReactJS?

En este artículo, vamos a crear una aplicación simple que busca avances de cualquier película/serie web. Usaremos el paquete npm ‘movie-trailer’ para encontrar dichas URL y mostrar el contenido usando otro paquete npm llamado ‘react-player’. 

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar.
• Ganchos de reacción.
• JavaScript ES6.
• Reaccionar Axios y API
• Componentes funcionales

Enfoque: nuestra aplicación contiene dos secciones, es decir, una sección para tomar la entrada del usuario y la otra para mostrar el video. Siempre que un usuario busque un video, lo almacenaremos dentro de una variable de estado y cada vez que un usuario haga clic en el botón de búsqueda, llamaremos a una función que buscará la URL del video requerida y la almacenará en otra variable de estado. Ahora que tenemos la URL requerida, simplemente renderizaremos ese video usando el componente ‘ReactPlayer’.

Creación de la aplicación React e instalación del módulo: 

• Paso 1: Cree una aplicación de reacción escribiendo el siguiente comando en la terminal:

npx create-react-app movie-app

• Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, movie-app, ejecutando el siguiente comando:

cd movie-app

• Paso 3: instalemos algunos paquetes npm necesarios para este proyecto:

tráiler de películas: Obtener tráilers de Youtube para cualquier película/serie.

npm install --save movie-trailer

react-player: un componente de reacción para reproducir una variedad de URL, incluidas rutas de archivos, YouTube, etc.

npm install react-player

Estructura del proyecto: Debería verse así:

Código de ejemplo:

Edite el archivo src/App.js: este archivo contiene nuestra lógica de aplicación:

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;

Edite el archivo src/App.css: este archivo contiene todo el estilo requerido para esa aplicación:

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

Paso para ejecutar la aplicación: escriba el siguiente comando en la terminal:

npm start

Salida: ahora abra http://localhost:3000/  en su navegador para ver nuestra aplicación en funcionamiento.