NodeJS + Express
Crear un proyecto y instalar express, ejs, nodemon y path. Ejecutar comando por cada linea
// create folder project
mkdir node-react
// start node
npm init -y
// install framework express
npm install express --save
// install engine view
npm install ejs --save
// install nodemon
npm install -g nodemon
// intall for get location file
npm install path --save Server
Crear un archivo llamado server.js y esta ubicado en src/server.js
const express = require('express');
const app = express();
const path = require('path');
// configuracion del puertos
app.set('port', process.env.PORT || 3000);
// motor de plantillas como ejs
app.set('view engine','ejs');
// configuar que la vista esta en la carpeta views
app.set('views',path.join(__dirname,'views/ejs'));
// static files - archivos estatico
app.use(express.static(path.join(__dirname,'../public')))
// parse application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: false }))
// parse application/json
app.use(express.json());
app.get('/test', (req, res) => {
res.json({
"message": "Hello world"
});
});
// views ejs
app.get('/test2', (req, res) => {
res.render('index');
});
// starting the servers
app.listen(app.get('port'),()=>{
console.log('Server on port 3000');
});
View Ejs
src/views/ejs/index.ejs
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>Hello World from server Nodejs</h2>
<div id="component-example"></div>
<script src="dist/main.js"></script>
</body>
</html>React.js
Babel
npm install @babel/core @babel/preset-env @babel/preset-react babel-loader --saveReact
npm install react react-dom --saveApp.js
src/views/js/app.js
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
<h1>I'm an component React.js</h1>
);
}
export default Example;
if (document.getElementById('component-example')) {
ReactDOM.render(<Example />, document.getElementById('component-example'));
}
Webpack
npm install path webpack webpack-cli webpack.config.js
var path = require('path');
module.exports = {
entry: './src/views/js/app.js',
output: {
path: path.resolve(__dirname, 'public/dist'),
filename: '[name].js'
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
}
}
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon src/server.js",
"build": "webpack --config webpack.config.js",
"app": "webpack --watch"
},Tutorial Part
#2 Views component
https://www.tutofox.com/nodejs/nodejs-express-react-hooks-mysql-2-views-components/
#3 Migration & Model
https://www.tutofox.com/nodejs/nodejs-express-react-hooks-mysql-3-model-sequelize/
#4 Create
https://www.tutofox.com/nodejs/nodejs-express-react-hooks-mysql-4-create/
#5 List
Proximamente
#6 Edit
Proximamente
#7 Update
Proximamente
#7 Update
Proximamente
