Laravel ha recorrido un largo camino. Hoy en día, los desarrolladores tienen acceso a un montón de aplicaciones web responsivas de última generación que utilizan el framework: Inertia.js, Alpine.js y Livewire, por nombrar sólo algunas.
Pero el framework no ha perdido el contacto con su pasado. Sigue siendo bastante fácil configurar Vue o React con un proyecto Laravel, lo que resulta especialmente útil para los desarrolladores reactjs que buscan trabajar con frameworks frontales.
En este artículo, te guiaremos a través del arranque del último proyecto Laravel y la integración de React con él, para que todos los desarrolladores de Laravel y React.js puedan continuar con sus proyectos.
React JS con Laravel
React es una biblioteca Javascript de código abierto desarrollada por Facebook. Laravel es un framework PHP full-stack que sigue el patrón MVC.
Configurar React con un proyecto Laravel es excepcionalmente sencillo. Si tienes un sitio web antiguo construido en PHP y quieres modificar el frontend del sitio con React, puedes hacerlo fácilmente. Te mostraremos cómo hacerlo en la Plataforma Cloudways.
Instalar React JS en Laravel en Cloudways
Nada tan fácil como desplegar aplicaciones Laravel en la nube
Con Cloudways, puedes tener tus aplicaciones Laravel funcionando en servidores gestionados en la nube en sólo unos minutos.
Instalar Proyecto Laravel
Utilizaremos Laravel 8 para demostrar el método en este artículo (y recomendamos encarecidamente la versión por sus excelentes características de seguridad).
En primer lugar, instala un nuevo proyecto Laravel. Con Cloudways, puedes instalar Laravel con un solo clic.
Selecciona tu servidor y la aplicación Laravel. Selecciona el tamaño del servidor PHP según el tráfico de tu sitio web, y la ubicación según la región que prefieras.
Después de completar todos estos pasos, puedes navegar por la pestaña de aplicaciones y seleccionar la aplicación Laravel.
A continuación, inicia el terminal SSH desde la pestaña Credenciales maestras e inicia sesión utilizando tus credenciales.
Actualiza la versión de Composer ejecutando el comando de auto-actualización. Reemplazará a tu Compositor.
Instalar laravel/ui
laravel/ui es un paquete oficial que ofrece un andamiaje de interfaz de usuario de inicio de sesión y registro para React, Vue y jQuery en tu proyecto Laravel.
Ejecuta este comando para instalar el paquete composer laravel/ui.
composer require laravel/ui
Instalar React en Laravel
Ahora que ya has instalado el paquete composer UI, ejecuta el siguiente comando para instalar React en Laravel.
php artisan ui react -- auth
Instala los paquetes necesarios
Supongo que tienes Node y NPM instalados en tu máquina de desarrollo.
Puedes comprobar la instalación de Node y NPM utilizando este comando.
# for node node -v # for npm npm -v
El siguiente comando instala todos los paquetes javascript necesarios para nuestro proyecto.
npm install
El comando anterior crea una carpeta node_modules e instala automáticamente todos los paquetes registrados en el archivo package.json.
Configurar un componente React en Laravel 8
Si ejecutas ahora la aplicación Laravel, aún no cargará ni mostrará el componente React en la vista Laravel.
Por lo tanto, crearé un componente React dentro del resource/js/User.js y pegaré el siguiente código en él.
También hemos definido un elemento ROOT DOM ‘usuario’ dentro del componente React. Recogerá cualquier elemento en el modelo de objetos del documento del navegador.
Tenemos que registrar el componente React dentro del archivo resources/js/app.js.
require('./bootstrap');
require('./components/User');
require('./components/Example');
En este paso, añadiremos la ruta CSS compilada, el DOM raíz de React y los archivos JavaScript compilados dentro del diseño de Laravel. El div con el id=»usuario» es el mismo id que hemos declarado en el document.getElementById(‘usuario’).
Coloca el código dado dentro de la plantilla views/welcome.blade.php.
Por último, tenemos que ejecutar el comando para compilar los archivos JavaScript y CSS para el proyecto Laravel y
React.js.
npm run watch
Tu código ha sido compilado. Ahora ejecuta este comando para ver tu aplicación en el navegador.
php artisan serve
Conclusión
Laravel no requiere que utilices ningún framework Javascript específico; siempre que lo hayas configurado correctamente, cualquier framework debería funcionar. Este artículo te sirve de guía rápida sobre cómo desarrollar una aplicación React totalmente funcional para que puedas configurar fácilmente aplicaciones frontales creativas en Laravel.
¿Se puede utilizar Laravel con React?
R) Sí, Laravel puede utilizarse con React. Puedes integrar React para el frontend y Laravel para el backend, lo que te permitirá crear aplicaciones dinámicas de una sola página (SPA).
¿Es Laravel y React una buena combinación?
R) Sí, Laravel y React son una gran combinación. Laravel gestiona el backend y la API, mientras que React gestiona el frontend, proporcionando una experiencia de desarrollo potente y completa.
¿Es Laravel bueno para frontend?
R) Laravel es principalmente un framework de backend, pero puede gestionar tareas básicas de frontend utilizando plantillas Blade. Para interfaces de usuario más dinámicas, es habitual combinar Laravel con frameworks de JavaScript como React o Vue.js.
¿Cuál es la diferencia entre Laravel y ReactJS?
A) Laravel es un framework PHP backend utilizado para la lógica del lado del servidor, el enrutamiento y la gestión de bases de datos, mientras que ReactJS es una biblioteca JavaScript centrada en la creación de interfaces de usuario interactivas para el frontend.
Inshal Ali
Inshal es Content Marketer en Cloudways. Con formación en informática, habilidad para los contenidos y mucha creatividad, ayuda a las empresas a alcanzar el cielo e ir más allá a través de contenidos que hablan el idioma de sus clientes. Aparte del trabajo, le verás sobre todo en algún juego en línea o en un campo de fútbol.
