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

Componentes del Lado del Servidor en React JS (Preview)

Demo Github

El día 21 de Diciembre de 2020, el equipo de Desarrollo y soporte de la librería React JS anunció en su Blog que están trabajando en algo genial, la posibilidad de utilizar componentes de React JS pero en el servidor, recordemos que React JS trabaja mayormente en el lado Front. El equipo lanzo un repositorio en donde podemos probar esta nueva funcionalidad que aún se encuentra en Desarrollo y probablemente sea lanzado oficialmente en este año 2021, vamos con este Post para ver más detalles.

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

Asimismo te invito a escuchar el Podcast: “Con Que Lenguaje De Programación Comenzar Para El Desarrollo Web”:

Spotify: Sound Cloud: Apple Podcasts

Bien ahora continuemos con el Post: Componentes del Lado del Servidor en React JS (Preview). 

En este Post vamos a ver la preview que el equipo de Desarrolladores que dan soporte a React JS nos brinda, pero no es un lanzamiento definitivo, pero aún asi podemos ver lo que React JS nos permitirá hacer mediante componentes en el servidor.

Clonar Repositorio

Lo primero que debemos hacer según su documentación oficial es clonar este repositorio el cual pertenece a la cuenta oficial de React JS en GitHub.

Luego ingresamos al directorio de la Demo que se nos ha clonado o descargado.


Con eso tenemos descargada la demo de componente de servidor en nuestro sistema.

Despliegue del Proyecto

React JS trabaja de la mano con Node JS, si no lo tienes instalado te recomiendo leer el tutorial Que es y Como instalar Node JS.

Que es y Como instalar Node JS (Windows)

Ya que luego de clonar el repositorio con la Demo ingresamos al directorio que se nos descargo, debemos instalar las dependencias que tiene el proyecto para que pueda funcionar sin problemas, para esto ejecutamos el siguiente comando.


Con eso tenemos instalados todas las dependencias del proyecto, ahora si corremos el siguiente comando para correr el servidor y vamos a la ruta local con el puerto 4000 http://localhost:4000/, nos debe tirar un error.

El error de la imagen anterior se debe a que no hemos conectado nuestro proyecto a la base de datos PostgreSQL, esta base de datos es la que el equipo de React JS uso para este preview.

Configuración de la Base de Datos

En el siguiente video te enseño como instalar la versión 13 de PostgreSQL, la cual es la ultima versión que ha salido hasta la fecha de este tutorial, obviamente en el futuro aparecerán nuevas versión de PostgreSQL y talvez los pasos de instalación cambien, esto no depende de mi, sino de la empresa que da soporte a PostgreSQL.

Luego de instalar la base de datos PostgreSQL ingresamos mediante nuestra consola de comandos a PostgreSQL, yo uso la consola de comandos GitBash, tu puedes usar la que desees, ejecuto el siguiente comando.

Nota: La documentación de React JS nos dice que ingresemos ejecutando el comando psql postgres, pero a mi me tiro error, así que usaré el comando psql -U postgres a continuación. (He colocado comentarios en cada comando para explicar que hace cada uno).


Ahora estando en PostgreSQL, en la consola ejecutamos los siguientes comandos para crear nuestra base de datos notesapi. (He colocado comentarios en cada comando para explicar que hace cada uno).


Ahora vamos a conectar nuestro proyecto a la Base de Datos notesapi que creamos anteriormente. (He colocado comentarios en cada comando para explicar que hace cada uno).


Ahora que ingresamos a PostgreSQL vamos a conectarnos a la Base de Datos, ejecutamos los siguientes comandos. (He colocado comentarios en cada comando para explicar que hace cada uno).


Ahora hay que conectarla vista Front a nuestra base de datos, cuando descargamos o clonamos la Demo, se nos descargo un archivo llamado credentials.js, este archivo se encuentra en el directorio principal del proyecto, lo abrimos y agregamos nuestros datos de conexión a la base de datos que creamos anteriormente en PostgreSQL.


En esta Demo, el equipo de React JS incluyo unos datos que podemos insertarlos en la tabla notes, ejecutando el siguiente comando de Node JS para insertar seeds.


Por ultimo corremos el servidor de React JS con el siguiente comando.


Si accedemos a la ruta local con el puerto 4000 http://localhost:4000/ deberíamos de ver el proyecto funcionando sin problemas.

Con esto entonces hemos logrado ejecutar la Demo o Preview que el equipo de React JS puso a disposición para nosotros.

Al inicio de este Post he colocado una Demo para que veas el proyecto en Acción.

Conclusión

En este Post hemos aprendido a usar la Preview de Componentes de React JS en servidor, personalmente me parece genial esta característica. Hay que considerar que React JS trabaja con Node JS y Node JS funciona del lado del servidor, entonces esto le da un plus importante y si el equipo de React JS esta direccionando por ese lado esta nueva funcionalidad, pues lograrán hacer geniales funcionalidades en sus componentes de lado del servidor, veamos que pasa en el futuro.

Nota (s)

 

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

Salir de la versión móvil