Trebol ITTrebol ITTrebol ITTrebol IT
  • Nosotros
  • ¿Qué Hacemos?
    • Productos
      • Infraestructura
      • Brider: Intermediación de Seguros
      • Trebol Financial Suite
    • Gestión de Talentos TI
    • Servicios
  • Comunidad
    • Blog
    • Ofertas Laborales
  • Contacto
SiguienteAnterior

¿Qué es React?

Por Trebol-it | El Blog de Trebol | 2 comentarios | 28 Junio, 2020 | 0

Por Tijer Salazar

Como hemos visto en los últimos años, las tecnologías Front-End han evolucionado exponencialmente. Dentro de estas, existen tres que son las más populares del mercado React, Angular y Vue.

Hoy hablaremos de React, una librería para interfaces gráfica que actualmente es la más usada a nivel mundial.

React.JS

React es una librería de JavaScript desarrollada y mantenida por Facebook en el año 2013, que permite construir interfaces de usuario para aplicaciones web. Esta trabaja directamente en la capa de la “Vista”, pudiendo crear elementos interactivos que se renderizan eficientemente en el navegador gracias al uso de algunas características importantes como el uso componentes, JSX y el virtual DOM.

También existe su versión para el desarrollo de aplicaciones móviles, React-Native. Pero no entraremos en profundidad en este post.

Muchas empresas hoy en día utilizan React en sus aplicaciones, entre ellas se puede encontrar a Facebook, Airbnb, Discord, WhatsApp, Netflix, Instagram, entre otras. Es por esto que React se ha convertido al día de hoy en la tecnología Front-End más utilizada como lo demuestra “Npm Trends”.

React, librería vs framework

React al ser una librería que solo se enfoque en el desarrollo de interfaces web, no tiene un ecosistema integrado en la librería que permita solucionar problemáticas comunes en el desarrollo de aplicaciones web como el enrutamiento y comunicación con APIs. Para esto es necesario complementar React con otras herramientas que se encarguen de esas problemáticas, como React-Router, Axios o Apollo.

Esto no es una ventaja o desventaja en mi opinión, es una oportunidad a tener el control de las tecnologías que deseas aplicar y elegir el momento adecuado para implementarlas. Eso sí, te obliga a tener un mayor conocimiento de las librerías, ya que se van actualizando y deprecando rápidamente.

En cambio, Frameworks como Angular, traen todo lo necesario para desarrollar aplicaciones robustas, permitiendo al desarrollador enfocarse rápidamente en el desarrollo y no en la configuración del entorno de la aplicación en etapas tempranas del proyecto. Eso sí, es menos flexible, menos rápida y puede tener una curva de aprendizaje mucho más larga por la cantidad de librerías internas React.

Dentro de las características principales de React se encuentran las siguientes.

React Components

Los componentes web (Web components) son contenedores que encapsulan fragmentos de funcionalidades y elementos de HTML de forma individual. Mejorando la reutilización, testeo y reducción del código de una aplicación web.

Una aplicación escrita en React, en términos prácticos, se conforma de varios componentes que son encapsulados y organizados en componentes de nivel superior. Definiendo los niveles y la estructura de la aplicación web.

Por ejemplo, en la pantalla de Medium, tenemos un menú con diferentes elementos que cumplen una determinada función en el menú. Cada botón, texto e iconos son considerados componentes con sus funciones y características propias. Que, a su vez, conforman al componente Menú, el cuál es el que engloba todas las características. Al ser completamente encapsulado, los componentes pueden ser reutilizados en otras partes de la aplicación si tener que generar duplicidad de código y generar una carga adicional al navegador.

Ejemplo de contenedores en React.Js

JSX

Los sitios web integran documentos HTML los cuales son leídos y mostrados por los navegadores en los diferentes dispositivos. Cuando los navegadores leen estos documentos, se crea un modelo de objeto de documento o DOM (Document Object Model). Esto no es más que la representación organizativa de una aplicación en forma de árbol.

Los desarrolladores modifican el DOM mediante el uso de JavaScript, permitiendo crear dinamismo y mejorando la interacción de los usuarios con la aplicación.

Para modificar el DOM, React implementa algo llamado JSX (JavaScript eXtension). JSX genera lo que React llama elementos de React. Estos elementos, que pueden parecer objetos HTML, nos permiten mezclar JavaScript y HTML (XML), facilitándonos el desarrollo de un código más rápido, limpio y menos duplicado.

Ejemplo de código con y sin JSX

Por último, y no menos importante, JSX mejora el rendimiento significativamente en conjunto con otra característica importante de React, el Virtual DOM.

Virtual DOM

El Virtual DOM o DOM virtual es una representación en memoria del DOM real del navegador. Este actúa como intermediario entre el estado actual de la aplicación y el DOM gráfico que está viendo el usuario en pantalla. Cada vez que se agregue, actualice o se elimine un elemento del DOM real, React genera en memoria un nuevo DOM virtual con los cambios generados en los objetos. Este DOM virtual es comparado con el DOM real del navegador, con el fin de calcular la forma más eficiente de actualizar el DOM real. Esto permite que React haga cambios solamente en los componentes que han sufrido cambios.

Etapas de la actualización con Virtual DOM

 

Las etapas del proceso de actualización del DOM real son las siguientes.

1.- State Change — En este paso se detectan los cambios en los nodos del árbol y se crea un nuevo DOM virtual en memoria con la nueva estructura generada de la aplicación. Por ejemplo en la imagen se observa que en el árbol, solo un nodo ha sido modificado.

2.- Compute diff — En esta etapa, se comparan los arboles del DOM virtual y real para detectar los cambios que se han producido, además, se elige la mejor forma de generar el cambio en el DOM real.

Siguiendo el ejemplo, React detecta que se ha realizado un cambio en un solo nodo, pero este a su vez tiene un nodo hijo que puede ser afectado. Por lo que al realizar la comparación decide que la forma más rápida de generar el cambio es actualizar toda esa rama.

3.- Re-render — Por último, se actualizan solo los cambios de la rama afectada en el DOM real. Por lo que la interfaz gráfica actualiza solo la parte afectada rápidamente.

En React, cada componente tiene un estado interno. Este estado es observado constantemente para detectar los cambios producidos en él. Al momento de que se produzca un cambio, React actualiza su DOM virtual y empieza a ejecutar los pasos descritos anteriormente. A diferencias de librerías que modifican el DOM real directamente, React solo actualizan aquellos objetos que han sido modificados.

Otra ventaja importante a la hora de utilizar esta librería, es el hecho de que React, en vez de generar un cambio en el DOM real por cada uno encontrado en el proceso de State Change, este agrupa todos los cambios detectados y genera solo una actualización en la interfaz gráfica de la aplicación.

Conclusiones

En resumen, React posee muchas virtudes para ser la librería JavaScript más utilizada en el mundo. Junto al manejo de estados de sus componentes, el uso de JSX, y el Virtual DOM la hacen una tecnología muy eficiente en rendimiento. Además, posee una comunidad muy grande y el apoyo de un gigante como Facebook.

. . .

En Trébol IT potenciamos el uso de tecnología de primer nivel, por esto, somos especialistas en React framework que destaca su rapidez, flexibilidad y organización del código. Entra a nuestro sitio web y conoce todos nuestros productos y servicios. ¿Quieres ser parte de nuestro equipo? Pincha aquí.

No hay tags.

Trebol-it

Más artículos de Trebol-it

Artículos Relacionados

  • Tips que debes tener en cuenta al momento de ir a una entrevista:

    Por Trebol-it | 0 comentarios

    La mayoría de las personas, por más experiencia que tengan, sienten que al momento de asistir a entrevistas los nervios se apoderan de ellos. Por lo mismo, prepararse para una entrevista de trabajo es primordial.Leer Más

  • ¿Cómo prepararse para una entrevista de trabajo Online?

    Por Trebol-it | 0 comentarios

    En vista de la contingencia que estamos viviendo a nivel mundial y porque estamos en medio de la Era Digital, Marco Laveda, director de Robert Walters asegura que cada día son más habituales las entrevistas laboralesLeer Más

  • ¿En qué líder debo convertirme?

    Por Trebol-it | 0 comentarios

    Por: Francisco Valdivia Conozcamos el liderazgo transformacional El Auténtico líder Hoy en día la función del líder dentro de las empresas es esencial para garantizar la eficacia y el buen funcionamiento de todos los ámbitosLeer Más

  • Mindfulness Laboral

    Por Trebol-it | 0 comentarios

    En vista de la situación mundial y el alto estrés que podamos estar enfrentando en nuestra vida cotidiana, la Organización Mundial del Trabajo nos recuerda que muchos trabajadores perciben actualmente una gran presión para cumplirLeer Más

  • Trabajar desde casa en tiempos de pandemia

    Por Trebol-it | 0 comentarios

    Cuando hablamos de lo personal y lo profesional parece que se correlacionaran de manera excluyente. Sin embargo, hoy día, y en vista de la situación mundial, muchos han tenido que saber llevar múltiples roles conLeer Más

  • Reuniones Efectivas

    Por Trebol-it | 0 comentarios

    Por: José Luis Pozo “Las reuniones de trabajo son grandes oportunidades para resolver problemas, compartir información y poner en funcionamiento la creatividad colectiva al servicio del negocio. Sin embargo, si no está debidamente planificada, unaLeer Más

  • La importancia de las nuevas tecnologías

    Por Trebol-it | 0 comentarios

    Las nuevas tecnologías de la información y comunicación (Tics) constituyen aquellas herramientas y programas que tratan, administran, transmiten y comparten la información mediante soportes tecnológicos. Su importancia en estos días es en base a buscar soluciones tecnológicas yLeer Más

  • La evolución de JavaScript

    Por Trebol-it | 1 comentario

    En un comienzo, las páginas web se conformaban por archivos de texto que eran principalmente contenido y enlaces, lo cual era suficiente para la época, ya que a inicio de los 90’s la mayoría deLeer Más

Deja un Comentario

Debes iniciar sesión para comentar.

SiguienteAnterior

Ofertas Recientes

  • 15 Marzo, 2023
    Los comentarios están deshabilitados en Desarrollador Fullstack

    Desarrollador Fullstack

  • 14 Marzo, 2023
    Los comentarios están deshabilitados en Reclutador TI

    Reclutador TI

  • 8 Marzo, 2023
    Los comentarios están deshabilitados en Arquitecto de Soluciones

    Arquitecto de Soluciones

  • 7 Marzo, 2023
    Los comentarios están deshabilitados en Desarrollador Fullstack

    Desarrollador Fullstack

  • 3 Marzo, 2023
    Los comentarios están deshabilitados en Desarrollador Fullstack

    Desarrollador Fullstack

  • 21 Febrero, 2023
    Los comentarios están deshabilitados en Qa Automatizador

    Qa Automatizador

Nosotros

Lidera el mercado a través del desarrollo tecnológico, somos tu aliado a la hora de llevar tu empresa al siguiente nivel.

Certificados

Desafío 10X

Ya somos parte de:

Contacto

Apoquindo 4499, Piso 12, Las Condes – Santiago

+562 2362 8800

contacto@trebol-it.com

@trebol-it

@trebol_it

Copyright © 2022. Todos los derechos reservados. TREBOL-IT S.A.
  • Nosotros
  • ¿Qué Hacemos?
    • Productos
      • Infraestructura
      • Brider: Intermediación de Seguros
      • Trebol Financial Suite
    • Gestión de Talentos TI
    • Servicios
  • Comunidad
    • Blog
    • Ofertas Laborales
  • Contacto
Trebol IT