Tutorial - Aprende a guardar/enviar datos de un formulario en React (FrontEnd) a Node.js (Backend)
En el día aprenderemos a guardar / enviar los datos de un formulario elaborado en React hacia nuestro backend creado en Node.js
En primera instancia crearemos una carpeta en nuestro escritorio llamado app/ dentro ocuparemos dos carpetas más llamada backend/ y frontent/
Node.js y MongoDB
En nuestra carpeta backend iniciaremos la terminal y escribiremos en ella:
npm init --yes
Instalaremos los siguientes módulos:
npm i express cors mongoose morgan
npm i @babel/core @babel/node @babel/cli @babel/preset-env nodemon -D
Crearemos un archivo .babelrc con el siguiente contenido:
{
"presets" : [
"@babel/env"
]
}
Modificaremos el package.json con los siguientes scripts :
"scripts": {
"dev": "nodemon src/index --exec babel-node",
"build": "babel src --out-dir build",
"start": "babel-node src/index.js"
}
Crearemos la siguiente estructura para nuestro backend dentro de una carpeta src/ que contendrá todo nuestra app:
controllers/
models/
routes/
app.js
index.js
database.js
index.js
import 'dotenv/config'
import app from './app'
app.listen(app.get('PORT'), () => {
console.log('Server on port:',app.get('PORT') )
})
app.js
import express from 'express'
import morgan from 'morgan'
import cors from 'cors'
import routesProduct from './routes/product.routes'
import pkg from '../package.json'
const app = express()
import './database'
app.set('pkg', pkg)
app.set('PORT', process.env.PORT || 3000)
app.use(cors())
app.use(morgan('dev'))
app.use(express.json())
app.use(express.urlencoded({extended: false}))
app.get('/', (req, res) => {
res.json({
'Name':app.get('pkg').name,
'Description': app.get('pkg').description,
"Version" : app.get('pkg').version,
"Author" : app.get('pkg').author
})
})
app.use(routesProduct)
export default app
database.js
import mongoose from 'mongoose'
mongoose.connect('mongodb://localhost:/app/backend', {
useNewUrlParser: true,
useUnifiedTopology: true
}).then( db => console.log('Database is connected...'))
.catch(e => console.log(e))
models/Product.js
import {Schema, model} from 'mongoose'
const productSchema = new Schema({
name: String,
description: String,
brand: String,
price: Number
},{
timestamps:true,
versionKey :false
})
export default model('product', productSchema)
routes/product.routes.js
import {Router} from 'express'
const router = Router()
import * as productCtrl from '../controllers/product.controller'
router.post('/product/', productCtrl.newProduct)
router.get('/product/', productCtrl.getProductAll)
export default router
controllers/product.controller.js
import Product from "../models/Product";
export const newProduct = async (req, res) => {
try {
const { name, description, brand, price } = req.body;
const newProduct = new Product({ name, description, brand, price });
await newProduct.save();
res.status(201).json({ msg: 1 });
} catch (e) {
res.status(400).json({ msg: 2 });
}
};
export const getProductAll = async (req, res) => {
const json = await Product.find().lean()
res.json(json)
}
Probamos nuestro backend/
React.js y Fetch
Ahora nos toca la parte del front para ello nos colocamos dentro de la carpeta frontend/ y en la terminal/ consola escribimos lo siguiente:
npx create-react-app .
Para darle estilo a nuestro formulario usaremos un framework de css llamado bootstrap copiamos la CDN y lo incluimos en nuestro public/index.html justo debajo de nuestro title
public/index.html
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
src/App.js
import { useState } from "react";
import "./App.css";
function App() {
const [product, setProduct] = useState({
name: "",
description: "",
brand: "",
price: "",
});
const [msg, setMsg] = useState({
message: "",
color: "",
visible: "no",
});
const handleChange = (e) => {
const { name, value } = e.target;
setProduct({ ...product, [name]: value });
};
const handleSubmit = async (e) => {
e.preventDefault();
const response = await fetch(`http://localhost:3000/product/`, {
method: "POST",
headers: {
"Content-Type": "Application/json",
},
body: JSON.stringify(product),
});
const content = await response.json();
setMsg(
content.msg === 1
? {
message: "Se ha creado el producto correctamente",
color: "success",
visible: "si",
}
: {
message: "No se ha podido crear el producto",
color: "danger",
visible: "si",
}
);
setProduct({ name: "", description: "", brand: "", price: "" });
};
return (
<>
<div className="container p-4">
<h1 className="text-center">Nuevo Producto</h1>
{msg.visible === "si" ? (
<div className={"alert alert-" + msg.color} role="alert">
{msg.message}
</div>
) : (
``
)}
<div className="row p-4">
<div className="col-7 mx-auto">
<form className="form" onSubmit={handleSubmit} autoComplete="off">
<div className="mb-2">
<input
required
onChange={handleChange}
value={product.name}
autoFocus
className="form-control"
placeholder="Introduzca nombre del producto"
name="name"
/>
</div>
<div className="mb-2">
<textarea
required
onChange={handleChange}
value={product.description}
rows="2"
className="form-control"
name="description"
placeholder="Introduzca la descripcion"
></textarea>
</div>
<div className="mb-2">
<input
required
onChange={handleChange}
value={product.brand}
className="form-control"
placeholder="Introduzca la marca"
name="brand"
/>
</div>
<div className="mb-2">
<input
required
onChange={handleChange}
value={product.price}
className="form-control"
placeholder="Introduzca el precio"
name="price"
/>
</div>
<div className="mb-2 mt-4">
<button className="btn btn-outline-success w-100">
Guardar producto
</button>
</div>
</form>
</div>
</div>
</div>
</>
);
}
export default App;
Comprobamos que nuestro sistema funcione agregando un nuevo producto:
Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!
Visita mi sitio web oficial para presupuestos y mucho más