Tutorial CRUD Usando Node JS, Express, React JS y MySQL (Full-Stack)

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
t=CRUD%20Tutorial%20using%20Node%20JS
%3A%2F
%2C%20Express
%2C%20React%20JS
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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
#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
terminal:
/sharer.php?u=https
https://twitter.com
%3A%2F 1
npm install --save-dev nodemon
%2C%20Express
%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
%3A%2F 1
%2C%20Express "type": "module",
%2C%20React%20JS
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 ".
Aquí creo una tabla con el nombre " productos ".
/sharer.php?u=https
https://twitter.com
%3A%2F
Si crea una tabla con el mismo nombre, eso es aún mejor.
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Para crear una tabla de " productos ", se puede hacer ejecutando
Stack)%20https
%2Fmfikri.com%2Fen%2Fblog%2Fnode- el siguiente comando SQL:
%3A%2F
%2C%20Express
%2C%20React%20JS
1
2 CREATE TABLE products(
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:

/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
#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;
#6. Controladores
/sharer.php?u=https
https://twitter.com
%3A%2F
Abra el archivo del controlador " Productos.js
%2C%20Express
" que se encuentra en la carpeta " controladores ", luego escriba el
%2C%20React%20JS
siguiente código:
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
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) {
23 }
}
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);
29 res.json({
%2C%20Express "message": "Product Created"
30
%2C%20React%20JS
31
/share?url=https });
%3A%2F res.json({ message: error.message });
Stack)%20https33
34 }
%3A%2F 35 }
%2C%20Express
36
%2C%20React%20JS
37 export const updateProduct = async (req, res) => {
38 try {
39 await Product.update(req.body, {
40 where: {
42 }
43 });
44 res.json({
45 "message": "Product Updated"
46 });
49 }
50 }
51
52 export const deleteProduct = async (req, res) => {
53 try {
54 await Product.destroy({
55 where: {
57 }
58 });
59 res.json({
60 "message": "Product Deleted"
61 });
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;

#8. Punto de entrada

/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
Abra el archivo “ index.js ” ubicado en la carpeta “ backend ”, luego escriba el
%2C%20React%20JS
/share?url=https siguiente código:
%3A%2F
Stack)%20https
%3A%2F 1
%2C%20Express 2 import express from "express";
3 import db from "./config/database.js";
%2C%20React%20JS import productRoutes from "./routes/index.js";
4
5 import cors from "cors";
6
7 const app = express();
8
9 try {
10 await db.authenticate();
11 console.log('Database connected...');
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
Para el front-end, usaré React JS.
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
Si no está familiarizado con React JS, le sugiero que primero aprenda el " Tutorial de React JS para principiantes
%2C%20React%20JS
/share?url=https
%3A%2F (https://m�kri.com/en/blog/reactjs-beginners) ".
Stack)%20https
%3A%2F
%2C%20Express
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
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
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
1
%2C%20Express npm install react-router-dom axios bulma
%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
%3A%2F ejecutar el proyecto:
%2C%20Express
%2C%20React%20JS
1
npm start
Luego, abra su navegador y visite la siguiente URL:
1
http://localhost:3000 (http://localhost:3000)
Entonces aparecerá de la siguiente manera:

/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
#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'
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([]);

8
%2C%20Express
9 useEffect(() => {
%2C%20React%20JS
10
/share?url=https getProducts();
}, []);
11
%3A%2F
Stack)%20https12
13 const getProducts = async () => {
%3A%2F
14 const response = await axios.get('http://localhost:5000/products (http://localhost:5000/products)');
%2C%20Express setProduct(response.data);
15
%2C%20React%20JS
16 }
17
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'
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>
24
25 <input
26 className="input"
/sharer.php?u=https
https://twitter.com type="text"
27
%3A%2F 28 placeholder="Title"
29 value={ title }
%2C%20Express onChange={ (e) => setTitle(e.target.value) }
30
%2C%20React%20JS
31
/share?url=https />
32 </div>
%3A%2F
Stack)%20https33
%3A%2F 35 <label className="label">Price</label>
%2C%20Express <input
36
%2C%20React%20JS
38 type="text"
39 placeholder="Price"
40 value={ price }
41 onChange={ (e) => setPrice(e.target.value) }
42 />
43 </div>
44
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'
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();
}, []);
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);
29 setPrice(response.data.price);
%2C%20Express }
30
%2C%20React%20JS
31
/share?url=https
32 return (
%3A%2F <div>
Stack)%20https33
34 <form onSubmit={ updateProduct }>
%3A%2F 35 <div className="field">
%2C%20Express <label className="label">Title</label>
36
%2C%20React%20JS
37 <input
39 type="text"
40 placeholder="Title"
41 value={ title }
42 onChange={ (e) => setTitle(e.target.value) }
43 />
44 </div>
45
47 <label className="label">Price</label>
48 <input
50 type="text"
51 placeholder="Price"
52 value={ price }
53 onChange={ (e) => setPrice(e.target.value) }
54 />
55 </div>
56
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>
24
25 </div>
26 </div>
/sharer.php?u=https
https://twitter.com </Router>
27
%3A%2F 28 );
29 }
%2C%20Express
30
%2C%20React%20JS
/share?url=https export default App;
%3A%2F

Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
#12. Pruebas
Regrese al navegador y visite la siguiente URL:
1
http://localhost:3000 (http://localhost:3000)

Haga clic en el botón " Agregar nuevo ", aparecerá un formulario como el siguiente:
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%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
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
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:
/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
frontend usando React JS.
%2C%20Express
%2C%20React%20JS
/share?url=https
%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.
%3A%2F
%2C%20Express
%2C%20React%20JS
Entonces, ¿qué estás esperando? ¡Vamos a codi�car!
 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)
(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)
(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)
(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
/sharer.php?u=https
MÁS POPULAR
https://twitter.com
%3A%2F
%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)
%3A%2F M Fikri Setiadi 23 de diciembre
Stack)%20https
%3A%2F
%2C%20Express (https://mfikri.com/en/blog/react-crud-codeigniter) Tutorial completo de CRUD CodeIgniter 4 y React JS (Full-Stack)
%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)
(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)
(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)
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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
(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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
(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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
(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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
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)
/sharer.php?u=https
https://twitter.com
%3A%2F
%2C%20Express
%2C%20React%20JS
/share?url=https
%3A%2F
Stack)%20https
%3A%2F
%2C%20Express
%2C%20React%20JS
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
/sharer.php?u=https
https://twitter.com
%3A%2F
%2Fmfikri.com%2Fen%2Fblog%2Fnode- Copyright © 2017-2022 by mfikri.com (https://mfikri.com/) | All Right Reserved
%2C%20Express
%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
%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

Tutorial CRUD Usando Node JS, Express, React JS y MySQL (Full-Stack)

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial CRUD Usando Node JS, Express, React JS y MySQL (Full-Stack)

Cargado por

Copyright:

Formatos disponibles

Tutorial CRUD usando Node JS, Express, React JS y

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

Este no es un tutorial para principiantes,

#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.

También te sugiero que uses Visual Studio Code .

carpeta " fullstack ".

#2. Crear base de datos y tabla.

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

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

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

Si no tiene ese campo, habrá un error.

#3. Estructura de la aplicación

Mira la siguiente imagen para más detalles:

#4. Conectar a la base de datos

#8. Punto de entrada

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

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

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

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

Luego, abra su navegador y visite la siguiente URL:

Entonces aparecerá de la siguiente manera:

Como la siguiente imagen:

Regrese al navegador y visite la siguiente URL:

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

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

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

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

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

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

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

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

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

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

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

Recomendado para ti:

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 -

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 -

RISHABH, 24 DE MAYO DE 2022 00:57 -

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

DIRECCIÓN DE CORREO ELECTRÓNICO

También podría gustarte