NodeJS + Express + React Hooks + MySQL – #1 Start

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 --save

React

npm install react react-dom --save

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *