Frameworks

Se busca desarrollador con conocimientos en React. Seguro que has visto esto en muchas ofertas de empleo y si has llegado hasta este artículo es porque tienes curiosidad en conocer más sobre qué es React, sus principales características y qué ventajas ofrece. Pero antes una pequeña aclaración, muy al contrario de lo que suele pensar ReactJS no es un framework en sí mismo sino una biblioteca JavaScript de código abierto desarrollada por Facebook. Su principal función es la de estar diseñada para facilitar la creación de interfaces de usuario de una manera ágil y versátil. Tanto que hace palidecer a frameworks, sí frameworks, como AngularJS, del cual es rival.

Para qué sirve React

Esto nos permite también crear con React aplicaciones web SPA de una sola página e incluso aplicaciones para móviles. Esto se logra mediante el complejo ecosistemas de módulos y herramientas que se han ido creando para obtener todo el potencial de esta librería y nos permite un desarrollo flexible. Cuenta además con un muy amplio respaldo en la comunidad, debido a que cuenta con Facebook como su principal impulsor, pero además nombres como BBC, Airbnb, Netflix, Dropbox y un largo etcétera hacen uso intensivo de ReactJS. Esto nos da una idea de su alcance.

Pero antes de que te embarques en cursar un curso de React para principiantes primero hablemos de algunas de sus características.

Características de React

Al igual que otros marcos web Javascript, React.SJ tiene muchas características principales que podrían ser su consideración. Son:

• Composición de componentes.
• Desarrollo Declarativo Vs Imperativo.
• Flujo de datos unidireccional.
• Performance gracias al DOM Virtual.
• Isomorfismo.
• Elementos y JSX.
• Componentes con y sin estado.
• Ciclo de vida de los componentes.
• Ideal para aplicaciones de alta demanda
• Permite el desarrollo de aplicaciones móviles

Primeros pasos con ReactJS

Si no quieres invertir mucho tiempo en tu aprendizaje con ReactJS, además de leer la documentación existente, la mejor opción suele ser usar el paquete create-react-app que permitirá iniciar tu proyecto muy rápidamente y ahorrarte muchos pasos de su configuración inicial.

Para que nos hagamos una idea de lo que “nos perdemos” cuando creamos una aplicación o sitio web debemos realizar una serie de pasos repetitivos y si esto no fuera poco además tendremos que lidiar con los gestores de paquetes, de tareas, transpiladores, linters, builders, live reload, etc. No, esto no es divertido y nos hace perder el foco de nuestro workflow del proyecto.

Aquí es donde entra create-react-app, ofreciéndonos todo lo necesario para comenzar una app con React, pero sin tener que perder tiempo configurando herramientas.

Para instalar Create React App usaremos npm:

npm install -g create-react-app

Una vez termine la instalación, creamos la carpeta que contendrá nuestro proyecto y lanzamos el comando para comenzar una nueva aplicación:

create-react-app mi-app

Así se cargarán los archivos de un proyecto vacío pero con todas las dependencias de npm necesarias para comenzar.

Hola Mundo

Este es el más simple de los ejemplos posibles pero nos servirá para dar nuestros primeros pasos, por supuesto existen otros muchos ejemplos de React en la red pero para comenzar Hola Mundo no está nada mal:

ReactDOM.render(
  <h1>¡Hola Mundo!</h1>,
  document.getElementById('root')
);

Este muestra un encabezado con el texto “¡Hola Mundo!” en la página.

Podriamos extendernos en un ejemplo más complejo, como una calculadora o una aplicación simple, pero no es el objetivo de este artículo. Mi recomendación es que si quieres saber más y dar tus primeros pasos te recomiendo visites el curso taller Organízate con ReactJS impartido aquí en OpenWebinars.

Ventajas de React

Comentaba antes alguna de las características que implementa React sin embargo es cierto que cuando hablamos de características no siempre hablamos de sinónimos de ventajas.Pero a partir de esto podemos enumerar aquellas más llamativas:

Virtual DOM en React hace que la experiencia del usuario sea mejor

Cuando trabajamos con React no podemos evitar hablar de DOM (modelo de objeto de documento), la estructura lógica de documentos usada en formatos HTML, XHTML o XML. DOM funciona como el estándar de visualización de entradas y salidas de datos en una aplicación WEB y que tiene forma de árbol. Los navegadores web utilizan ese modelo para sus motores de diseño para transformar o analizar la sintaxis HTML, que podemos ver en los navegadores.

Fuente: W3Schools

El problema surge en qué ocurre durante el proceso de actualización del DOM construido. En un modelo tradicional, la forma en la que procesa los cambios, es decir, en respuesta a las acciones del usuario consultas o etc, un servidor verifica los cambios que se producen y refresca la información, en ocasiones actualizando todo el árbol DOM, lo cual no es para nada recomendable hoy en día dado que los árboles DOM ya son de por sí bastante grandes con miles de elementos.

Aunque existen tecnologías que resuelven esto, el equipo detrás de React logró aumentar la velocidad de las actualizaciones mediante el uso de un DOM virtual. A diferencia de otros framework ReactJS usa un proceso de copia abstracta. De este modo se pueden actualizar incluso cambios mínimos sin afectar a otras partes de la interfaz. Esto se logra mediante el aislamiento de los componentes de React y una estructura de datos optimizada en la biblioteca.

¿Es un poco como hacer trampas? Pues sí, pero además de legal, gracias a esto las actualizaciones son realmente rápidas, lo que permite la creación de una interfaz de usuario altamente dinámica. En Facebook podemos ver un perfecto ejemplo, escribiendo en el chat al tiempo que se van actualizando las noticias en el timeline general. Además, en React, los desarrolladores no tienen que vincular DOM a la funcionalidad en el front-end porque los elementos de React ya están conectados a él.

El permiso para reutilizar los componentes de React ahorra tiempo de manera significativa

Otra ventaja que Facebook introdujo con React es la capacidad de reutilizar componentes de código de un nivel diferente en cualquier momento, esto permite un significativo ahorro de tiempo en nuestros proyectos.

Como desarrolladores la posibilidad de reutilizar constantemente nuestro código es siempre un poderoso incentivo. Es bastante obvio: la reutilización es una eficiencia de diseño. Pero en programación, este proceso es un poco más complicado y no podemos llevarlo a la ligera. Así las actualizaciones del sistema a menudo se convierten en un dolor de cabeza, ya que cada cambio puede afectar el trabajo de otros componentes del sistema.

Pero aquí React supone un descanso a nuestras preocupaciones porque todos los componentes de React están aislados y el cambio en uno no afecta a los demás. Esto permite reutilizar componentes que no producen cambios en sí mismos para hacer que la programación sea más precisa, ergonómica y cómoda.

ReactJS proporciona un código estable

React permite el trabajo directo con componentes y utiliza el enlace de datos descendentes para garantizar que los cambios en las estructuras secundarias no afecten a sus padres. Eso hace que el código sea estable.

La mayoría de los sistemas de modelos de vista complejos de representación JS tienen una desventaja significativa pero comprensible: la estructura del flujo de datos. En el sistema de modelo de vista, los elementos secundarios pueden afectar al padre si se modifican. Facebook eliminó estos problemas en React, convirtiéndolo en el sistema de visualización.

En lugar de usar un enlace de datos explícito, ReactJS usa un flujo de datos en una dirección, hacia abajo. En una estructura de este tipo, los elementos secundarios no pueden afectar a los datos principales. Para cambiar un objeto, todo lo que debe hacer un desarrollador es modificar su estado y aplicar actualizaciones. En consecuencia, sólo se actualizarán los componentes permitidos.

Una biblioteca de Facebook de código abierto

React fue uno de los primeros proyectos conectados a JavaScript lanzados como código abierto por Facebook. Eso significa que ReactJS utiliza todas las ventajas del acceso al código libre: muchas aplicaciones útiles y herramientas adicionales de desarrolladores externos y una comunidad viva que aporta soluciones a diario.

Redux

Puedes odiarlo o amarlo o ambas cosas por partes iguales, pero Redux es el marco de desarrollo para trabajar creando aplicaciones basadas en React más extendido. Además, no es exclusivo pues se puede usar para desarrollar aplicaciones basadas en Angular o Vue por lo que sí ya conoces estos lenguajes Redux es el framework que todo desarrollador de React debe aprender.

Otra ventaja de Redux consiste en que simplifica el almacenamiento y la gestión de estados de componentes en aplicaciones grandes con muchos elementos dinámicos donde se vuelve cada vez más difícil su administración. Redux almacena el estado de la aplicación en un solo objeto y permite que cada componente acceda al estado de la aplicación sin tener que lidiar con componentes secundarios o usar devoluciones de llamada. Por ejemplo, cuando tiene dos componentes que comparten el mismo estado (como vistas detalladas y generales en la imagen de abajo) y se destacan en el árbol, sin Redux, los datos deben pasar a través de múltiples componentes intermediarios con todos los problemas que conlleva eso.

Si quieres saber más un buen comienzo es en el curso de manejo de estado y data fetching con Reducers y Thunks en React que te recomiendo.

React Hooks: una gestión de estado mejorada

Antes de 2019 como desarrolladores de React solo teníamos dos formas de especificar el estado: definir un estado local en el componente o utilizar marcos de gestión de estado como MobX o Redux para establecerlo como un estado global.

Para resolver esto en la versión 16.8 veíamos cómo React presentó su API Hooks. Esto nos permite compartir la lógica de estado entre componentes sin reinventar la rueda o diseñar todo el bloque de código necesario. Con el Curso de manejo de estado con Clases y Hooks en React podemos aprender a reutilizar la lógica entre componentes sin cambiar su estructura ni definir clases para cada componente y por supuesto profundizar en la teoría de JavaScript.

Versiones de React

En la actualidad existen dos versiones de React. Seguramente habrás oído hablar de ReactJS o React Native. Pero ¿cuál es mejor? ¿en qué se diferencian?

React Native es un marco móvil multiplataforma que usa ReactJS para crear aplicaciones y sitios web. React Native compila a componentes de aplicaciones nativas permite al programador crear aplicaciones móviles que pueden ejecutarse en diferentes plataformas como Windows, Android, iOS en JavaScript.

Además, ReactJS se usa para construir componentes bajo React Native, y React Native implementa ReactJS bajo su marco.

¿Cuáles son las principales diferencias entre ReactJS y React Native? Si bien hay varias similitudes entre ReactJS y React Native, también hay algunas diferencias notables. Echemos un vistazo:

• ReactJS se puede describir como un derivado base de React DOM, para la plataforma web, mientras que React Native es un derivado base en sí mismo, lo que significa que la sintaxis y el flujo de trabajo siguen siendo los mismos, pero los componentes se modifican.

• ReactJS, eventualmente, es una biblioteca de JavaScript, que permite al programador crear una capa de interfaz de usuario atractiva y de alto rendimiento, mientras que React Native es un marco completo para crear aplicaciones multiplataforma, ya sea web, iOS o Android.

• En ReactJS, el DOM virtual se usa para renderizar el código del navegador en ReactJS, mientras que en React Native, las API nativas se utilizan para renderizar componentes en dispositivos móviles.

• Las aplicaciones desarrolladas con ReactJS renderizan HTML en la interfaz de usuario, mientras que React Native usa JSX para renderizar la interfaz de usuario, que no es más que javascript.

• CSS se usa para crear estilos en ReactJS, mientras que una hoja de estilo se usa para diseñar en React Native.

• En ReactJS, la animación es posible, usando CSS, al igual que el desarrollo web, mientras que en React Native, se usa una API animada para inducir la animación en diferentes componentes de la aplicación React Native.

• Si lo que se necesita es crear una IU de alto rendimiento, dinámica y receptiva para interfaces web, entonces ReactJS es la mejor opción, mientras que si lo que se necesita es dar a las aplicaciones móviles una sensación verdaderamente nativa, entonces React Native es la mejor opción.

Pero React Native tiene también algunas limitaciones:

• Falta de bibliotecas nativas: en caso de que la aplicación tenga muchas funcionalidades, React Native puede ralentizar el proceso de desarrollo, y la razón es la falta de bibliotecas nativas y la dependencia de bibliotecas externas de terceros. Cuando uno necesita hacer cálculos complejos al mismo tiempo, se observa que Swift, Objective-C y Java tienen más velocidad, en comparación con JavaScript, ya que hay gastos generales dentro de JavaScript para controlar elementos nativos.

• Se necesita más tiempo para inicializar: el problema con React Native es que se necesita más tiempo para inicializar el tiempo de ejecución para dispositivos. Se debe principalmente al hilo de JavaScript que tarda en inicializarse.

• Requiere muchas soluciones nativas: si no se encuentra una funcionalidad específica en React Native, los desarrolladores tienen dos opciones: escribir los módulos nativos en Swift/Objective-C y Java o pedirle a cualquier desarrollador nativo que escriba uno nuevo. En pocas palabras, React Native aumenta los gastos generales tanto en gastos como en tiempo.

• Problemas de licencias y patentes: los problemas de licencias y patentes también persisten, y dado que Facebook controla React Native con una licencia de estilo BSD pero en 2017 actualizó parte de ésta definiendo que en caso de que algún desarrollador use estas plataformas de código abierto para cualquier propósito que a Facebook no le guste o viole la patente, entonces Facebook tiene el derecho de evitar que ese desarrollador use esa plataforma de código abierto.

Conclusión

Y llegamos al final de este artículo. En él hemos repasado diferentes aspectos sobre ReactJS. Aunque React es una librería muy completa, en muchas ocasiones no proporciona toda la funcionalidad que requiere un desarrollo, por lo que se completa con librerías de terceros. Sin embargo, aquí también reside su punto fuerte. gracias a sus facilidades para el desarrollo como la flexibilidad, rapidez y organización del código la convierten en una de las opciones favoritas.

De hecho, React ha tenido tanto éxito, que muchas de las aplicaciones más importantes a nivel mundial han comenzado a utilizarla para desarrollar sus webs: Airbnb, Dropbox, Netflix e Instagram.