React JS Scaffolding en Laravel 5.6

Laravel

Las aplicaciones Reactivas forman parte del actual ecosistema que nos obligan a usar las ultimas tecnologías para desplegarlas, en Laravel a partir de la versión 5.5 se integro un Scaffolding para desplegar React JS en tu proyecto Laravel, de manera rápida y dinámica, veamos como hacerlo en este artículo.

Introducción

Laravel nos da la posibilidad de usar la librería o Framework Frontend que mejor nos guste, si optamos por usar React JS tenemos una manera rápida de despegarlo en Laravel, pero es vital que instales Node JS para gestionar comandos y demás acciones. Te recomendamos revisar este tutorial y seguir los pasos correspondientes para que instales Node JS.

imagen: reactjs.org

Una manera fácil para desplegar React en Laravel es bajándote la librería desde su página oficial e instanciarla manualmente en tu proyecto y empezar a codear modulos y vistas reactivas, pero pierdes la potencia, optimización y buenas prácticas que Laravel nos brinda. Hicimos algo similar con Django en este tutorial Integrando manualmente Django y React JS en donde puedes ver lo sencillo que puede ser.

React JS Scaffolding

Cuando creamos un nuevo proyecto en Laravel ejecutamos el comando

Abrimos nuestro navegador en la ruta http://localhost:8000 y nos carga la vista por defecto que nos brinda Laravel

Ahora vamos a mostrar una vista mediante React JS, para desplegar esta potente librería automáticamente en Laravel ejecutamos el siguiente comando

Con esto se nos crea un componente React JS en resources > assets > js > componentsExample.js si abrimos este archivo tenemos el contenido del componente Example, editamos el contenido a nuestro gusto

Con esto ya tenemos desplegado React JS, listo para usarlo en Laravel. Ahora vamos a mostrar el contenido de este componente ya que por default nos esta mostrando la página que viene por defecto al crear un nuevo proyecto en Laravel, tal como mostramos mas arriba en este artículo.

Si ves bien al final del componente Example puedes ver que esta enviando al elemento example para que muestre el contenido del componente

Entonces abre tu vista welcome.blade.php y crea una capa con id=”example”, así mismo instanciamos el archivo js/app.js el código de nuestra vista quedaría así

Cuando ejecutamos el siguiente comando doble Laravel crea un paquete de librerías que usará nuestro proyecto, este paquete lo coloca en public > js > app.js

Bien como ya tenemos instalado e integrado React JS, lanzamos el servidor de Laravel y obtenemos nuestra primera vista Reactiva

Como tenemos integrado la herramienta para desarrolladores React Dev Tools podemos ver los códigos correctamente en el examinador de la parte de abajo

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required