React y su Ecosistema | Fazt.dev

Si has usado React o has escuchado de esta herramienta y solo crees que es una biblioteca de JavaScript para crear aplicaciones Web Frontend, en este artículo te mostraré un panorama más completo de lo que es posible hacer con React y tambien te daré un resumen de otras herramientas que estan relacionadas.

¿Qué es React?

Como su documentación describe React es una Biblioteca para crear interfaces web de Usuarios

"A JavaScript library for building user interfaces."

Esta descripción es precisa por que no quiere decir que React sea un herramienta muy grande como un Framework o una solución FullStack para hacer de todo, sino que React solo se encarga de una sola cosa; de la parte Visual o la Vista (View) de las aplicaciones.

Ademas algo a notar con la definición es que no menciona interfaces Web especifacmente, sino simplemente Interfaces de Usuario, en general.

Esto es así porque React es una biblioteca que permite usar una sintaxis especial para componer interfaces llamada JSX, y que permite controlar como van cambiano los datos en pantalla, lo que quiere decir que esto se puede usar para crear interfaces en Aplicaciones moviles, aplicaciones de escritorio, y por supuesto aplicaciones web.

Así que en este articulo me gustaría mencionarte la mayoria de bibliotecas, Framworks y metaframeworks que estan basados en React.

Si tiene prisa, la lista completa de lo que se puede desarrollar con React es esta:

Apps Moviles
- React Native
- Ionic
- React Native Web
Apps Desktop
- Electronjs
- Tauri
- React Desktop
Static Site Generation
- Gastby
- Astro
- Docosaurus
Server Side Rendering
- Nextjs
Meta Frameworks
- Reedwoodjs
- Blitzjs
Presentations
- Spectacle

Y tambien cabe reiterar que es necesario saber React primero para poder aprender todas estas opciones que te voy a mencionar. Así que si no sabes nada te dejaré el curso de React para que primero puedas aprenderlo:

Curso de React

Empecemos con las aplicaciones moviles.

React Native, App Moviles

Para crear aplicaciones moviles con React actualmente tenemos principalmente 2 opciones, React Native y Ionic.

la opcion más simple es Ionic, ya que para empezar a usarlo solo tienes que instalar el CLI de Ionic y a partir de alli empezarias impotando componentes web, como Inputs, botones, etiquetas a, etiqueta p o divs, todos estos ya estan estilizados (con CSS) como si fueran componentes nativos de Android o iOS.

Solo que estos al final seran colocados dentro de un componente movil llamado WebView y que se empaquetaran como una app. Es decir que en desarrollo estaras creando una web pero al momento de generar la aplicacion esta se convetira en una app movil, usando un programa adicional (llamado Capacitor)

Lo facil de este enfoque es que no necesitas muchas herramientas como emuladores de dispositivos moviles, incluso puedes desarrollar tus apps desde un navegador.

Con Ionic estarias creando aplicaciones moviles Hibridas (es decir apps web que lucen como moviles).

La otra opcion es React Native, que como su nombre indica no estaríamos creando aplicaciones web que lucen como apps moviles (Apps Hibridas), sino Apps Nativas realmente. De hecho de todas las opciones en el ecosistema de JavaScript para crear Apps esta esta es la más popular.

React native permite importar componentes especiales de JSX que luego se convertiran a componentes nativos, es decir que aqui no usas div, sino View, no usas etiquetas p, sino Text, y así. porque esto son componentes nativos.

Las apps de react native en rendimiento son superiores a las creadas en Ionic, pero se necesita más programas al momento de desarrolar (Servidor, Emuladores, etc), y tambien las apps si bien son muy rapidas aun estan un poco por detras del rendimiento nativo. Ademas estos ultimos años, ha tenido un competidor con un entorno de desarrollo más comodo llamado Flutter, que si bien no usa Javascript como lenguaje de programacion muchos desarrolladores han estado aprendiendo este nuevo framework al ser una opcion multiplataforma que no necesita de conceptos web. Pero de nuevo si ya eres un desarrollador de react para la web, es más facil aprender REact Native.

Para saber más a detalle de esto puedes ir al video ¿Qué es React Native? y que es Flutter.

Ahora, como React native permite crear Apps moviles con componentes que no son Web, tambien hay un proyecto llamado React Native Web que son usados en empresas como Twitter, para poder convertir componentes de React Native en componentes web, es decir el proceso inverso, pasar de View a div, de Text a etiquetas p, o Image a img, y así.

Aunque esto solo lo usarias, si empezaste creando un proyecto movil y ahora quieres usar el mismo codigo para crear una interfaz web.

Por cierto tambien hay otros proyectos para crear apps moviles en React como Native Script, o Apache Cordova, sin embargo estos no son tan populares actualmente.

Electron, Aplicaciones de Escritorio con React

En Javascript tambien es posible crear apps de escritorio, usando principalmente una biblioteca llamada Electronjs, que permite usar Nodejs, C++, y código de Javascript en el frontend para crear aplicaciones de escritorio multiplataforma y usas conceptos Web.

Y como electron es basicamente un navegador pero con acceso al sistema operativo para desarrollar interfaces tambien estan los mismos asuntos que la web, por lo que tambien es normal usar Electron junto con React para crear aplicaciones de escritorio multiplataforma (Windows, Linux, Mac), por ejemplo

React se usa para controlar el estado frontend, y Electron es basicamente el backend. O tambien es posible convertir facilmente una aplicacion web creada con React a una desktop.

Aunque tambien hay otro proyecto similar a React Native pero para aplicaciones desktop llamado React Desktop o tambien esta ReactXp, sin embargo estos proyectos no ha recibido muchas actualizaciones en los años, asi que no los aconsejable usarlos.

Y si en todo caso no te gusta electron tambien hay otras opciones que ofrecen algunas mejoras de rendimiento (Wails, Tauri, node-gui) pero con APIs más pequeñas o aun en desarrollo. Puedes ver un poco más de esto en el video Aplicaciones de Escritorio con Javascript

Astro, Static Site Generators

Cuando se desarrollar proyectos web Frontend en React, el código final generado mayormente es Javascript, esto con el proposito que la interfaz sea completamente interactiva y la ejecución de eventos sea muy rapida. Esto hace que la aplicacion se sienta como una aplicacion nativa. Sin embargo para muchos sitios web como sitios de Noticias, portafolios, Blogs o cualquier sitio que publica contenido en formato de Texto, es muy importante que la carga inicial sea rapida y pueda ser indexado por los buscadores (SEO). Es por esto que en el pasado habian bibliotecas como React Static que basicamente convertian tu código de React a sitios estaticos, es decir sitios que no necesitan de Javascript, sino que son convertidos directamente a HTML.

Aunque este tipo de proyectos estan desfasados y ahora es mucho más popular usar Proyectos como Astro, Gatsby, o Nextjs para poder crear este tipo de sitios estaticos, sin tener que aprender muchos conceptos nuevos.

Lo que hacen estos proyectos es que cuando terminas de crear tu código de React, y haces build (npm run build) este transformara todos los componentes a código de HTML, que no necesitará de Javascript para mostrarse en pantalla, como si lo hubieras escrito tu mismo.

Pudiendo desplegarlo finalmente en Hosting compartidos (Cpanel) o hosting de archivos estaticos como Netlify, Firebase Hosting, o Github Pages, por nombrar algunos.

Personalmente uso mucho proyectos como Astro o Nextjs para esto, aunque si tuviera que crear documentaciones tambien hay un proyecot llamado Docosaurus que usa Mardown en conjunto con React para poder crear documentaciones de proyectos.

Nextjs, Server Side Rendering

Y aunque usar SSG (Static site generation) es simple, muchas veces en aplicaciones vas a querer componentes dinamicos y que se mantengan dinamicos mientras ofrece una carga rapida y SEO, bueno es aqui donde estan proyectos como Nextjs.

Este procesa en el backend interfaces de React para que tu frontend reciba todo generado, aunque tambien permite genrar contenido estatico y permite usar componntes del lado cliente como si fuera solo react, ademas de poder integrar código de Backend como permitirte crear tu propia REST API o GraphQL Api, y ofrecer tambien etiquetas que permiten mejorar el rendimiento de la carga de scripts, imagene o guardar en memoria cache.

Es decir usar Next es como usar una herramienta Fullstack de React para frontend y Nodejs en el backend, e incluso puedes añadir Typescript, y builders escritos en Rust para mejorar el rendimiento (swc, turbopack)

Actualmente para muchos proyectos frontend uso Next en lugar de React, por todas estas opciones, aunque si cabe resaltar que el desarrollo es un poco más lento cuando usas sus multiples tipos de renderizado, pero esto solo es desarrollo, en producción todo esto ya no sucede.

Meta Frameworks

Ahora si Next esta basado encima de React, tambien hay otros proyectos que esan basados encima de Nextjs, es decir Frameworks basados en Frameworks o Meta-Frameworks.

Por ejemplo estan proyectos como Redwoodjs o Blitzjs, los cuales permite crear aplicaciones Fulltack de inicio a fin. Es decir estos proyectos se venden como una solución para Startups donde quieren tener todas las herramientas ya integradas, por ejemplo usar Nextjs para el frontend y backend, Typescript como lenguaje, Prisma como ORM, GraphQL como API, Jest para Testing o Storybook para administrar componentes UI.

Aunque estos proyectos no son de mis favoritos, al siempre usar distintas herramientas y APIs en distinto proyectos y darme mas control para cambiarlos facilmente, sin embargo la opcion alli esta.

Otras herramientas del ecosistema

Ahora si bien React es usado para crear aplicaciones tambien hay otros proyectos que permiten usarlo para mucho más, por ejemplo estan proyectos como:

Spectacle, el cual te permite crear presentaciones al estilo Powerpoint, a traves de código, y que lucen mucho más asombrosas, ademas que puedes integrar tus bibliotecas de frontend.
ReMotion, el cual te permite editar o generar videos desde un navegador web usando código y componentes de React. Algo muy util para proyectos que quieran permitir al usuario editar desde el navegador

Aunque estas son bibliotecas que podrias usar para crear distintos tipos de proyectos base, porque en la practica tambien tiene otras biblitoecas que pueden completmentar estas y que permiten al desarrollador extender sus aplicaciones, como:

Ademas que todos estos servicios pueden ir unidos a servicios Backend as a service y sus altentivas, o CMS como Wordpress, Strapi y demas, los cuales te permitirian crear proyectos más completos.

Conclusion

EN fin espero que con esto hayas podido entender el ecosistema de React y porque es una de las bibliotecas más usadas actualmente, y no solo en la web. Si ya conoces React puedes aprender facilmnte todas estas bibliotecas que te he mencionado, pero si no te recomendaria ir por dos vidoe spara poder iniiar,

el primero es:

Javascript para aprender React
El curso de React para principiantes

con estos podras tener la base suficientes.