Cómo crear una aplicación de películas usando React y una API pública

Crear una aplicación de películas es uno de los mejores proyectos para aprender React porque permite practicar conceptos fundamentales como componentes, estados, efectos, consumo de APIs, búsquedas y renderizado dinámico. En este tutorial construiremos una aplicación capaz de consultar películas desde una API pública y mostrar sus resultados en una interfaz moderna.

1. Crear el proyecto con React

Para comenzar, necesitamos tener instalado Node.js. Podemos crear el proyecto utilizando Vite:

npm create vite@latest peliculas-app -- --template react
cd peliculas-app
npm install
npm run dev

Vite creará la estructura básica de nuestra aplicación y podremos visualizarla desde el navegador.

También podemos instalar una librería como Axios para realizar peticiones HTTP:

npm install axios

2. Elegir una API de películas

Una opción muy utilizada para este tipo de proyectos es The Movie Database (TMDB), que proporciona información sobre películas, actores, géneros, imágenes y más.

Después de crear una cuenta en TMDB podemos obtener una API Key que utilizaremos para realizar nuestras solicitudes.

Una petición puede tener una estructura similar a:

https://api.themoviedb.org/3/search/movie?api_key=TU_API_KEY&query=Batman

La API devolverá información en formato JSON que React podrá procesar.

3. Crear el componente principal

Podemos comenzar creando un estado para almacenar las películas y otro para controlar el texto de búsqueda:

import { useState } from "react";
import axios from "axios";

function App() {
  const [peliculas, setPeliculas] = useState([]);
  const [busqueda, setBusqueda] = useState("");

  const buscarPeliculas = async () => {
    if (!busqueda.trim()) return;

    const respuesta = await axios.get(
      "https://api.themoviedb.org/3/search/movie",
      {
        params: {
          api_key: "TU_API_KEY",
          query: busqueda,
          language: "es-ES"
        }
      }
    );

    setPeliculas(respuesta.data.results);
  };

  return (
    <div>
      <h1>Buscador de películas</h1>

      <input
        type="text"
        value={busqueda}
        onChange={(e) => setBusqueda(e.target.value)}
        placeholder="Buscar película..."
      />

      <button onClick={buscarPeliculas}>
        Buscar
      </button>

      {peliculas.map((pelicula) => (
        <div key={pelicula.id}>
          <h2>{pelicula.title}</h2>
          <p>{pelicula.overview}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

Aquí podemos observar uno de los conceptos más importantes de React: el estado. Cuando modificamos peliculas mediante setPeliculas, React vuelve a renderizar automáticamente la interfaz.

4. Mostrar las portadas

Una aplicación de películas necesita ser visualmente atractiva. TMDB proporciona la ruta de las imágenes, por lo que podemos construir la URL utilizando poster_path.

{peliculas.map((pelicula) => (
  <article className="pelicula" key={pelicula.id}>
    {pelicula.poster_path && (
      <img
        src={`https://image.tmdb.org/t/p/w500${pelicula.poster_path}`}
        alt={pelicula.title}
      />
    )}

    <h2>{pelicula.title}</h2>
    <p>{pelicula.release_date}</p>
  </article>
))}

Después podemos utilizar CSS o Tailwind CSS para crear una cuadrícula de tarjetas:

.contenedor-peliculas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.pelicula img {
  width: 100%;
  border-radius: 10px;
}

5. Separar la aplicación en componentes

A medida que el proyecto crece, no es recomendable colocar todo dentro de App.jsx. Podemos crear componentes reutilizables:

src/
├── components/
│   ├── Buscador.jsx
│   ├── PeliculaCard.jsx
│   └── PeliculaGrid.jsx
├── App.jsx
└── main.jsx

Por ejemplo, PeliculaCard puede encargarse exclusivamente de mostrar la información de una película.

Esto hace que el código sea más organizado, reutilizable y fácil de mantener.

6. Agregar estados de carga y errores

Una aplicación real también debe informar al usuario cuando está esperando una respuesta o cuando ocurre un problema.

Podemos crear:

const [cargando, setCargando] = useState(false);
const [error, setError] = useState("");

Y controlar estos estados durante la petición:

try {
  setCargando(true);
  setError("");

  const respuesta = await axios.get(...);

  setPeliculas(respuesta.data.results);
} catch {
  setError("No se pudieron cargar las películas.");
} finally {
  setCargando(false);
}

Después podremos mostrar mensajes como “Cargando…”, “No se encontraron resultados” o “Ocurrió un error”.

7. Ideas para mejorar el proyecto

Una vez funcionando el buscador, podemos agregar nuevas funcionalidades:

• ⭐ Sistema de favoritos.
• 🎬 Página con detalles de cada película.
• 🔎 Búsqueda por título.
• 🎭 Filtro por género.
• 📅 Películas populares y próximas a estrenarse.
• 🌙 Modo oscuro.
• 📱 Diseño responsive.
• 🎞️ Trailers de YouTube.
• 📄 Paginación de resultados.
• 💾 Guardar favoritos en localStorage.

Crear una aplicación de películas con React y una API pública es un excelente proyecto para pasar de ejercicios básicos a una aplicación más cercana a un proyecto real.

Durante el desarrollo practicamos componentes, props, estado, eventos, peticiones HTTP, APIs REST, renderizado de listas, manejo de errores y diseño responsive.

Además, el proyecto puede crecer progresivamente hasta convertirse en una plataforma completa de películas con favoritos, categorías, detalles, trailers y autenticación.

Lo más importante no es solamente conseguir que las películas aparezcan en pantalla, sino aprender cómo React se comunica con servicios externos y cómo transformar los datos recibidos de una API en una interfaz interactiva.