{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/crud-con-laravel-y-react-create/","result":{"data":{"markdownRemark":{"id":"051d7cf0-84a8-5b10-a9f6-19ba3fcf023d","html":"

Este tutorial/demo de código será el primero de una serie de tutoriales en los cuales estaremos realizando un CRUD utilizando Laravel para el BackEnd y React para el FrontEnd, para esto vamos a comenzar con un proyecto Laravel desde cero:

\n

1. Crear proyecto de Laravel:\nSi quieres ver las opciones que tienes disponibles para crear un nuevo proyecto de Laravel puedes ver su documentación oficial, en mi caso yo lo haré con el instalador de Laravel con el comando (nuestro proyecto se llamará pos, de punto de venta):

\n
laravel new pos
\n

Después de crear el proyecto debemos entrar en la carpeta que se acaba de crear para ejecutar algunas operaciones básicas para comenzar:

\n
cd pos
\n

2. Generar los primeros modelos, migraciones y controladores:\nPara comenzar con el proyecto y hacerlo sencillo de seguir vamos a generar nada mas 3 Modelos: Impuesto, AmbitoImpuesto, CalculoImpuesto, estos modelos nos servirán mas adelante en nuestro sistema, son una pequeña parte de un todo, y vamos a generarlos con el comando:

\n
php artisan make:model AmbitoImpuesto -a\nphp artisan make:model CalculoImpuesto -a\nphp artisan make:model Impuesto -a
\n

El flag -a sirve para decirle a artisan que queremos que se generen las migraciones,  factories y controladores para el modelo en cuestión.

\n

3. Generar la autenticación para el proyecto:

\n
php artisan make:auth
\n

4. Creando nuestras rutas:\nCada uno de nuestros modelos será una tabla de catálogo para las cuales necesitamos un CRUD por lo cual necesitamos generar las rutas necesarias para manejar las peticiones:

\n
Route::apiResource('ambitos-impuestos', 'AmbitoImpuestoController', [\n    'parameters' => [\n        'ambitos-impuestos' => 'model'\n    ]\n]);\n\nRoute::apiResource('calculos-impuestos', 'CalculoImpuestoController', [\n    'parameters' => [\n        'calculos-impuestos' => 'model'\n    ]\n]);\n\nRoute::apiResource('impuestos', 'ImpuestoController', [\n    'parameters' => [\n        'impuestos' => 'model'\n    ]\n]);
\n

5. Modificando las Migraciones generadas:\nDespués de modificar las migraciones debemos ejecutarlas con el comando php artisan migrate y rellenar con algunos datos de prueba para que aparezcan en nuestras listas:

\n
<?php\nuse Illuminate\\Support\\Facades\\Schema;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Database\\Migrations\\Migration;\nclass CreateAmbitoImpuestosTable extends Migration\n{\n    /**\n     * Run the migrations.\n     *\n     * @return void\n     */\n    public function up()\n    {\n        Schema::create('ambitos_impuestos', function (Blueprint $table) {\n            $table->bigIncrements('id');\n            $table->string('nombre');\n            $table->timestamps();\n        });\n    }\n    /**\n     * Reverse the migrations.\n     *\n     * @return void\n     */\n    public function down()\n    {\n        Schema::dropIfExists('ambitos_impuestos');\n    }\n}
\n
<?php\nuse Illuminate\\Support\\Facades\\Schema;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Database\\Migrations\\Migration;\nclass CreateCalculoImpuestosTable extends Migration\n{\n    /**\n     * Run the migrations.\n     *\n     * @return void\n     */\n    public function up()\n    {\n        Schema::create('calculos_impuestos', function (Blueprint $table) {\n            $table->bigIncrements('id');\n            $table->string('nombre');\n            $table->timestamps();\n        });\n    }\n    /**\n     * Reverse the migrations.\n     *\n     * @return void\n     */\n    public function down()\n    {\n        Schema::dropIfExists('calculos_impuestos');\n    }\n}
\n
<?php\nuse Illuminate\\Support\\Facades\\Schema;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Database\\Migrations\\Migration;\nclass CreateImpuestosTable extends Migration\n{\n    /**\n     * Run the migrations.\n     *\n     * @return void\n     */\n    public function up()\n    {\n        Schema::create('impuestos', function (Blueprint $table) {\n            $table->bigIncrements('id');\n            $table->string('nombre');\n            $table->unsignedBigInteger('ambito_impuesto_id');\n            $table->unsignedBigInteger('calculo_impuesto_id');\n            $table->double('importe');\n            $table->string('etiqueta');\n            $table->timestamps();\n            $table->foreign('ambito_impuesto_id')->references('id')->on('ambitos_impuestos');\n            $table->foreign('calculo_impuesto_id')->references('id')->on('calculos_impuestos');\n        });\n    }\n    /**\n     * Reverse the migrations.\n     *\n     * @return void\n     */\n    public function down()\n    {\n        Schema::dropIfExists('impuestos');\n    }\n}
\n

Ambito impuesto:

\n

\n

Cálculo impuesto:

\n

\n

6. Configuraciones y relaciones en los modelos:

\n
<?php\nnamespace App;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass AmbitoImpuesto extends Model\n{\n    protected $table = 'ambitos_impuestos';\n}
\n
<?php\nnamespace App;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass CalculoImpuesto extends Model\n{\n    protected $table = 'calculos_impuestos';\n}
\n

7. El método index de los controladores:

\n
<?php\nnamespace App\\Http\\Controllers;\nuse App\\AmbitoImpuesto;\nuse Illuminate\\Http\\Request;\nclass AmbitoImpuestoController extends Controller\n{\n    /**\n     * Display a listing of the resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index()\n    {\n        $rs = AmbitoImpuesto::query()->get();\n        return response()->json([\n            'data' => $rs\n        ], 200);\n    }\n    /**\n     * Show the form for creating a new resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function create()\n    {\n        //\n    }\n    /**\n     * Store a newly created resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function store(Request $request)\n    {\n        //\n    }\n    /**\n     * Display the specified resource.\n     *\n     * @param  \\App\\AmbitoImpuesto  $ambitoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function show(AmbitoImpuesto $ambitoImpuesto)\n    {\n        //\n    }\n    /**\n     * Show the form for editing the specified resource.\n     *\n     * @param  \\App\\AmbitoImpuesto  $ambitoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function edit(AmbitoImpuesto $ambitoImpuesto)\n    {\n        //\n    }\n    /**\n     * Update the specified resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @param  \\App\\AmbitoImpuesto  $ambitoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function update(Request $request, AmbitoImpuesto $ambitoImpuesto)\n    {\n        //\n    }\n    /**\n     * Remove the specified resource from storage.\n     *\n     * @param  \\App\\AmbitoImpuesto  $ambitoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function destroy(AmbitoImpuesto $ambitoImpuesto)\n    {\n        //\n    }\n}
\n
<?php\nnamespace App\\Http\\Controllers;\nuse App\\CalculoImpuesto;\nuse Illuminate\\Http\\Request;\nclass CalculoImpuestoController extends Controller\n{\n    /**\n     * Display a listing of the resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index()\n    {\n        $rs = CalculoImpuesto::query()->get();\n        return response()->json([\n            'data' => $rs\n        ], 200);\n    }\n    /**\n     * Show the form for creating a new resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function create()\n    {\n        //\n    }\n    /**\n     * Store a newly created resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function store(Request $request)\n    {\n        //\n    }\n    /**\n     * Display the specified resource.\n     *\n     * @param  \\App\\CalculoImpuesto  $calculoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function show(CalculoImpuesto $calculoImpuesto)\n    {\n        //\n    }\n    /**\n     * Show the form for editing the specified resource.\n     *\n     * @param  \\App\\CalculoImpuesto  $calculoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function edit(CalculoImpuesto $calculoImpuesto)\n    {\n        //\n    }\n    /**\n     * Update the specified resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @param  \\App\\CalculoImpuesto  $calculoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function update(Request $request, CalculoImpuesto $calculoImpuesto)\n    {\n        //\n    }\n    /**\n     * Remove the specified resource from storage.\n     *\n     * @param  \\App\\CalculoImpuesto  $calculoImpuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function destroy(CalculoImpuesto $calculoImpuesto)\n    {\n        //\n    }\n}
\n
<?php\nnamespace App\\Http\\Controllers;\nuse App\\Impuesto;\nuse Illuminate\\Http\\Request;\nclass ImpuestoController extends Controller\n{\n    /**\n     * Display a listing of the resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index()\n    {\n        $rs = Impuesto::query()\n            ->with([\n                'ambito',\n                'calculo'\n            ])\n            ->get();\n        return response()->json([\n            'data' => $rs\n        ], 200);\n    }\n    /**\n     * Show the form for creating a new resource.\n     *\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function create()\n    {\n        //\n    }\n    /**\n     * Store a newly created resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function store(Request $request)\n    {\n        $data = $request->validate([\n            'nombre' => 'required|string',\n            'ambito_impuesto_id' => 'required|integer',\n            'calculo_impuesto_id' => 'required|integer',\n            'importe' => 'required|numeric',\n            'etiqueta' => 'required|string'\n        ]);\n        $model = Impuesto::create($data);\n        return response()->json([\n            'data' => $model\n        ], 200);\n    }\n    /**\n     * Display the specified resource.\n     *\n     * @param  \\App\\Impuesto  $impuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function show(Impuesto $impuesto)\n    {\n        //\n    }\n    /**\n     * Show the form for editing the specified resource.\n     *\n     * @param  \\App\\Impuesto  $impuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function edit(Impuesto $impuesto)\n    {\n        //\n    }\n    /**\n     * Update the specified resource in storage.\n     *\n     * @param  \\Illuminate\\Http\\Request  $request\n     * @param  \\App\\Impuesto  $impuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function update(Request $request, Impuesto $impuesto)\n    {\n        //\n    }\n    /**\n     * Remove the specified resource from storage.\n     *\n     * @param  \\App\\Impuesto  $impuesto\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function destroy(Impuesto $impuesto)\n    {\n        //\n    }\n}
\n

8. Preparar el proyecto para trabajar con React:

\n
php artisan preset react
\n

9. Modificar la vista home.blade.php

\n
@extends('layouts.app')\n\n@section('content')\n<div class=\"container\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-md-12\" id=\"appimpuestos\">\n        </div>\n    </div>\n</div>\n@endsection
\n

10. Modificar el archivo resources/js/app.js

\n
/**\n * First we will load all of this project's JavaScript dependencies which\n * includes React and other helpers. It's a great starting point while\n * building robust, powerful web applications using React + Laravel.\n */\n\nrequire('./bootstrap');\n\n/**\n * Next, we will create a fresh React component instance and attach it to\n * the page. Then, you may begin adding components to this application\n * or customize the JavaScript scaffolding to fit your unique needs.\n */\n\nrequire('./components/Pos');
\n

11. El componente resources/js/componentes/Impuestos/AmbitoImpuestoList.js

\n
import React, { useState, useEffect } from 'react'\n\nexport default function AmbitoImpuestoList({ handleChange, etiqueta, name }) {\n\n    const [list, setList] = useState([])\n    const getList = () => {\n        let url = '/ambitos-impuestos'\n        axios.get(url)\n            .then(resp => {\n                setList(resp.data.data)\n            })\n            .catch(err => {\n                console.log(err)\n            })\n    }\n    const handleChangeEvent = (e) => {\n        if (handleChange) {\n            handleChange(e)\n        } else {\n            console.info('no se ha definido una funcion manejadora del evento change')\n        }\n    }\n    useEffect(getList, [])\n\n\n    return (\n        <div className=\"form-group\">\n            <label htmlFor=\"\">{etiqueta ? etiqueta : 'Seleccione:'}</label>\n            <select onChange={handleChangeEvent} className=\"form-control\" name={name ? name : ''}>\n                <option value={0}>Seleccione una opción de la lista</option>\n                {\n                    list.map(item => <option key={item.id} value={item.id}>{item.nombre}</option>)\n                }\n            </select>\n        </div>\n    )\n}
\n

12. El componente resources/js/componentes/Impuestos/CalculoImpuestoList.js

\n
import React, { useState, useEffect } from 'react'\n\nexport default function CalculoImpuestoList({ handleChange, etiqueta, name }) {\n\n    const [list, setList] = useState([])\n    const getList = () => {\n        let url = '/calculos-impuestos'\n        axios.get(url)\n            .then(resp => {\n                setList(resp.data.data)\n            })\n            .catch(err => {\n                console.log(err)\n            })\n    }\n    const handleChangeEvent = (e) => {\n        if (handleChange) {\n            handleChange(e)\n        } else {\n            console.info('no se ha definido una funcion manejadora del evento change')\n        }\n    }\n    useEffect(getList, [])\n    return (\n        <div className=\"form-group\">\n            <label htmlFor=\"\">{etiqueta ? etiqueta : 'Seleccione:'}</label>\n            <select onChange={handleChangeEvent} className=\"form-control\" name={name ? name : ''}>\n                <option value={0}>Seleccione una opción de la lista</option>\n                {\n                    list.map(item => <option key={item.id} value={item.id}>{item.nombre}</option>)\n                }\n            </select>\n        </div>\n    )\n}
\n

13. El componente resources/js/componentes/Impuestos/ImpuestosForm.js

\n
import React, { useState } from 'react'\nimport AmbitoImpuestoList from './AmbitoImpuestoList'\nimport CalculoImpuestoList from './CalculoImpuestoList';\n\nexport default function ImpuestosForm({ titulo }) {\n\n    const [form, setForm] = useState({})\n\n    const handleSubmit = (e) => {\n        e.preventDefault()\n        const url = '/impuestos'\n        axios.post(url, form)\n            .then(resp => {\n                console.log('completado')\n            })\n            .catch(err => {\n                console.log(err)\n            })\n    }\n    const handleChange = (e) => {\n        setForm({\n            ...form,\n            [e.target.name]: e.target.value\n        })\n    }\n    return (\n        <div className=\"card\">\n            <div className=\"card-header\">\n                {titulo ? titulo : 'Formulario de impuestos'}\n            </div>\n            <div className=\"card-body\">\n                <form onSubmit={handleSubmit}>\n\n                    <div className=\"form-group\">\n                        <label htmlFor=\"\">Nombre del impuesto</label>\n                        <input onChange={handleChange} type=\"text\" name=\"nombre\" className=\"form-control\" placeholder=\"Nombre del impuesto\" />\n                    </div>\n\n                    <AmbitoImpuestoList\n                        etiqueta=\"Ámbito del impuesto\"\n                        name=\"ambito_impuesto_id\"\n                        handleChange={handleChange}\n                    />\n                    <CalculoImpuestoList\n                        etiqueta=\"Cálculo del impuesto\"\n                        name=\"calculo_impuesto_id\"\n                        handleChange={handleChange}\n                    />\n\n                    <div className=\"form-group\">\n                        <label htmlFor=\"\">Importe</label>\n                        <input onChange={handleChange} type=\"number\" name=\"importe\" className=\"form-control\" placeholder=\"Importe\" />\n                    </div>\n\n                    <div className=\"form-group\">\n                        <label htmlFor=\"\">Etiqueta en facturas</label>\n                        <input onChange={handleChange} type=\"text\" name=\"etiqueta\" className=\"form-control\" placeholder=\"Etiqueta en facturas\" />\n                    </div>\n\n                    <button type=\"submit\" className=\"btn btn-primary\">Guardar</button>\n                </form>\n            </div>\n        </div>\n    )\n}
\n

14. El componente resources/js/componentes/Impuestos/Impuestos.js

\n
import React from 'react'\nimport ImpuestosForm from './ImpuestosForm';\n\nexport default function Impuestos() {\n    return (\n        <ImpuestosForm />\n    )\n}
\n

15. El componente resources/js/componentes/Pos.js

\n
import React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport Impuestos from './Impuestos/Impuestos';\n\nexport default class Pos extends Component {\n    render() {\n        return (\n            <div className=\"container\">\n                <div className=\"row\">\n                    <div className=\"col-md-12\">\n                        <Impuestos />\n                    </div>\n                </div>\n            </div>\n        );\n    }\n}\n\nif (document.getElementById('appimpuestos')) {\n    ReactDOM.render(<Pos />, document.getElementById('appimpuestos'));\n}
\n

16. Compilar nuestros assets con el comando:

\n
npm run dev
\n

17. Comprobar los resultados:\nEl resultado en pantalla debería ser algo similar a esto:

\n

\n

Si rellenamos el formulario y presionamos el botón de guardar deberíamos poder ver un nuevo registro en la base de datos.

","fields":{"slug":"/posts/crud-con-laravel-y-react-create/","tagSlugs":["/tag/react/","/tag/laravel/"]},"frontmatter":{"date":"2019-08-19T22:12:03.284Z","description":"Este tutorial/demo de código será el primero de una serie de tutoriales en los cuales estaremos realizando un CRUD utilizando Laravel para el BackEnd y React para el FrontEnd, para esto vamos a comenzar con un proyecto Laravel desde cero:","tags":["React","Laravel"],"title":"CRUD con Laravel & React - Create","socialImage":"/media/image-2.jpg"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/crud-con-laravel-y-react-create/"}}}