Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Integrar React JS (16.13.1) en Ruby on Rails (6.0.3.2)

Demo Github

Las aplicaciones reactivas en estos tiempos son muy demandadas y solicitadas tanto por las organizaciones como los usuarios, ya que son muy rápidas, dinámicas y ágiles, podría mencionar otras características de este tipo de aplicaciones, pero no quiero ahondar en ello, pero imagina integrar React JS en uno de los Frameworks más populares para el Desarrollo Web, hablo de Ruby on Rails (RoR), sería una aplicación potente y profesional, en este Post te enseñare como hacerlos, vamos con ello.

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Dominio del trabajo con Varios Lenguajes de Programación”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Como Integrar React JS (16.13.1) en Ruby on Rails (6.0.3.2) 

No quiero enfocarme en como crear un nuevo proyecto con Ruby on Rails, voy a trabajar directamente en integrar React JS en Ruby on Rails, entonces voy a crear un archivo HTML sencillo para este tutorial.

Detrás de la vista HTML de la imagen anterior hay un código que puede interactuar con React JS.


Entonces pasemos ahora a trabajar en la integración de React JS.

Integración de React JS en Ruby on Rails (RoR)

Existen 2 maneras de integrar React JS en Ruby on Rails (RoR), una es de manera manual y la otra es utilizando una gema, veamos estas 2 maneras a continuación.

Integración manual

Podemos ir a la página oficial de React JS y usar las urls alojadas en el CDN unpkg, tenemos la versión de desarrollo y la de producción, por ejemplo si quiero usar la versión de producción, copio sus urls y las pego antes del cierre de la etiqueta </body>


Con ello entonces ya tengo instalado React JS en Ruby on Rails de forma manual, ahora pasemos a la otra forma y luego haremos un ejemplo usando React JS una vez que ya esta integrando en Ruby on Rails (RoR).

Integración mediante una Gema

Hay diferentes gemas que nos permiten integrar React JS, pero iré por la más popular ya que esto me da una idea de lo buena y popular que debe ser esa gema, usaré la gema react-rails, para usar esta gema abro el archivo llamado Gemfile que se encuentra en el directorio principal de nuestro proyecto y añado la gema.


Luego voy a mi consola de comandos y ejecuto el siguiente comando.


Paso seguido ejecutamos los siguientes comandos.


Dejamos que termine de ejecutarse cada comando, para pasar al siguiente comando.

Una ves que terminamos de instalar y configurar, ya deberíamos tener integrado React JS en Ruby on Rails, ahora vamos a crear una aplicación básica para verificar si la gema de React JS se ha instalado correctamente.

Verificando si React JS se integro correctamente

Voy a crear una lista de postres de manera reactiva, se llama así porque estamos trabajando con React JS, comenzaré creando mi componente llamado UbicacionPuntero, para esto ejecuto el siguiente comando


La consola me indica que se me ha creado un archivo llamado UbicacionPuntero.js en app > javascript > components > UbicacionPuntero.js

Abro el archivo UbicacionPuntero.js y debo de encontrar el siguiente código en su interior.


Ahora voy a agregar el siguiente código que me detecta la ubicación actual del puntero del muses en pixeles.


Ahora en mi  vista cargo mi componente UbicacionPuntero que he creado anteriormente.


Abro mi navegador y puedo ver que la aplicación creada con React JS esta funcionando correctamente en Ruby on Rails.

Con ello entonces hemos verificado que React JS esta funcionando correctamente en Ruby on Rails. Si tienes dudas sobre el proyecto, te recomiendo ver la Demo que esta al inicio de este tutorial, en ella explico otros detalles adicionales o deja tu consulta en los comentarios de este Post, asimismo puedes unirte a los canales de comunicación en donde la comunidad te brindará ayuda. 

Conclusión

En este tutorial hemos aprendido a integrar React JS en Ruby on Rails, ahora podemos crear aplicaciones reactivas sin problemas.

Nota (s)

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

Salir de la versión móvil