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: