ReactJS Hooks + Laravel 8 + MySQL + API REST CRUD #1 Starter

Laravel

Creat proyecto / Create project
composer create-project --prefer-dist laravel/laravel react-laravel
Instalar UI / Install UI
composer require laravel/ui
React
// Generate basic scaffolding...
php artisan ui react
npm install
sudo npm run watch-poll
Blade
resources/views/employee.blade.php
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Welcome to CodeIgniter 4 + React.js!</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<style> .navbar{margin-bottom: 20px;} </style>
</head>
<body>
<div class="container" style="padding:20px;">
	<h1 style="text-align:center;">
		<a href="/employee"> Full Stack - Laravel 8 & React Hooks </a>
	</h1>
	<hr>

  <div id="main-employee"></div>
  <script src="/js/app.js"></script>

</div>
</body>
</html>
Controller
app/Http/Controllers/EmployeeController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class EmployeeController extends Controller
{
    public function index(){
      return view("employee");
    }
}
Route
app/Http/Controllers/EmployeeController.php
Route::get('/employee', 'App\Http\Controllers\[email protected]');
Route::get('/employee/index', 'App\Http\Controllers\[email protected]');
Route::get('/employee/list', 'App\Http\Controllers\[email protected]');
Route::get('/employee/form', 'App\Http\Controllers\[email protected]');
Route::get('/employee/edit/{num}', 'App\Http\Controllers\[email protected]');

ReactJS

React router

npm install react-router-dom
Nav
resources/js/components/Nav.js
import React, { Component } from 'react';
import { Link } from "react-router-dom";
export default class Nav extends Component {
  render() {
    return (
      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
        <div class="collapse navbar-collapse" id="navbarsExample09">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <Link class="nav-link" to="/employee/index">List  </Link>
            </li>
            <li class="nav-item">
              <Link class="nav-link" to="/employee/form">Create</Link>
            </li>
            <li class="nav-item">
              <Link class="nav-link" to="/employee/edit/5">Edit</Link>
            </li>
          </ul>
        </div>
      </nav>
    )
  }
}
Main
resources/js/components/Main.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
  
function Main(){
  return (
    <Router>
      <main>
        <Nav/>
        <Switch>
          <Route path="/employee/index" exact component={List} />
          <Route path="/employee/form"  component={Form} />
          <Route path="/employee/edit/:id" component={Edit} />
        </Switch>
      </main>
    </Router>
  )
}

export default Main;
// for <div id="main-employee"></div>
ReactDOM.render(<Main />, document.getElementById('main-employee'));
Form
resources/js/components/employee/Form.js
import React, { Component } from 'react';

function Form(){
  return(
    <div>
      <div class="row">
        <div class="col-md-6 mb-3">
          <label for="firstName">Name employee</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">
					<label for="phone">Rol </label>
					<select id="inputState" class="form-control" onChange={(event)=> this.setState({selectJob:event.target.value})}>
             <option selected>Choose...</option>
             <option>Admin</option>
             <option>Programmer</option>
             <option>Tester</option>
          </select>
        </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
resources/js/components/employee/Edit.js
import React, { Component } 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 employee</label>
          <input type="text" class="form-control"/>
        </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">
          <label for="phone">Rol </label>
          <select id="inputState" class="form-control" onChange={(event)=> this.setState({selectJob:event.target.value})}>
             <option selected>Choose...</option>
             <option>Admin</option>
             <option>Programmer</option>
             <option>Tester</option>
          </select>
        </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;
List
resources/js/components/employee/List.js
import React, { Component } from 'react';

function List(){
  return (
    <section>
      <table class="table">
        <thead class="thead-dark">
          <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;

Tutorial Part

#2 Views component
https://www.tutofox.com/adonisjs/adonisjs-react-hooks-crud-api-rest-1-views-component/
#3 Migration & Model
https://www.tutofox.com/adonisjs/adonisjs-react-hooks-crud-api-rest-3-migration-model/
#4 Create
https://www.tutofox.com/adonisjs/adonisjs-react-hooks-crud-api-rest-4-create/
#5 List
https://www.tutofox.com/adonisjs/adonisjs-react-hooks-crud-api-rest-5-list/
#6 Edit
https://www.tutofox.com/adonisjs/adonisjs-react-hooks-crud-api-rest-6-edit/
#7 Update
https://www.tutofox.com/adonisjs/adonisjs-react-hooks-crud-api-rest-7-update/

Deja una respuesta

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