¿Qué es React JS? ¿Cómo funciona?

En la actualidad encontramos diversas tecnologías para desarrollar aplicaciones web. Una es React de JavaScript. Si quieres conocer sus aspectos clave, ¡quédate leyendo este contenido! Aquí descubrirás qué es React JS, cómo funciona y más información relevante. ¡Empecemos!

 

 

¿Qué es React JS?

React es una biblioteca o librería de código abierto que está escrita en JavaScript. Fue desarrollada por Facebook en el 2013 con la finalidad de facilitar la creación de componentes reutilizables e interactivos para las interfaces de usuario.

Uno de sus puntos más destacados es que no solo se usa en el lado del cliente, sino que también se puede representar en el servidor y trabajar juntos.

Son datos interesantes que React se utiliza en Facebook para la producción de componentes y que Instagram está escrito enteramente en React. Adicionalmente, también se utiliza en otras plataformas como Netflix, PayPal, AirBnb, Uber, Reddit y Twitter.

React es una excelente alternativa para realizar todo tipo de aplicaciones web o para dispositivos móviles, así como para crear single page applications (SPA o aplicaciones de una sola página).

También se destaca por contar con un completo ecosistema de componentes, herramientas y módulos que posibilitan el desarrollo de funcionalidades complejas en poco tiempo.

 

 

¿Cómo funciona React JS?

Para comprender cómo funciona React es clave que nos situemos en un contexto, pues cuando se aprende desarrollo web se obtiene conocimiento de tres conceptos básicos:

• HTML: la semántica, estructura e información de la página web; es decir, su esqueleto.
• CSS: la apariencia de nuestra página web.
• JavaScript: básicamente es el cerebro de nuestra página. Determina qué hacer en función de lo que sucede en ella.

Sin embargo, antes de React estos conceptos funcionaban por separado, en diferentes archivos y carpetas, por lo que escalar y extraer diversas partes del código para reutilizar o migrar funcionalidades era más complicado.

Por esto, los ingenieros de Facebook decidieron incluir todo en un solo paquete, al que llamaron «componente». En los componentes, la estructura HTML y JS son inseparables, y combinables con CSS.

Esto hizo posible la implementación de una nueva notación que hace más eficiente el desarrollo de aplicaciones escalables: JSX, que significa JavaScript XML.

 

 

¿Qué es JSX?

Consiste en una extensión de la sintaxis de JavaScript que permite que compilemos un objeto JavaScript para mapear un elemento del DOM (Objeto del Documento). A través de JSX se crea un DOM virtual (que es una representación en memoria del DOM) que pesa muy poco y usa menos recursos.

Con esto, cuando React es informado de un cambio de estado, vuelve a ejecutar esas funciones y determina una nueva representación virtual de dicha página. Posterior a esto, traduce automáticamente ese resultado en los cambios del DOM necesarios, reflejando así la nueva presentación de la página.

A primera vista, esto suena como que fuera más lento que el enfoque JavaScript habitual de actualización de cada elemento según sea necesario. Sin embargo, detrás de escena, React JS tiene un algoritmo muy eficiente para determinar los aspectos desiguales entre la representación virtual de lo que es la página actual y la nueva. A partir de esas diferencias, crea el conjunto mínimo de cambios necesarios en el DOM.

Para esto, utiliza un concepto llamado DOM virtual, el cual selecciona subárboles de los nodos sobre la base de cambios de estado. De esta manera mantiene los componentes actualizados con la menor cantidad de manipulación DOM posible.

 

 

¿Cómo funciona el DOM virtual?

Imagina que tienes un objeto que es un modelo en torno a una persona. Tienes todas las propiedades relevantes de una persona que podría tener, y refleja el estado actual de la persona. Esto es básicamente lo que React hace con el DOM.

Ahora piensa que si tomamos a esa persona y le hacemos algunos cambios, es decir, le añadimos bigote y tatuajes en los brazos, es claro que lo notarás. Y React también lo hace.

Entonces, cuando se aplican estos cambios, ocurren dos cosas a continuación:

• En primer lugar, React ejecuta un algoritmo de diffing, que identifica lo que ha cambiado; y
• El segundo paso es la reconciliación, donde se actualiza el DOM con los resultados de diff.

En pocas palabras, React JS está construido para tomar las actualizaciones de estado de la página y que se traduzcan en una representación virtual de la página resultante.

Lo que hace React ante las variaciones —en lugar de tomar la imagen real y reconstruirla desde cero— es tomar los cambios de la cara y los brazos (o cualquiera que sea el cambio que se haya realizado). Esto significa que si tenías el texto en una entrada y se llevó a cabo una actualización con React, el texto no sería cambiado.

¡Ya conoces qué es React JS y cómo funciona!

Ahora bien, al momento de escoger cuál tecnología usar en el FrontEnd de un proyecto nuevo, nos enfrentamos a una delicada e importante decisión que va a influir mucho en el futuro de nuestra aplicación. Por esto es clave escoger tecnologías que complementen y faciliten el desarrollo. Y una de estas herramientas es React JS.

Pero ¿por qué debes conocer React JS? Principalmente por las novedades que otorga, como por ejemplo:

• Databinding unidireccional: promueve el flujo de datos en un solo sentido facilitando la detección de errores en aplicaciones complejas, simplificando la carga de datos y haciendo más sencilla la fase de testeo.
• DOM virtual: que evita renderizar todo el DOM cada vez que hay un cambio en la interfaz de la aplicación.

Sin embargo, antes de sumergirte en el conocimiento acerca de qué es React JS y utilizarlo, es clave que estés actualizado en lo que respecta a JavaScript, ya que es uno de los pilares de esta librería.

---