Calendar Icon - Dark X Webflow Template
October 2023
Clock Icon - Dark X Webflow Template
7
min lectura

¿React, Native, Electrón, Next, Redux? ¿Por qué hay tantos React? ¿Cuál elegir?

Estás interesado en el desarrollo web ya sea en Front-End o Back-end, ¡bien!. Tienes las nociones y estás ahora dispuesto a escoger un buen framework para agilizar tus proyectos de desarrollo, descubriste React que es un framework muy popular y resonado en el área de desarrollo Front-End, pero espera! descubres que no solo hay uno sino varios términos y no sabes cual escoger o en qué consiste cada uno, ¿React Native?, ¿Redux?, ¿React Electrón?... ¿Qué es todo esto?, No te preocupes en esta sección te guiaremos a diferenciar cada uno y cual podrías escoger.

¿Qué es React?

Como ya lo mencione en la breve introducción, a rasgos generales React es un Framework de Javascript muy popular en el desarrollo de una SPA ( Single Page Application), para la comunidad describirlo como Framework o una Biblioteca será tema a discutir en otra sección, por lo pronto este Framework que fue desarrollado y lanzado en 2013 por el equipo de Facebook, dio un gran revuelo pues sus prestaciones y características permiten un ágil desarrollo de Aplicaciones y mantenimiento de las mismas, se es de conocimiento que React es un Framework que nos permite separar cada sección de una Página Web en partes más pequeñas o módulos como si de Legos. Imaginate tener una página con mas de 100 cajas de imágenes, cada una con un botón que te redirija a otra sección te imaginas el código para cada caja tuvieras repetirlo esas 100 veces, eso sería abrumador!, es ahí donde entra el concepto de separar tus secciones o cajas y extraerlas en un solo componente el cual pueda recibir una imagen dinámica cada que lo necesites y repetir el componente con código de javascript como un “.forEach”, “.map()” etc.. 

Otro concepto que habrás escuchado es la “Reactividad”.

Definir la Reactividad en estos momentos sería adentrarnos a conceptos más avanzados de la ingeniería de software así que no quiero abrumarte y atraeremos el concepto como una funcionalidad que proporciona el Framework para poder reaccionar a cambios que el usuario o nosotros como desarrolladores implicamos en una variable y este cambio se vea reflejado en el DOM (Document Object Model) o en su caso el Virtual-DOM ya que React no manipula directamente nuestro DOM del navegador Web. 

¿Quién es quién?

Nuevamente debido a la gran popularidad que ha tenido React y de la mano muchas características poderosas que ofrece la última revisión de Javascript con ES6 se ha podido desarrollar soluciones no solo en el lado de Front-End si no en otras áreas como el Back-End o Mobile, es aquí donde React toma partida y aprovecha estas características para dar más soluciones a la comunidad. Bien es momento de no mencionar más tecnicismos y diferenciar cada tecnología de la otra. 

React 

React es el núcleo de todo nuestro Framework, es una dependencia que alberga toda la funcionalidad de React como Hooks, Estados, Reactividad, Motor de plantillas JSX etc…. Es la dependencia base que nos proporcionará todo el dinamismo en javascript para nuestras aplicaciones.

React-DOM.

Si te interesa solo el desarrollo Front-End, esta dependencia es la que verdaderamente se encarga de modificar, utilizar y crear nuestro famoso DOM-Virtual, de aquí es donde podemos extraer y utilizar nuestras etiquetas HTML comunes como <Div>, <Body> <Footer> etc… para crear componentes personalizados.

React Native.

Native es el que debes utilizar sin salir del ecosistema de React si de desarrollo de aplicaciones móviles te interesa, esta biblioteca te permite utilizar etiquetas como si fuera un HTML común y utilizar Javascript pero enfocado a móvil, puedes asociar una caja <Div> con una vista <View> o un boton <Input type=”button” /> con un <TouchableOpacity />, de la misma forma puedes seguir utilizando conceptos como Hooks de React.

React Electrón.

Al igual que Native, React Electrón está enfocado para el desarrollo de aplicaciones de escritorio multiplataforma ya sea para Mac, Windows o Distribuciones Linux, puedes desarrollar la interfaz gráfica como si de un HTML se tratara, cabe mencionar que la implementación de este no es 100% nativa como un desarrollo con Visual Basic C++, pero te aseguro que tu experiencia de desarrollador te será muy grata pues una de sus características muy interesantes que para que sea posible desarrollar con Javascript este hace uso del motor V8 de google para interpretar las instrucciones de Javascript en código nativo del Sistema Operativo.

NextJS.

Bien, ya tienes todo el desarrollo listo en la parte de Front-End, pero ahora debes continuar con las funcionalidades de una API en el Back-End. ¿Cómo solucionar esto sin salir nuevamente de la estructura de React y Javascript y aprender un nuevo lenguaje de programación dedicado al Back?. Ahora es turno de Next, es un Framework basado en React para el desarrollo de una SPA Full-Stack, es una gran opción si de ahorrar tiempo se trata y continuar utilizando los beneficios de los Hooks que ofrece React. Uno de sus beneficios aparte de la gran escalabilidad que tiene tanto para el mantenimiento de una API como la interfaz de usuario o Front es que, el renderizado y procesamiento de las vistas del Front se realiza del lado del Servidor o mejor conocido como Server Side Rendering (SSD), ¿En que nos beneficia esta forma de trabajo? una de las más llamativas acorde a su documentación es que beneficia en la implementación de White-Hat SEO en las Páginas Web y lograr un mejor performance en el posicionamiento por los Motores de búsqueda de Google.

Redux

Para empezar Redux no es otra dependencia más para Front o Back otra,  tampoco es una herramienta propietaria de React, pero si es la más utilizada, si de Manejo de Estados Globales se trata. Si vienes de Frameworks Front-End como Vue o Angular tal vez ya habrás manejado alguna biblioteca de estado como Vuex, Pinia o NgRx (El del ícono del ajolotito). Redux es una biblioteca de Manejo de Estado que puedes implementarla sin ningún Framework pero la gran ventaja de este es que es totalmente compatible con el Ecosistema de React (Native, DOM, NextJS y Electrón). Puedes encontrar en su documentación muchas referencias para poder utilizarlo con React. Y si de aplicaciones enormes se trata Redux te ayudará a gestionar tu Estado de Aplicación de forma más ordenada.

Ventajas de React

La ventaja de utilizar React es que lleva ya varios años en el mercado del desarrollo de Software, tiene gran soporte y número en su comunidad, podrás encontrar muchas bibliotecas ya sea para Funcionalidad o Interfaz de Usuario. Su documentación esta muy explicada y tiene un gran ecosistema!. Otra de las grandes ventajas es que puedes migrar de una biblioteca a otra sin dejar de lado los conceptos base aprendidos de React como Hooks y su reactividad.

Conclusiones

En resumen, ningún framework es malo, cada uno fue hecho bajo las necesidades que un desarrollador está buscando y para una o varias áreas de implementación. Si de React te llama la atención te aseguro que no te arrepentirás y tendrás una grata experiencia codeando bajo su marco de trabajo. Utiliza el que más se ajuste a tus necesidades y saca el mejor provecho del mismo.