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!
