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 Productoy 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/ControllerProductImportarlo 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\ControllerProduct@get_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'));
}
Código fuentes
https://github.com/artyom-developer/laravel-react
Está mal escrito «Route::get(‘producto/list’,’API\ControllerPorduct@get_all’);»
Cambiar por -> Route::get(‘producto/list’,’API\ControllerProduct@get_all’);
Muchas gracias por avisarnos el error.
Hola tienes un ejemplo de login