Node.js / React

NodeJS + Express + React Hooks + MySQL – #2 Views components

- por Artyom - Deja un comentario

NodeJS + Express

Server

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());
 
// Routes
app.use(require("./routes/web"));

// starting the servers
app.listen(app.get('port'),()=>{
  console.log('Server on port 3000');
});

View Ejs

src/views/ejs/customer.ejs

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tutofox.com</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container" style="padding:20px;">
	<h1 style="text-align:center;">
		<a href="/customer"> Full Stack - NodeJS & React Hooks </a>
	</h1>
	<hr>

  <div id="component-main"></div>
  <script src="/dist/main.js"></script>

	<hr>

	<center>
		<p><%= message %></p>
	</center>

</div>
</body>
</html>

Controller

src/controllers/CustomerController.js

const controller = {}

controller.index = (req,res) => {

  const data = {
    message: "Developed by Artyom"
  }
  res.render('customer',data);

};

module.exports = controller;

Routes

src/routes/web.js

const express = require('express');
const router = express.Router();
//import controller
const customerController = require('./../controllers/CustomerController');

router.get('/customer/index', customerController.index );
router.get('/customer/form', customerController.index );
router.get('/customer/list', customerController.index );
router.get('/customer/edit/:id', customerController.index );

module.exports = router;

React JS

React router

npm install react-router-dom

Components

App.js

src/views/js/app.js

import Main from "./components/Main"

Nav

src/views/js/components/Nav.js

import React from 'react';
import { Link } from "react-router-dom";

function Nav(){
  return (
    <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
      <div class="collapse navbar-collapse" >
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <Link class="nav-link" to="/customer/index">List </Link>
          </li>
          <li class="nav-item">
            <Link class="nav-link" to="/customer/form">Create</Link>
          </li>
          <li class="nav-item">
            <Link class="nav-link" to="/customer/edit/5">Edit</Link>
          </li>
        </ul>
      </div>
    </nav>
  )
}


export default Nav;

Main

src/views/js/components/Main.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Nav from "./Nav"
import Form from "./customer/Form"
import List from "./customer/List"
import Edit from "./customer/Edit"

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";

function Main(){
  return (
    <Router>
      <main>
        <Nav/>
        <Switch>
          <Route path="/customer/index" exact component={List} />
          <Route path="/customer/form"  component={Form} />
          <Route path="/customer/edit/:id" component={Edit} />
        </Switch>
      </main>
    </Router>
  )
}

export default Main;

ReactDOM.render(<Main />, document.getElementById('component-main'));

List

src/views/js/components/customer/List.js

import React, { useEffect, useState  } from 'react';

function List(){
  return (
    <section>
      <table class="table">
        <thead class="thead-dark table-bordered">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Address</th>
            <th scope="col">Phone</th>
            <th scope="col">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John Doe</td>
            <td>[email protected]</td>
            <td>California Cll 100</td>
            <td>3101111111</td>
            <td>
              <a href="#" class="btn btn-light"> Edit </a>
              <a href="#" class="btn btn-danger"> Delete </a>
            </td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>John Doe</td>
            <td>[email protected]</td>
            <td>California Cll 100</td>
            <td>3101111111</td>
            <td>
              <a href="#" class="btn btn-light"> Edit </a>
              <a href="#" class="btn btn-danger"> Delete </a>
            </td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>John Doe</td>
            <td>[email protected]</td>
            <td>California Cll 100</td>
            <td>3101111111</td>
            <td>
              <a href="#" class="btn btn-light"> Edit </a>
              <a href="#" class="btn btn-danger"> Delete </a>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  )
}

export default List;

Form

src/views/js/components/customer/Form.js

import React, { useEffect, useState  } from 'react';

function Form(){
  return(
    <div>
      <h4>Form customer</h4>
      <hr/>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Name</label>
          <input type="text" class="form-control" placeholder="Name" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="email">Email</label>
          <input type="email" class="form-control" placeholder="[email protected]" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="address">Address</label>
          <input type="text" class="form-control" placeholder="1234 Main St" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="phone">Phone </label>
          <input type="text" class="form-control" placeholder="123467890" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <button class="btn btn-primary btn-block" type="submit">Save</button>
        </div>
      </div>
    </div>
  )
}

export default Form;

Edit

src/views/js/components/customer/Edit.js

import React, { useEffect, useState  } from 'react';

function Edit(props){

  let userId = props.match.params.id;

  return (
    <div>
      <h4>Edit customer  {userId}  </h4>
      <hr/>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Name</label>
          <input type="text" class="form-control" placeholder="Name"/>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="email">Email</label>
          <input type="email" class="form-control" placeholder="[email protected]" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="address">Address</label>
          <input type="text" class="form-control" placeholder="1234 Main St" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="address">Phone </label>
          <input type="text" class="form-control" placeholder="123467890" />
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 mb-3">
          <button class="btn btn-primary btn-block" type="submit">Save</button>
        </div>
      </div>
    </div>
  )

}

export default Edit;

Artículos relacionados

NodeJS + Express + React Hooks + MySQL – #4 Create

NodeJS + Express + React Hooks + MySQL – #3 Model + Sequelize

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

Acerca de Artyom

Ver todas las entradas de Artyom →

Deja una respuesta

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