CRUD + Laravel + React js + Mysql : Listar datos desde API

Laravel (Backend)

En este tutorial, comenzaremos a construir un componente React que lista los datos desde API en Laravel.

Crear tabla en la base de datos

CREATE TABLE `producto` (
  `id` int(11) NOT NULL,
  `titulo` varchar(100) COLLATE utf16_spanish2_ci NOT NULL,
  `descripcion` varchar(500) COLLATE utf16_spanish2_ci NOT NULL,
  `precio` int(11) NOT NULL,
  `cantidad` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf16 COLLATE=utf16_spanish2_ci;

Crear modelo

php artisan make:model Producto

y agregar nombre y campos de la tabla de la base de datos

namespace App;

use Illuminate\Database\Eloquent\Model;

class Producto extends Model
{
    //
    protected $table='producto';

    protected $fillable=['id','titulo', 'descripcion', 'precio', 'cantidad' ];

}

Crear controlador para API de producto

php artisan make:controller API/ControllerProduct

Importarlo modelo Producto y agregar metodo de get

use App\Producto;
public function get_all(){
     return Producto::all();      
}

Agregar ruta de API para web service en el proyecto-react/routes/api.php

Route::get('producto/list','API\[email protected]_all');

Agregar ruta de producto en el proyecto-react/routes/web.php

Route::get('/producto', function () {
    return view('producto');
});

React.js (Frontend)

Crear componente llamado Producto.js en la carmpeta resources/js/components/

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

export default class Producto extends Component {
    render() {
        return (
          <div class="container">
          
            <h3>Laravel y React APIRest</h3>
            <hr/>

            <table class="table table-bordered order-table ">
              <thead>
                <tr>
                  <th>Producto</th>
                  <th>Descripcion</th>
                  <th>Precio</th>
                </tr>
              </thead>
              <tbody id="bodytable">
                  <tr>
                    <td>Producto</td>
                    <td>Descripcion</td>
                    <td>Precio</td>
                  </tr>
              </tbody>
            </table>

          </div>
        );
    }
}

if (document.getElementById('producto')) {
    ReactDOM.render(<Producto />, document.getElementById('producto'));
}

Crear vista de producto.blade.php en la carpeta proyecto-react/resources/view

 <!doctype html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">      
    </head>
    <body>
      <div id="producto"></div>
      <script src="{{ asset('js/app.js') }}" ></script>
    </body>
</html>

Importar el componente en el /resoruces/js/components/app.js

require('./components/Producto');

y luego ejecutar

npm run watch-poll

Ahora los siguentes vamos a conectar api y listar los datos en el componente de React

Declarar variable

constructor(props){
      super(props);
      this.state = {
        producto:[]
      }
    }

Conectar api en el componentDidMount

componentDidMount(){

      axios.get(baseUrl+'api/producto/list').then(response=>{
        this.setState({producto:response.data})
      }).catch(error=>{
        alert("Error "+error)
      })
   }

Y listar los datos

renderList(){

      return this.state.producto.map((data)=>{

        return(
          <tr>
            <td>{data.titulo}</td>
            <td>{data.descripcion}</td>
            <td>{data.precio}</td>
          </tr>
        )

      })

    }
Completo codigo de Componente "Producto.js"
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const baseUrl = "http://localhost/tutofox/react/waka/public/";

export default class Producto extends Component {

    constructor(props){
      super(props);
      this.state = {
        producto:[]
      }
    }

    componentDidMount(){

      axios.get(baseUrl+'api/producto/list').then(response=>{
        this.setState({producto:response.data})
      }).catch(error=>{
        alert("Error "+error)
      })

    }

    render() {
        return (
          <div class="container">
            <br/>
            <h3>Laravel y React APIRest</h3>
            <hr/>

            <table class="table table-bordered order-table ">
              <thead>
                <tr>
                  <th>Producto</th>
                  <th>Descripcion</th>
                  <th>Precio</th>
                </tr>
              </thead>
              <tbody id="bodytable">
                  {this.renderList()}
              </tbody>
            </table>

          </div>
        );
    }

    renderList(){

      return this.state.producto.map((data)=>{

        return(
          <tr>
            <td>{data.titulo}</td>
            <td>{data.descripcion}</td>
            <td>{data.precio}</td>
          </tr>
        )

      })

    }
}

if (document.getElementById('producto')) {
    ReactDOM.render(<Producto />, document.getElementById('producto'));
}
Resultados

Código fuentes
https://github.com/artyom-developer/laravel-react

Siguiente tutorial Enviar y Insertar datos desde API.

3 comentarios sobre “CRUD + Laravel + React js + Mysql : Listar datos desde API”

Deja una respuesta

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