CRUD de películas en React JS con Mongoose y Bootstrap

En este artículo, vamos a explorar cómo crear un CRUD (Create, Read, Update, Delete) de películas utilizando React JS, Mongoose (biblioteca de modelado de objetos de MongoDB) y Bootstrap (framework de diseño de sitios web).

Crear una base de datos MongoDB


// Conectar a la base de datos
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/peliculas', { useNewUrlParser: true, useUnifiedTopology: true });


Crear un modelo de película con Mongoose


const mongoose = require('mongoose');

const peliculaSchema = new mongoose.Schema({
titulo: String,
duracion: Number,
director: String,
año: Number
});

const Pelicula = mongoose.model('Pelicula', peliculaSchema);


Crear un componente de películas en React JS


import React, { useState, useEffect } from 'react';

const Peliculas = () => {
const [peliculas, setPeliculas] = useState([]);

useEffect(() => {
// Código para obtener todas las películas de la base de datos
}, []);

return (

Listado de películas:

{peliculas.map(pelicula => (
• {pelicula.titulo} - {pelicula.director}

))}

);
};

export default Peliculas;


Implementar funcionalidad CRUD


// Crear una nueva película
const nuevaPelicula = new Pelicula({
titulo: 'The Shawshank Redemption',
duracion: 142,
director: 'Frank Darabont',
año: 1994
});
nuevaPelicula.save();

// Actualizar una película existente
Pelicula.findOneAndUpdate({ titulo: 'The Shawshank Redemption' }, { año: 1995 });

// Eliminar una película
Pelicula.findOneAndDelete({ titulo: 'The Shawshank Redemption' });


Estilizar el componente con Bootstrap


import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
return (

);
};

export default App;


¡Con estos pasos, has creado un CRUD de películas en React JS utilizando Mongoose y Bootstrap! ¡Espero que te haya resultado útil este tutorial!