Rest API CRUD – Node.js + express + React.js + MySQL Part 3: Create App React with Bootstrap

React.js (Frontend)

npx create-react-app appnode
cd appnode
npm start

Install bootstrap

npm install bootstrap

Javascript Bootsrap

npm install jquery popper.js

Componentes

src/App.js

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

import Form from './module/form';
import List from './module/list';
import Edit from './module/edit';

function App() {

  return (
      <div className="App">
        
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="https://www.tutofox.com/" style={{color:'orange',fontWeight:'bold'}}>tutofox.com</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"> Employee List </a>
              </li>
            </ul>
            <a class="btn btn-info "  href="/form">Add Employee</a>
          </div>
        </nav>

        <div class="container py-4">
          <div class="row">

            // Add component list, form, edit.

          </div>
        </div>

      </div>
  );
}

export default App;

src/module/list.js

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

class listComponent extends React.Component  {
  render()
  {
    return (
      <table class="table table-hover table-striped">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">Role</th>
            <th scope="col">Name</th>
            <th scope="col">Email</th>
            <th scope="col">Address</th>
            <th scope="col">Phone</th>
            <th colspan="2">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1</th>
            <td>Admin</td>
            <td>John Smitth</td>
            <td>[email protected]</td>
            <td>California</td>
            <td>317785847</td>
            <td>
              <button class="btn btn-outline-info "> Edit </button>
            </td>
            <td>
              <button class="btn btn-outline-danger "> Delete </button>
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default listComponent;

src/module/form.js

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

class EditComponent extends React.Component{
 render(){
   let userId = 0;
   //let userId = this.props.match.params.employeeId;
   return (
     <form>
       <div class="form-row justify-content-center">
         <div class="form-group col-md-6">
           <label for="inputPassword4">Name {userId}</label>
           <input type="text" class="form-control"  placeholder="Name"/>
         </div>
         <div class="form-group col-md-6">
           <label for="inputEmail4">Email</label>
           <input type="email" class="form-control"  placeholder="Email"/>
         </div>
       </div>
       <div class="form-row">
         <div class="form-group col-md-6">
           <label for="inputState">Role</label>
           <select id="inputState" class="form-control">
             <option selected>Choose...</option>
             <option>...</option>
           </select>
         </div>
         <div class="form-group col-md-6">
           <label for="inputEmail4">Phone</label>
           <input type="number" class="form-control"  placeholder="Email"/>
         </div>
       </div>
       <div class="form-group">
         <label for="inputAddress">Address</label>
         <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"/>
       </div>

       <button type="submit" class="btn btn-primary">Sign in</button>
     </form>
   );
 }
}


export default EditComponent;

src/module/edit.js

import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

class EditComponent extends React.Component{
 render(){
   let userId = 0;
   //let userId = this.props.match.params.employeeId;
   return (
     <form>
       <div class="form-row justify-content-center">
         <div class="form-group col-md-6">
           <label for="inputPassword4">Name {userId}</label>
           <input type="text" class="form-control"  placeholder="Name"/>
         </div>
         <div class="form-group col-md-6">
           <label for="inputEmail4">Email</label>
           <input type="email" class="form-control"  placeholder="Email"/>
         </div>
       </div>
       <div class="form-row">
         <div class="form-group col-md-6">
           <label for="inputState">Role</label>
           <select id="inputState" class="form-control">
             <option selected>Choose...</option>
             <option>...</option>
           </select>
         </div>
         <div class="form-group col-md-6">
           <label for="inputEmail4">Phone</label>
           <input type="number" class="form-control"  placeholder="Email"/>
         </div>
       </div>
       <div class="form-group">
         <label for="inputAddress">Address</label>
         <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"/>
       </div>

       <button type="submit" class="btn btn-primary">Sign in</button>
     </form>
   );
 }
}


export default EditComponent;

React Router

React Router es la solución de enrutamiento para las aplicaciones de React de una sola página. React Router tiene algunas características excelentes que ofrecer y generalmente termino usando React Router para la mayoría de mis aplicaciones de reacción.

npm install react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

Colocar Router fuera de App

<Router>
   // App ...
</Router>

Así es como puede crear rutas utilizando react router

<Route path="/" exact component={List} />
<Route path="/form" component={Form} />
<Route path="/edit/:employeeId" component={Edit} />

La ruta de edit/5 es donde obtiene el parametro de get el id de empleado

// get parameter from edit/:id
let userId = this.props.match.params.employeeId;

Link

<Link class="nav-link" to="/">Manage Employee </Link>
// button of add employe
<Link class="btn btn-info "  to="/form">Add Employee </Link>

Deja una respuesta

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