
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;