{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/combos-dependientes-react-y-laravel/","result":{"data":{"markdownRemark":{"id":"572259e0-8ced-5f40-ba70-2a06fc56c2dc","html":"

En este tutorial vamos a trabajar haciendo un par de combos(select) dependientes, por ejemplo: supongamos el siguiente caso:

\n

Tenemos un formulario con un combo para seleccionar el Pais y luego de este tenemos un combo que nos permite seleccionar una Región/Departamento o algún tipo de subdivisión política del país en cuestión, pero en este segundo combo deben aparecer nada mas las Regiones que pertenecen al país seleccionado en el primer combo.

\n

Teniendo este caso en mente vamos a comenzar desde ceros, realizando todo en un proyecto nuevo de Laravel, para esto vamos a seguir los siguientes pasos:

\n

1. Crear proyecto nuevo de Laravel

\n
Para crear un nuevo proyecto lo podemos hacer con el comando laravel(paquete global instalado con composer) o directamente con composer, en este caso lo haré con el comando laravel:\n
laravel new combosdependientes
\n

Entramos al proyecto que hemos creado con el comando CD

\n
cd combosdependientes/
\n

2. Generar los modelos que vamos a utilizar en el proyecto

\n

En este caso además de generar los modelos vamos generar las migraciones y los controladores que vamos a necesitar, para esto vamos a usar el comando de artisan:

\n
php artisan make:model Pais -a\nphp artisan make:model Departamento -a
\n

3. Crear las rutas necesarias para el proyecto

\n

En esta caso vamos a generar TODAS las rutas para hacer un CRUD, no obstante en este tutorial solo vamos a hacer las peticiones GET para obtener el listado de cada uno de los modelos:

\n
Route::apiResource('paises', 'PaisController', ['parameters' => ['paises' => 'pais']]);\n\nRoute::apiResource('paises.departamentos', 'DepartamentoController',  ['parameters' => ['paises' => 'pais']]);
\n

Con los comandos anteriores hemos generado varias rutas, para ver que rutas se generan y podemos usar para hacer nuestras peticiones podemos ejecutar el comando:

\n
php artisan route:list -c
\n

La salida del comando anterior debe ser algo como esto:

\n

\n

4. Configurar el proyecto para trabajar con React

\n

Para que el proyecto de Laravel soporte React solamente debemos ejecutar el comando: php artisan preset react este comando hace las configuraciones necesarias en el proyecto y la salida en la terminal debe ser algo como esto:

\n

\n

5. Configurar la conexión a la base de datos.

\n

En mi caso yo uso postgres, pero tú lo puedes configurar con el motor de base de datos de tu preferencia, por defecto Laravel trae algunas configuraciones para MySQL. En mi caso especifico la base de datos se llama combosdependientes, esta base de datos debe existir para que el proyecto funcione, sino la tienes debes crearla:

\n

a

\n

6. Generar la autenticación para el proyecto(Login y Registro)

\n

Laravel viene con baterías incluidas, en este caso algo que casi todo sistema necesita, el Login y el Registro de usuarios. Esto se puede generar fácilmente con el comando php artisan make:auth

\n

\n

7. Modificar y ejecutar las migraciones para la creación de nuestras tablas de la base de datos:

\n

Cuando generamos los modelos y controladores también se nos crearon los archivos de migraciones, que básicamente son clases de php que nos van a permitir generar las tablas de nuestra base de datos y llevar un control de versiones de las modificaciones que hagamos, estas migraciones se encuentras en la ruta: /database/migrations

\n

Vamos a modificar las dos migraciones que hemos generado, la de país y la de departamento, escribiendo el siguiente código:

\n

En la migración de pais y en método up:

\n

\n

En la migración de pais y el método down:

\n

\n

En la migración de departamento y en método up:

\n

\n

En la migración de departamento y el método down:

\n

\n

Es Importante que los métodos de las migraciones queden tal cual te he mostrado en las imágenes anteriores

\n

8. Ejecutar las migraciones

\n

Al ejecutar las migraciones lo que lograremos es que se creen las tablas en la base de datos que hasta el momento está en blanco, para correr las migraciones lo hacemos con el comando php artisan migrate el modificador refresh hace las migraciones como desde ceros si ya las habias ejecutado con anterioridad, la salida de este comando debe ser algo similar a esto:

\n

\n

\n

9. Poner datos en nuestra base de datos:

\n

Esto lo haremos de forma manual, pero en Laravel también hay una forma de poblar la base de datos con datos de pruebas:

\n

Tabla de paises:

\n

\n

Tabla de departamentos:

\n

\n

10. Preparar el proyecto para trabajar con el front:

\n

Para esto primero vamos a instalar las dependencias con el comando:

\n

npm install

\n

Después de instalar las dependencias vamos a realizar algunos cambios en la plantilla de home.blade.php y también en el componente de ejemplo:

\n

Archivo /resources/views/home.blade.php

\n

\n

Archivo /resources/js/components/Example.js

\n

\n

Ahora podemos compilar con el comando **npm run dev **y ver el resultado en el navegador

\n

\n

El navegador nos debería mostrar algo como lo anterior, lo que está encerrado en el rectángulo rojo es nuestro componente Example.

\n

11. El código para los controladores:

\n

Recordemos que por el momento este proyecto solo es rellenar los combos y no haremos todas las acciones del CRUD, en este caso será nada mas el método index que nos debe retornar el listado de todos los recursos de cada tabla:

\n

El código del controlador de pais:

\n

\n

El código del controlador de departamento:

\n

\n

12. El código necesario para el modelo de Pais:

\n

En nuestro modelo vamos necesitar hacer algunas configuraciones, ya que estamos rompiendo con algunas de las convenciones que Laravel nos recomienda o “exige”, ademas de crear la relacione existente entre paises y departamentos, verifica que tus modelos tengan el siguiente código:

\n

\n

13. Ok, ahora que tenemos el entorno listo, hagamos el trabajo con React

\n

Vamos a escribir dos componentes nuevos y los usaremos dentro del componente de Example para facilitar las cosas, primero escribamos el código del componente que va a mostrar la lista de paises, le llamaremos ComboPais.js y tendrá el siguiente código:

\n

\n

También tenemos el código para el componente que va a mostrar la lista de departamentos:

\n

\n

Y ahora nuestro componente Example debe tener el siguiente código:

\n

","fields":{"slug":"/posts/combos-dependientes-react-y-laravel/","tagSlugs":["/tag/laravel/","/tag/react/"]},"frontmatter":{"date":"2019-08-02T22:12:03.284Z","description":"En este tutorial vamos a trabajar haciendo un par de combos(select) dependientes","tags":["Laravel","React"],"title":"Combos dependientes con React y Laravel","socialImage":"/media/image-2.jpg"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/combos-dependientes-react-y-laravel/"}}}