En la actualidad, existen varias tecnologías para desarrollar diferentes aplicaciones web. Frameworks de JavaScript como Angular o librerías como React y Vue son las más conocidas; y en este post hablaremos y conoceremos más sobre React.

Es una librería open source de JavaScript para desarrollar interfaces de usuario. Fue lanzada en el año 2013 y desarrollada por Facebook, quienes también la mantienen actualmente junto a una comunidad de desarrolladores independientes y compañías.

Hoy en día muchas empresas de primer nivel utilizan React para el desarrollo de sus aplicaciones, y es que entre ellas podemos encontrar Facebook, Instagram y el cliente web de WhastApp; todas ellas propiedad de Facebook, y otras como AirBnb, Uber, Netflix, Twitter, Reddit o Paypal.

Desde su lanzamiento, su uso ha ido incrementando notablemente, convirtiéndose, a día de hoy, en una de las tecnologías front-end más utilizadas.

¿Qué es React?

Como hemos comentado más arriba, es una librería de JavaScript para desarrollar interfaces de usuario. Según a quién le preguntes, puede que te digan que es la “V” de un framework “MCV”, y es que, al tratarse de una librería, React necesita ser acompañado de otras librerías para completar las necesidades de desarrollo de nuestra aplicación web.

Esto puede ser una ventaja o un desventaja dependiendo de la persona que lo utilice. Angular, por ejemplo, es un framework que nos proporciona unas herramientas completas para desarrollar una aplicación web al 100%, aunque, no obstante, no ofrece tanta libertad como React a la hora de elegir con qué tecnologías queremos trabajar. Esto es, Angular es un framework “opinionado” mientras que React es una librería que cubre una necesidad.

Arquitectura

El elemento más importante de React es el componente, que es, en esencia, una pieza de la interfaz de usuario. Como norma general, al diseñar una aplicación con React, lo que estamos haciendo es crear componentes independientes y reusables para, poco a poco, crear interfaces de usuario más complejas.

En ese sentido, React es similar a Angular, ya que toda aplicación en React tiene al menos un componente; al que normalmente nos referimos como componente raíz, que contiene otros componentes “hijos”, y estos a su vez otros, etc. De esta manera, se puede afirmar que la vista es un árbol de componentes, como se muestra en el siguiente diagrama de ejemplo:

Un componente básico se implementa como una clase de JavaScript (ES6) que tiene un estado y un método “render”:

import React from "react";

class ComponentExample extends React.Component {
  state = {
    data = ""
  }

  render () {
    return (

      <h1>Hello World!</h1>

    )
  }
}

export default ComponentExample;

El estado (state) son los datos con los que queremos trabajar e incluso mostrar cuando el componente se renderiza. El método “render”, por otro lado, es responsable de describir cómo se tiene que ver dicho componente.

Como se puede apreciar, React rompe las buenas prácticas que se han utilizado a lo largo de los últimos años al juntar la vista con la lógica, no obstante, al tratarse de pequeños componentes, el hecho de tener todo a disposición en un mismo lugar empieza a ser más un beneficio que una desventaja. Un video interesante sobre este tema es el siguiente: Pete Hunt: React: Rethinking best practices.

Virtual DOM

Es curioso no sólo el hecho de escribir la vista del componente junto a la lógica, sino escribir código HTML directamente en el archivo .js en el que se incluye el componente.

Este “código HTML”, y ahora sí que lo pongo entre comillas, no es código HTML al uso, si no JSX; un lenguaje creado por la propia Facebook que, con sintaxis HTML, compila a un objeto JavaScript que se mapeara a un elemento del DOM.
Lo que hace React es, a través de este código JSX, crear una representación en memoria del DOM; denominada “Virtual DOM”, a partir de la cual luego crea el DOM definitivo en el navegador. Este “Virtual DOM”, a diferencia del DOM común, pesa muy poco y utiliza escasos recursos para ser creado. Así que, en caso de que un componente cambiase su estado, y con ello la información a renderizar, React compararía los cambios realizados en el Virtual DOM, vería qué elemento o elementos han cambiado, y actualizaría solo esas partes en el DOM real. Al tratarse solo y exclusivamente de código JavaScript, el compilado y renderizado de todos estos cambios se realiza rápidamente.

Aun siendo desde su versión 16 una librería de por sí muy rápida y eficaz en cualquier máquina, en caso de que necesitemos realizar una aplicación web para dispositivos con pocos recursos, existe la posibilidad de usar una alternativa, Preact, que sigue la misma API y patrones que React, pero con un tamaño menor.

Conclusión

Posee unas virtudes que gustaran o no dependiendo de la persona o del proyecto en el que se trabajará. Queda bastante claro que ha venido para quedarse, y el incremento gradual de su uso lo avala.

Si tienes experiencia con otros framework, como Angular, a pesar de tener formas diferentes de trabajar, la filosofía de su utilización es similar, así, que sin duda, recomiendo encarecidamente aprender sobre esta librería ya que puede llegar a ser indispensable en el futuro.
En próximos posts ahondaremos más en el propio código de React con ejemplos prácticos y hablaremos de otras librerías como React-Router, Redux o React-Intl que hacen que sea una librería más que versátil.
Espero que os guste el post y que os sea de utilidad, y, en caso de cualquier duda, ¡no olvidéis preguntar! ¿Y tú, te animas a usar React?