En esta página:
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:
- Que es React JS, Historia y otros detalles
- Como crear una Página Web con React 16.9 y Bootstrap 4
- 5 Populares Aplicaciones que usan tecnología React (React Native, React JS)
- Renderizando Elementos Multimedia con React JS 16
- Validando un Formulario con React JS 16.13.1 – Parte 1
- Herramientas Esenciales para React JS en 2020 – Parte 1
- Como mostrar Datos mediante Hooks con React JS 16.12
- Como usar React JS en Codepen IO
- Puedes leer más artículos en la categoría React JS
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
git clone https://github.com/reactjs/server-components-demo Cloning into 'server-components-demo'... remote: Enumerating objects: 10, done. remote: Counting objects: 100% (10/10), done. remote: Compressing objects: 100% (10/10), done. Receivremote: Total 204 (delta 3), reused 3 (delta 0), pack-reused 194 Receiving objects: 100% (204/204), 256.58 KiB | 1.04 MiB/s, done. Resolving deltas: 100% (105/105), done. # Ingresamos al directorio de la Demo descargada cd server-components-demo |
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.
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.
|
1 2 3 4 5 6 7 |
npm install added 915 packages, and audited 915 packages in 37s found 0 vulnerabilities |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# Iniciamos sesión con nuestro usuario por defecto psql -U postgres # Ingresamos la contraseña (Esta no se ve en la consola, pero tu solo ingresala) Contraseña para usuario postgres: # Ingresamos a PostgreSQL psql (13.1) ADVERTENCIA: El código de página de la consola (850) difiere del código de página de Windows (1252). Los caracteres de 8 bits pueden funcionar incorrectamente. Vea la página de referencia de psql «Notes for Windows users» para obtener más detalles. Digite «help» para obtener ayuda. postgres=# |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# Creamos la base de datos 'notesapi' CREATE DATABASE notesapi; # Creamos un usuario para la base de datos 'notesapi' CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password'; # Damos privilegios de Super Usuario a 'notes'admin ALTER ROLE notesadmin WITH SUPERUSER; # Hacemos propietario a 'notesapi' de la base de datos 'notesadmin' ALTER DATABASE notesapi OWNER TO notesadmin; #Salimos de PostgreSQL \q |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# Ingresamos con el nombre de usuario que creamos anteriormente psql -d postgres -U notesadmin; # Colocamos la contraseña del usuario Contraseña para usuario notesadmin: # Accedemos a PostgreSQL psql (13.1) ADVERTENCIA: El código de página de la consola (850) difiere del código de página de Windows (1252). Los caracteres de 8 bits pueden funcionar incorrectamente. Vea la página de referencia de psql «Notes for Windows users» para obtener más detalles. Digite «help» para obtener ayuda. postgres=# |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
# Nos conectamos a la base de datos 'notesapi' \c notesapi Ahora está conectado a la base de datos «notesapi» con el usuario «notesadmin». # Eliminamos la tabla 'notes' si es que existe (Puedes obviar este paso) DROP TABLE IF EXISTS notes; # Creamos la tabla 'notes' con sus campos correspondientes # En ella vamos a insertar notas (Ejecuta todo el comando y presiona ENTER) CREATE TABLE notes ( id SERIAL PRIMARY KEY, created_at TIMESTAMP NOT NULL, updated_at TIMESTAMP NOT NULL, title TEXT, body TEXT ); # Salimos de PostgreSQL \q |
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.
|
1 2 3 4 5 6 7 8 9 |
module.exports = { host: process.env.DB_HOST || 'localhost', database: 'notesapi', user: 'notesadmin', password: 'password', port: '5432', }; |
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.
|
1 2 3 4 5 6 |
npm run seed > react-notes@0.1.0 seed > node ./scripts/seed.js |
Por ultimo corremos el servidor de React JS con el siguiente comando.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
npm start > react-notes@0.1.0 start > concurrently "npm run server:dev" "npm run bundler:dev" [0] [0] > react-notes@0.1.0 server:dev [0] > cross-env NODE_ENV=development nodemon -- --conditions=react-server server [0] [1] [1] > react-notes@0.1.0 bundler:dev [1] > cross-env NODE_ENV=development nodemon -- scripts/build.js [1] [1] [nodemon] 2.0.6 [1] [nodemon] to restart at any time, enter `rs` [1] [nodemon] watching path(s): *.* [1] [nodemon] watching extensions: js,mjs,json [1] [nodemon] starting `node scripts/build.js` [0] [nodemon] 2.0.6 [0] [nodemon] to restart at any time, enter `rs` [0] [nodemon] watching path(s): *.* [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting `node --conditions=react-server server` [0] React Notes listening at 4000... [1] Finished running webpack. [1] [nodemon] clean exit - waiting for changes before restart |
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)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.