Tutorial CRUD usando Node JS, Express, React JS y

MySQL (Full-Stack) (https://m�kri.com/blog/node-

express-react-mysql)
 14 DE SEPTIEMBRE DE 2021  M FIKRI SETIADI  REACCIONARJS (HTTPS://MFIKRI.COM/EN/CATEGORY/REACTJS)  23,045 VISTAS
 5 COMENTARIOS

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

En este tutorial, aprenderá cómo crear una aplicación CRUD de pila completa utilizando node.js, express, MySQL y
React JS.

No solo eso,

En este tutorial, también aprenderá a usar Bulma CSS para diseñar la interfaz.

Por lo tanto, la aplicación que se crea se vuelve más fácil de usar con una interfaz de usuario (UI) elegante y receptiva.

Este no es un tutorial para principiantes,

Si es un novato en node.js express, le sugiero que primero aprenda el " Tutorial de Express Js para principiantes
(https://m�kri.com/en/blog/express-tutorial-beginners) ".

Y si eres nuevo en React JS, te sugiero que primero aprendas el " Tutorial de React Js para principiantes
(https://m�kri.com/en/blog/reactjs-beginners) ".
 Empecemos.

Tutorial LENGKAP CRUD dengan Node JS, Express, React JS, dan MySQL (Full Stack)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

#1. Instalar: Express, MySQL2, Nodemon y Cors

Crea una carpeta en tu computadora, aquí la nombré “ fullstack ”.

Si crea una carpeta con el mismo nombre, eso es aún mejor.

Puede crearlo en cualquier lugar, ya sea en C, D o en el escritorio.

Luego abra la carpeta " fullstack " usando el editor de código, aquí uso Visual Studio Code .

También te sugiero que uses Visual Studio Code .

Puede descargar Visual Studio Code en el siguiente enlace y luego instalarlo en su computadora:

https://code.visualstudio.com/ (https://code.visualstudio.com/)

Después de abrir la carpeta " fullstack " con Visual Studio Code, cree una subcarpeta llamada " backend " dentro de la

carpeta " fullstack ".

A continuación, abra una terminal en Visual Studio Code en la barra de menú terminal => nueva terminal.
 Luego, ve a la carpeta “ backend ” escribiendo el siguiente comando en la terminal:

1
cd backend

Después de eso, escriba el siguiente comando en la terminal para crear un " paquete.json ": archivo

1
npm init -y

A continuación, instale express , mysql2 , sequelize y cors escribiendo el siguiente comando en la terminal:

1
npm install express mysql2 sequelize cors

A continuación, instale nodemon como una dependencia de desarrollo escribiendo el siguiente comando en la
https://www.facebook.com
terminal:
/sharer.php?u=https
https://twitter.com
%3A%2F 1
/home?status=CRUD%20Tutorial%20using%20Node%20JS
npm install --save-dev nodemon
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
A continuación, agregue el siguiente código al " paquete.json
%2C%20and%20MySQL%20(Full- ": archivo
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F 1
%2C%20Express "type": "module",
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-
Entonces, el archivo " paquete.json " se parece a lo siguiente:

1
2 {
3   "name": "backend",
4   "version": "1.0.0",
5   "description": "",
6   "type": "module",
7   "main": "index.js",
8   "scripts": {
9     "test": "echo "Error: no test specified" && exit 1"
10   },
11   "keywords": [],
12   "author": "",
13   "license": "ISC",
14   "dependencies": {
15     "cors": "^2.8.5",
16     "express": "^4.17.1",
17     "mysql2": "^2.3.0",
18     "sequelize": "^6.6.5"
19   },
20   "devDependencies": {
21     "nodemon": "^2.0.12"
22   }
}

Esto es para que podamos usar la sintaxis del módulo ES6 para exportar e importar módulos.

#2. Crear base de datos y tabla.

Para poder usar MySQL, debe instalar XAMPP, WAMP, MAMP o un software similar.

En este tutorial, estoy usando XAMPP (https://www.apachefriends.org/index.html) .

Luego cree una nueva base de datos en MySQL, puede usar herramientas como SQLyog, PHPMyAdmin o herramientas

similares.
 Aquí creo una base de datos con el nombre " mern_db ".

Si crea una base de datos con el mismo nombre, eso es aún mejor.

Para crear una base de datos en MySQL, se puede hacer ejecutando la siguiente consulta:

1
CREATE DATABASE mern_db;

El comando SQL anterior creará una base de datos con el nombre " mern_db ".

A continuación, cree una tabla en la base de datos " mern_db ".

https://www.facebook.com
Aquí creo una tabla con el nombre " productos ".
/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
Si crea una tabla con el mismo nombre, eso es aún mejor.
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Para crear una tabla de " productos ", se puede hacer ejecutando
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode- el siguiente comando SQL:
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
1
2 CREATE TABLE products(
%2C%20and%20MySQL%20(Full-
3 id INT(11) PRIMARY KEY AUTO_INCREMENT,
4 title VARCHAR(200),
5 price DOUBLE,
6 createdAt DATE,
7 updatedAt DATE
)ENGINE=INNODB;

El comando SQL anterior creará una tabla llamada "productos" con campos: id , título , precio , createdAt y updatedAt .

Sequelize requiere que tenga campos: id , createdAt y updatedAt .

Si no tiene ese campo, habrá un error.

#3. Estructura de la aplicación

Para que la aplicación esté más estructurada, aplicaremos el patrón MVC (Model-View-Controllers).

Cree las carpetas " con�g ", " controllers ", " models " y " routes " en la carpeta " backend ".

Luego cree un " base archivo de datos.js" en la carpeta " con�g ", cree un archivo " Productos.js " en la carpeta "
controladores ", cree un archivo " productModel.js " en la carpeta " modelos ", cree un " índice .js ” en la carpeta “ routes
”, y cree el archivo “ index.js ” en la carpeta “ backend ”.

Mira la siguiente imagen para más detalles:

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

#4. Conectar a la base de datos

Abra el base archivo " de datos.js" en la carpeta " con�g ", luego escriba el siguiente código:

1
2 import { Sequelize } from "sequelize";
3  
4 const db = new Sequelize('mern_db', 'root', '', {
5     host: "localhost",
6     dialect: "mysql"
7 });
8  
export default db;

#5. Modelos

Abra el archivo del modelo " productModel.js " que se encuentra en la carpeta " modelos ", luego escriba el siguiente
código:
 1
2 import { Sequelize } from "sequelize";
3 import db from "../config/database.js";
4  
5 const { DataTypes } = Sequelize;
6  
7 const Product = db.define('products',{
8     title:{
9         type: DataTypes.STRING
10     },
11     price:{
12         type: DataTypes.DOUBLE
13     }
14 },{
15     freezeTableName: true
16 });
17  
export default Product;

https://www.facebook.com
#6. Controladores
/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
Abra el archivo del controlador " Productos.js
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
" que se encuentra en la carpeta " controladores ", luego escriba el
https://plus.google.com
%2C%20React%20JS
siguiente código:
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-
 1
2 import Product from "../models/productModel.js";
3  
4 export const getAllProducts = async (req, res) => {
5     try {
6         const products = await Product.findAll();
7         res.json(products);
8     } catch (error) {
9         res.json({ message: error.message });
10     } 
11 }
12  
13 export const getProductById = async (req, res) => {
14     try {
15         const product = await Product.findAll({
16             where: {
17                 id: req.params.id
18             }
19         });
20         res.json(product[0]);
21     } catch (error) {
22         res.json({ message: error.message });
23     } 
}
https://www.facebook.com
24
25  
26 export const createProduct = async (req, res) => {
/sharer.php?u=https
https://twitter.com     try {
27
%3A%2F 28         await Product.create(req.body);
/home?status=CRUD%20Tutorial%20using%20Node%20JS
29         res.json({
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express             "message": "Product Created"
https://plus.google.com
30
%2C%20React%20JS
31
/share?url=https         });
32     } catch (error) {
%2C%20and%20MySQL%20(Full-
%3A%2F         res.json({ message: error.message });
Stack)%20https33
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
34     } 
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F 35 }
%2C%20Express  
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
36
%2C%20React%20JS
37 export const updateProduct = async (req, res) => {
38     try {
%2C%20and%20MySQL%20(Full-
39         await Product.update(req.body, {
40             where: {
41                 id: req.params.id
42             }
43         });
44         res.json({
45             "message": "Product Updated"
46         });
47     } catch (error) {
48         res.json({ message: error.message });
49     } 
50 }
51  
52 export const deleteProduct = async (req, res) => {
53     try {
54         await Product.destroy({
55             where: {
56                 id: req.params.id
57             }
58         });
59         res.json({
60             "message": "Product Deleted"
61         });
62     } catch (error) {
63         res.json({ message: error.message });
64     } 
}

#7. Rutas

Abra el archivo “ index.js ” ubicado en la carpeta “ routes ”, luego escriba el siguiente código:
 1
2 import express from "express";
3  
4 import {
5     getAllProducts,
6     createProduct,
7     getProductById,
8     updateProduct,
9     deleteProduct
10 } from "../controllers/Products.js";
11  
12 const router = express.Router();
13  
14 router.get('/', getAllProducts);
15 router.get('/:id', getProductById);
16 router.post('/', createProduct);
17 router.patch('/:id', updateProduct);
18 router.delete('/:id', deleteProduct);
19  
export default router;

 
https://www.facebook.com

#8. Punto de entrada

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
Abra el archivo “ index.js ” ubicado en la carpeta “ backend ”, luego escriba el
%2C%20React%20JS
/share?url=https siguiente código:
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F 1
%2C%20Express 2 import express from "express";
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
3 import db from "./config/database.js";
%2C%20React%20JS import productRoutes from "./routes/index.js";
4
%2C%20and%20MySQL%20(Full-
5 import cors from "cors";
6  
7 const app = express();
8  
9 try {
10     await db.authenticate();
11     console.log('Database connected...');
12 } catch (error) {
13     console.error('Connection error:', error);
14 }
15  
16 app.use(cors());
17 app.use(express.json());
18 app.use('/products', productRoutes);
19  
app.listen(5000, () => console.log('Server running at port 5000'));

Para asegurarse de que la aplicación se ejecute correctamente, ejecútela escribiendo el siguiente comando en la

terminal:

1
nodemon index

Si va bien, se verá como la siguiente imagen:

 Hasta aquí ha creado con éxito un " backend ".

Para asegurarse de que el backend funcione correctamente, puede usar POSTMAN (https://www.postman.com
/downloads/) o las extensiones de cliente REST en VS Code para realizar algunas pruebas.

#9. Interfaz
https://www.facebook.com
Para el front-end, usaré React JS.
/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
Si no está familiarizado con React JS, le sugiero que primero aprenda el " Tutorial de React JS para principiantes
https://plus.google.com
%2C%20React%20JS
/share?url=https
%3A%2F (https://m�kri.com/en/blog/reactjs-beginners) ".
%2C%20and%20MySQL%20(Full-
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
Hay muchas maneras de crear un proyecto React. Sin embargo, la forma más fácil es " crear una aplicación de
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-
reacción ".

Abra una nueva terminal y cree un nuevo proyecto de reacción escribiendo el siguiente comando en la terminal:

1
npx create-react-app frontend

Y asegúrese de estar en la carpeta " fullstack ", como en la siguiente imagen:

Si la instalación está completa, habrá una carpeta " frontend " en la carpeta " fullstack ".

De modo que en la carpeta " fullstack " hay dos carpetas, a saber: " backend " y " frontend " como se muestra a
continuación:
 La carpeta " backend " es la carpeta de la aplicación que se creó previamente con node.js express, mientras que la "

frontend " es la carpeta de la aplicación que se creó con React JS.

A continuación, vaya a la carpeta " frontend " escribiendo el siguiente comando en la terminal:

1
cd frontend
https://www.facebook.com
Después de eso, instala react-router-dom , axios y bulma escribiendo el siguiente comando en la terminal:
/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
1
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express npm install react-router-dom axios bulma
https://plus.google.com
%2C%20React%20JS
/share?url=https
%3A%2F Una vez completada la instalación, y para asegurarse
%2C%20and%20MySQL%20(Full- de que todo vaya bien, escriba el siguiente comando para
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%3A%2F ejecutar el proyecto:
t=CRUD%20Tutorial%20using%20Node%20JS
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
1
%2C%20and%20MySQL%20(Full-
npm start

Si va bien, se verá como la siguiente imagen:

Luego, abra su navegador y visite la siguiente URL:

1
http://localhost:3000 (http://localhost:3000)

Entonces aparecerá de la siguiente manera:

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

#10. Componentes

Cree una carpeta llamada " componentes " dentro de la carpeta " frontend/src ".

Luego, cree los archivos de componentes " ProductList.js ", " AddProduct.js " y " EditProduct.js " en la carpeta "
frontend/src/components ".

Como la siguiente imagen:

 Luego abra el archivo " ProductList.js ", luego escriba el siguiente código:

1
2 import { useState, useEffect } from 'react'
https://www.facebook.com
3 import axios from "axios";
4 import { Link } from "react-router-dom";
5  
/sharer.php?u=https
https://twitter.com
6 const ProductList = () => {
%3A%2F 7     const [products, setProduct] = useState([]);
/home?status=CRUD%20Tutorial%20using%20Node%20JS
 
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
8
%2C%20Express
https://plus.google.com
9     useEffect(() => {
%2C%20React%20JS
10
/share?url=https         getProducts();
    }, []);
%2C%20and%20MySQL%20(Full-
11
%3A%2F
Stack)%20https12  
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
13     const getProducts = async () => {
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
14         const response = await axios.get('http://localhost:5000/products (http://localhost:5000/products)');
%2C%20Express         setProduct(response.data);
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
15
%2C%20React%20JS
16     }
17  
%2C%20and%20MySQL%20(Full-
18     const deleteProduct = async (id) => {
19         await axios.delete(`http://localhost:5000/products/${id}`);
20         getProducts();
21     }
22  
23     return (
24         <div>
25             <Link to="/add" className="button is-primary mt-2">Add New</Link>
26             <table className="table is-striped is-fullwidth">
27                 <thead>
28                     <tr>
29                         <th>No</th>
30                         <th>Title</th>
31                         <th>Price</th>
32                         <th>Actions</th>
33                     </tr>
34                 </thead>
35                 <tbody>
36                     { products.map((product, index) => (
37                         <tr key={ product.id }>
38                             <td>{ index + 1 }</td>
39                             <td>{ product.title }</td>
40                             <td>{ product.price }</td>
41                             <td>
42                                 <Link to={`/edit/${product.id}`} className="button is-small is-info">Edit</Link>
43                                 <button onClick={ () => deleteProduct(product.id) } className="button is-small is-danger"
44                             </td>
45                         </tr>
46                     )) }
47                      
48                 </tbody>
49             </table>
50         </div>
51     )
52 }
53  
export default ProductList

A continuación, abra el archivo " AddProduct.js ", luego escriba el siguiente código:
 1
2 import { useState } from 'react'
3 import axios from "axios";
4 import { useHistory } from 'react-router-dom';
5  
6 const AddProduct = () => {
7     const [title, setTitle] = useState('');
8     const [price, setPrice] = useState('');
9     const history = useHistory();
10  
11     const saveProduct = async (e) => {
12         e.preventDefault();
13         await axios.post('http://localhost:5000/products (http://localhost:5000/products)',{
14             title: title,
15             price: price
16         });
17         history.push("/");
18     }
19  
20     return (
21         <div>
22             <form onSubmit={ saveProduct }>
23                 <div className="field">
                    <label className="label">Title</label>
https://www.facebook.com
24
25                     <input
26                         className="input"
/sharer.php?u=https
https://twitter.com                         type="text"
27
%3A%2F 28                         placeholder="Title"
/home?status=CRUD%20Tutorial%20using%20Node%20JS
29                         value={ title }
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express                         onChange={ (e) => setTitle(e.target.value) }
https://plus.google.com
30
%2C%20React%20JS
31
/share?url=https                     />
32                 </div>
%2C%20and%20MySQL%20(Full-
%3A%2F  
Stack)%20https33
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
34                 <div className="field">
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F 35                     <label className="label">Price</label>
%2C%20Express                     <input
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
36
%2C%20React%20JS
37                         className="input"
38                         type="text"
%2C%20and%20MySQL%20(Full-
39                         placeholder="Price"
40                         value={ price }
41                         onChange={ (e) => setPrice(e.target.value) }
42                     />
43                 </div>
44  
45                 <div className="field">
46                     <button className="button is-primary">Save</button>
47                 </div>
48             </form>
49         </div>
50     )
51 }
52  
export default AddProduct

A continuación, abra el archivo " EditProduct.js ", luego escriba el siguiente código:
 1
2 /* eslint-disable react-hooks/exhaustive-deps */
3 import { useState, useEffect } from 'react'
4 import axios from "axios";
5 import { useHistory, useParams } from 'react-router-dom';
6  
7 const EditProduct = () => {
8     const [title, setTitle] = useState('');
9     const [price, setPrice] = useState('');
10     const history = useHistory();
11     const { id } = useParams();
12  
13     const updateProduct = async (e) => {
14         e.preventDefault();
15         await axios.patch(`http://localhost:5000/products/${id}`,{
16             title: title,
17             price: price
18         });
19         history.push("/");
20     }
21  
22     useEffect(() => {
23         getProductById();
    }, []);
https://www.facebook.com
24
25  
26     const getProductById = async () => {
/sharer.php?u=https
https://twitter.com         const response = await axios.get(`http://localhost:5000/products/${id}`);
27
%3A%2F 28         setTitle(response.data.title);
/home?status=CRUD%20Tutorial%20using%20Node%20JS
29         setPrice(response.data.price);
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express     }
https://plus.google.com
30
%2C%20React%20JS
31
/share?url=https  
32     return (
%2C%20and%20MySQL%20(Full-
%3A%2F         <div>
Stack)%20https33
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
34             <form onSubmit={ updateProduct }>
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F 35                 <div className="field">
%2C%20Express                     <label className="label">Title</label>
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
36
%2C%20React%20JS
37                     <input
38                         className="input"
%2C%20and%20MySQL%20(Full-
39                         type="text"
40                         placeholder="Title"
41                         value={ title }
42                         onChange={ (e) => setTitle(e.target.value) }
43                     />
44                 </div>
45  
46                 <div className="field">
47                     <label className="label">Price</label>
48                     <input
49                         className="input"
50                         type="text"
51                         placeholder="Price"
52                         value={ price }
53                         onChange={ (e) => setPrice(e.target.value) }
54                     />
55                 </div>
56  
57                 <div className="field">
58                     <button className="button is-primary">Update</button>
59                 </div>
60             </form>
61         </div>
62     )
63 }
64  
export default EditProduct

#11 Aplicación.js

Abra el archivo " App.js " en la carpeta " frontend/src ", luego cámbielo a lo siguiente:
 1
2 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
3 import ProductList from "./components/ProductList";
4 import AddProduct from "./components/AddProduct";
5 import EditProduct from "./components/EditProduct";
6  
7 function App() {
8   return (
9     <Router>
10     <div className="container">
11       <div className="columns">
12         <div className="column is-half is-offset-one-quarter">
13           <Switch>
14             <Route exact path="/">
15               <ProductList />
16             </Route>
17             <Route path="/add">
18               <AddProduct />
19             </Route>
20             <Route path="/edit/:id">
21               <EditProduct />
22             </Route>
23           </Switch>
        </div>
https://www.facebook.com
24
25       </div>
26     </div>
/sharer.php?u=https
https://twitter.com     </Router>
27
%3A%2F 28   );
/home?status=CRUD%20Tutorial%20using%20Node%20JS
29 }
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express  
https://plus.google.com
30
%2C%20React%20JS
/share?url=https export default App;
%2C%20and%20MySQL%20(Full-
%3A%2F
 
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
#12. Pruebas
%2C%20and%20MySQL%20(Full-

Regrese al navegador y visite la siguiente URL:

1
http://localhost:3000 (http://localhost:3000)

Si va bien, se verá como la siguiente imagen:

 Haga clic en el botón " Agregar nuevo ", aparecerá un formulario como el siguiente:

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
Ingrese " Título " y " Precio ", luego haga clic
%2C%20and%20MySQL%20(Full- en el botón " GUARDAR ".

Si la inserción es exitosa, verá la adición de datos a la lista de productos como se muestra a continuación:
 Para actualizar los datos, haga clic en uno de los " Editar ", aparecerá un formulario como el siguiente: botones

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

Cambie el " Título " o el " Precio ", luego haga clic en el botón " ACTUALIZAR ".

Si la actualización es exitosa, verá cambios en los datos en la lista de productos como se muestra a continuación:
 Para eliminar datos, haga clic en uno de los " Eliminar ". botones

Si la eliminación es exitosa, los datos se perderán de la lista de productos.

Conclusión:
https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F La discusión esta vez es cómo crear una aplicación de pila completa con un node.js express en el backend y un
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
frontend usando React JS.
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
De esa manera, tendrá una idea de cómo crear una aplicación web moderna que separe el backend y el frontend.
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
Entonces, ¿qué estás esperando? ¡Vamos a codi�car!
%2C%20and%20MySQL%20(Full-

 DESCARGAR CÓDIGO FUENTE (HTTPS://PASSIONEAGLE.COM/DL/MTYZ)

BUSCAR 

ÚLTIMOS ARTÍCULOS

(https://mfikri.com/en/blog/express-mysql-react) Tutorial CRUD usando Node JS, Express, React JS y MongoDB (MERN
Stack) (https://mfikri.com/en/blog/express-mysql-react)
M Fikri Setiadi 21 de septiembre

(https://mfikri.com/en/blog/express-reactjs-mysql) Tutorial CRUD usando Node JS, Express, React JS y MySQL

(ACTUALIZADO) (https://mfikri.com/en/blog/express-reactjs-mysql)
M Fikri Setiadi 09 de septiembre

(https://mfikri.com/en/blog/react-express-mysql-authentication) Regístrese e inicie sesión con autenticación JWT

(React JS + Express + MySQL + Node JS) (https://mfikri.com/en/blog/react-express-mysql-authentication)
M Fikri Setiadi 23 de diciembre

(https://mfikri.com/en/blog/react-crud-codeigniter) Tutorial completo de CRUD CodeIgniter 4 y React JS (Full-Stack)

(https://mfikri.com/en/blog/react-crud-codeigniter)
M Fikri Setiadi 09 de octubre

(https://mfikri.com/en/blog/reactjs-beginners) Tutorial de React JS para principiantes (React Hooks) (https://mfikri.com

/en/blog/reactjs-beginners)
M Fikri Setiadi 09 de septiembre

(https://mfikri.com/en/blog/codeigniter-login-jwt) CodeIgniter 4 Inicie sesión y regístrese con JWT (JSON Web Token)
(https://mfikri.com/en/blog/codeigniter-login-jwt)
M Fikri Setiadi 01 de septiembre
 (https://mfikri.com/en/blog/codeigniter-vuejs-crud) Tutorial completo de CRUD CodeIgniter 4 y Vue JS (pila completa)
(https://mfikri.com/en/blog/codeigniter-vuejs-crud)
M Fikri Setiadi 28 de agosto

(https://mfikri.com/en/blog/restful-api-express-mongodb) Cómo crear una API RESTful con Node js, Express y
MongoDB (https://mfikri.com/en/blog/restful-api-express-mongodb)
M Fikri Setiadi 29 de julio

(https://mfikri.com/en/blog/vuejs-tutorial-beginners) Consulte el tutorial de JS 3 para principiantes (API de opciones)

(https://mfikri.com/en/blog/vuejs-tutorial-beginners)
M Fikri Setiadi 08 de julio

(https://mfikri.com/en/blog/restful-api-express-sequelize) Cómo crear una API RESTful usando Node.js Express y

Sequelize (https://mfikri.com/en/blog/restful-api-express-sequelize)
M Fikri Setiadi 07 de mayo

https://www.facebook.com

/sharer.php?u=https
MÁS POPULAR
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com (https://mfikri.com/en/blog/react-express-mysql-authentication) Regístrese e inicie sesión con autenticación JWT
%2C%20React%20JS
/share?url=https (React JS + Express + MySQL + Node JS) (https://mfikri.com/en/blog/react-express-mysql-authentication)
%2C%20and%20MySQL%20(Full-
%3A%2F M Fikri Setiadi 23 de diciembre
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express (https://mfikri.com/en/blog/react-crud-codeigniter) Tutorial completo de CRUD CodeIgniter 4 y React JS (Full-Stack)
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS (https://mfikri.com/en/blog/react-crud-codeigniter)
%2C%20and%20MySQL%20(Full-M Fikri Setiadi 09 de octubre

(https://mfikri.com/en/blog/reactjs-beginners) Tutorial de React JS para principiantes (React Hooks) (https://mfikri.com

/en/blog/reactjs-beginners)
M Fikri Setiadi 09 de septiembre

(https://mfikri.com/en/blog/express-reactjs-mysql) Tutorial CRUD usando Node JS, Express, React JS y MySQL

(ACTUALIZADO) (https://mfikri.com/en/blog/express-reactjs-mysql)
M Fikri Setiadi 09 de septiembre

(https://mfikri.com/en/blog/express-mysql-react) Tutorial CRUD usando Node JS, Express, React JS y MongoDB (MERN
Stack) (https://mfikri.com/en/blog/express-mysql-react)
M Fikri Setiadi 21 de septiembre

TUTORIALES EN VÍDEO:
 (https://youtu.be/OQspok-swzY)

Tutorial CRUD en tiempo real usando Node, Express, React, MySQL (Prisma + SWR) (https://youtu.be/OQspok-swzY)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

(https://youtu.be/OJU0L9D-Zdo)

Inicio de sesión multiusuario con Node JS, Express, MySQL y React JS (https://youtu.be/OJU0L9D-Zdo)
 (https://youtu.be/Gv_A7jHsMmk)

Cómo crear desplazamiento infinito con Node JS, Express, React JS, MySQL (pila completa) (https://youtu.be
/Gv_A7jHsMmk)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

(https://youtu.be/XkRkUSkEgxI)

Búsqueda y paginación con Node, Express, React, MySQL (mejores prácticas) (https://youtu.be/XkRkUSkEgxI)
 (https://youtu.be/jPjPGAQOMac)

CRUD + Tutorial de imágenes con Node JS, Express, React JS y MYSQL (MERN STACK) (https://youtu.be/jPjPGAQOMac)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-
https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

(https://www.hostg.xyz/SH96M)

Recomendado para ti:

1:14:22
 (https://youtu.be/OQspok-swzY)

Tutorial CRUD en tiempo real usando Node, Express, React, MySQL (Prisma + SWR) (https://youtu.be/OQspok-swzY)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

3:41:16
(https://youtu.be/OJU0L9D-Zdo)

Inicio de sesión multiusuario con Node JS, Express, MySQL y React JS (https://youtu.be/OJU0L9D-Zdo)

49:42
 (https://youtu.be/Gv_A7jHsMmk)

Cómo crear desplazamiento infinito con Node JS, Express, React JS, MySQL (pila completa) (https://youtu.be
/Gv_A7jHsMmk)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

1:08:55
(https://youtu.be/XkRkUSkEgxI)

Búsqueda y paginación con Node, Express, React, MySQL (mejores prácticas) (https://youtu.be/XkRkUSkEgxI)

1:22:51
 (https://youtu.be/jPjPGAQOMac)

CRUD + Tutorial de imágenes con Node JS, Express, React JS y MYSQL (MERN Stack) (https://youtu.be/jPjPGAQOMac)

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2Fmfikri.com%2Fen%2Fblog%2Fnode-
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-

1:03:00
(https://youtu.be/es9_6RFR7wk)

Tutorial FULL CRUD con Node JS, Express, React JS y MySQL (Full Stack) (https://youtu.be/es9_6RFR7wk)

COMENTARIOS (5)

PRAMILA VIBHUTE, 11 DE MARZO DE 2022 16:08 -

gracias señor... pasos muy sencillos señor...

PRAMILA VIBHUTE, 16 DE MARZO DE 2022 14:44 -

gracias Señor ..

DAVID, 25 DE MARZO DE 2022 05:20 -

Deberá actualizar el enrutador a la última versión y realizar los cambios necesarios.

MONTE ADALBERTO, 01 ABRIL 2022 02:15 -

¡¡¡Excelente!!! Gracias

RISHABH, 24 DE MAYO DE 2022 00:57 -

necesita código frontend archivo css código frontend no existe en github

 DEJA UN COMENTARIO

NOMBRE

DIRECCIÓN DE CORREO ELECTRÓNICO

COMENTARIO

SEND COMMENT

https://www.facebook.com

/sharer.php?u=https
https://twitter.com
%3A%2F
/home?status=CRUD%20Tutorial%20using%20Node%20JS
%2Fmfikri.com%2Fen%2Fblog%2Fnode- Copyright © 2017-2022 by mfikri.com (https://mfikri.com/) | All Right Reserved
%2C%20Express
https://plus.google.com
%2C%20React%20JS
/share?url=https
%2C%20and%20MySQL%20(Full-     
%3A%2F
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode- (https://www.facebook.com
(https://www.instagram.com
(https://twitter.com
(https://plus.google.com
(https://id.pinterest.com
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express English (EN) (https://mfikri.com/en/blog/) | Indonesia (ID) (https://mfikri.com/blog/) /mfikridotcom/)
%2Fmfikri.com%2Fen%2Fblog%2Fnode- /mfikricom/)
/MFikri75770694/)
/u/0/+mfikri/)
/mfikricom/)
%2C%20React%20JS
%2C%20and%20MySQL%20(Full-