¿Qué es React? Una introducción al popular framework de JavaScript

Para responder qué es React es necesario explorar su historia. Al ser una de las librerías de JavaScript más utilizadas en el sector tecnológico, conocerla es fundamental para todo aquel que quiera desempeñarse como desarrollador web. Exploremos más a fondo esta maravillosa herramienta tecnológica.

En primer lugar, ¿qué es exactamente? En pocas palabras, React es la biblioteca de JavaScript más popular actualmente. Se utiliza para el desarrollo frontend, es decir, para crear la parte que el usuario ve de una aplicación o sitio web—a diferencia del backend, que trata de las partes “entre bastidores”, como servidores y bases de datos. 

React no es un lenguaje de programación, sino una biblioteca, lo que significa que su código está diseñado para añadir funcionalidad a JavaScript. En ocasiones ha sido denominado framework de JavaScript, pues se comporta de manera similar a otros frameworks y, a menudo, se agrupa con ellos. 

Los frameworks funcionan como los cimientos de un hogar y aseguran un acercamiento sistemático al trabajo necesario para la creación del sitio o aplicación web. Ejemplos de frameworks son Angular, Spring, Django y Laravel. Aunque React no es un framework, sí existen frameworks que se basan en React, entre ellos NextJS, Gatsby y Grommet.   

Para entender a fondo qué es React, es importante saber que su historia comienza con un obstáculo comunitario. Esta se remonta al 2010, pues en ese año varios programadores de Facebook se enfrentaron a una problemática: la reciente aplicación para anuncios de Facebook recibió una actualización con considerables nuevas características, lo que incrementó la cantidad de mantenimiento y, por tanto, las horas laborales de los desarrolladores.

Para enfrentarse a este obstáculo, Jordan Walke, un ingeniero de software en Facebook, creó lo que se considera la versión prototipo de React: FaxJS. Esta se basó en XHP, una librería en HTML para PHP.

La adquisición de Instagram por parte de Facebook en 2012 hizo deseable que la tecnología del prototipo React migrará a esta aplicación y en 2013, Walke, a la par de Facebook, la publicaron de forma oficial como una librería open source de JavaScript para el desarrollo de interfaces.

En 2015 React se consolidó, y tanto Netflix como Airbnb adoptaron su uso. Además, en este año se publicó React Native para su uso en sistemas operativos iOS y Android. En sus once años de existencia oficial, esta biblioteca ha recibido importantes actualizaciones que lo han consolidado como la librería JavaScript por excelencia a nivel mundial.

Los componentes en React pueden pensarse como partes de un sitio web que contienen tanto su estructura, como las comandas que dictan su comportamiento. Trabajan casi igual que una función de JavaScript, ya que simplifican las interfaces de usuario en pequeñas piezas. Los componentes tienen la ventaja de ser eficientes y escalables.

Por ejemplo, supongamos que has creado una aplicación con un botón «Publicar» que se muestra en docenas de páginas. Si más adelante decidieras cambiar el aspecto o la función de este botón, al usar componentes React sólo tendrás que editar el código una vez y aparecerá así en todas las páginas. 

Existen dos principales tipos de componentes en React:

• De función.. Al igual que las funciones de JavaScript, en React los componentes funcionales aceptan propiedades y regresan elementos. Los componentes funcionales suelen emplearse para casos en los que el componente no tienen que interactuar con otros o manejar estados de tipo complejo. Sirven perfectamente para presentar elementos UI estáticos.
• De clase. Los componentes de clase acceden a los datos de otros componentes y muestran herencia. No se recomienda su uso de forma generalizada (pues obtienen lo mismo que los componentes funcionales de forma menos eficiente), aunque son necesarios cuando existe un requerimiento en el estado del componente.

JavaScript XML, o JSX, es una extensión de sintaxis para JavaScript parecida a HTML. React utiliza JSX para permitir al desarrollador escribir texto al estilo de HTML en un código de JavaScript. Esto implica que JSX habilita la integración de estructuras HTML a React.

Beneficios que aporta JSX:

• Integra elementos de HTML en el DOM, sin necesidad de otras herramientas

• Cuando se compila el código resulta más sencillo detectar errores con JSX.

• Escribir código se vuelve más rápido cuando se utiliza JSX, y no solamente JavaScript

También es importante señalar algunas desventajas que al utilizar JSX. Por ejemplo:

• Si el código en HTML no es correcto, JSX definirá que existe un error.

• Si los elementos no están correctamente encasillados, JSX mostrará un error.

Independientemente de los posibles obstáculos que se puedan presentar al utilizar JSX, este es uno de los principales beneficios que otorga esta biblioteca. Por esta razón, todo desarrollador interesado en crear un sitio web, debería aprender esta extensión de sintaxis.

DOM o Document Object Model (documento de objeto modelo) es esencialmente la representación de una estructura conformada por elementos HTML presentes en una aplicación o sitio web. El DOM se presenta como una estructura de árbol conformada por datos que contiene nódulos por cada elemento UI presentes en un documento web. 

Dos ventajas importantes que tiene el DOM son: 1) que los desarrolladores pueden modificar su contenido a través de JavaScript y 2) pueden elegir partes específicas del código para trabajar de forma más sencilla con ella.

Ahora veamos que es como tal el Virtual DOM. En lugar de utilizar el DOM, React utiliza lo que se conoce como Virtual DOM: una copia y versión ligera del DOM original, con la única diferencia de que el Virtual DOM no tiene la habilidad de cambiar la disposición del documento web. La principal ventaja de trabajar con Virtual DOM es que su manipulación es rápida.

En Virtual DOM, cuando un componente contiene un estado y este estado es actualizado, el cambio se manifiesta directamente en la estructura del DOM. Aunque parece un proceso complicado, en realidad es más eficiente y económico. Además, otra ventaja de React es su implementación de componentes reutilizables: un componente React es como una pieza de Lego que los desarrolladores pueden crear, apilar y reutilizar en aplicaciones enteras. 

React es altamente utilizado para el desarrollo frontend de un sitio web debido a que tiene una cantidad de beneficios considerables. Entre ellos se encuentran los siguientes: 

• Eficiente. Por un lado, escribirás menos código con React, especialmente comparado con JavaScript u otras bibliotecas. Esto es porque es declarativo, lo que significa que la mayoría de los pasos específicos para realizar una tarea se gestionan entre bastidores. Además, una aplicación React se carga rápidamente y ofrece experiencia de usuario de alta calidad sin tediosas actualizaciones de página. También es escalable, por lo que es una buena opción para proyectos de cualquier tamaño. 

• Versátil. JavaScript es un lenguaje de programación sumamente popular que se utiliza para el desarrollo frontend; React es la biblioteca para JavaScript que más funciona con diferentes entornos y dispositivos. Esta versatilidad le ha permitido consagrarse como la biblioteca más utilizada para JavaScript. Aprender a utilizar sus herramientas es una necesidad para toda persona que desee dedicarse a esta área tecnológica.

• Flexible. Por suerte, React es una forma excelente de preparar tus habilidades para el futuro. Los conocimientos necesarios para crear una aplicación se aplican a todo tipo de proyectos. Esto es cierto tanto si quieres cambiar el backend de tu sitio web, diseñar una aplicación para iOS o Android, o incluso si estás creando un programa de realidad virtual. Sus posibilidades de uso son ciertamente diversas, lo que lo convierte en una biblioteca altamente flexible.

• DevX. DevX se refiere a la experiencia que tiene un desarrollador al momento de desarrollar un producto tecnológico. Uno de los grandes beneficios de esta herramienta es la comodidad y facilidad de uso, lo cual indica que provee una gran DevX. Esto no es ninguna coincidencia, pues en los 11 años que ha existido, ha logrado abstraer e integrar a sí mismo diversas soluciones a problemas típicos con las que los desarrolladores se enfrentan cuando utilizan una biblioteca. Además, ha incorporado herramientas para su trabajo fáciles de acceder y usar.

Aunado a todo esto, React tiene una curva de aprendizaje más rápida que otras bibliotecas o frameworks similares, especialmente si ya eres un desarrollador de JavaScript. Podríamos enumerar un millón de razones técnicas para explicar su simplicidad, pero lo mantendremos sencillo: React añade características a JavaScript, mientras que frameworks como Angular reemplazan la sintaxis de JavaScripts con algo nuevo. 

Puedes aplicar fácilmente tus conocimientos de React al desarrollo de aplicaciones móviles con React Native. Las aplicaciones React Native son multiplataforma y, al igual que React, también escalan bastante bien. No sólo es una buena opción para la transición al desarrollo móvil o de realidad virtual; también funciona bien con las plataformas existentes, ya que es agnóstico, lo que significa que su empresa puede cambiar de plataforma sin necesidad de abandonar React por completo. 

Por otro lado, un desarrollador con este conjunto de habilidades puede esperar una carrera con cierta longevidad. ¿Por qué? Bueno, porque además del equipo de desarrollo de Facebook, React cuenta con una sólida comunidad de usuarios y colaboradores. Por ejemplo, «reactjs» es una de las etiquetas más populares y de mayor crecimiento en Stack Overflow. 

Los proyectos de software especializados pueden desaparecer rápidamente, pero con una comunidad tan grande, cabe esperar que React siga existiendo durante un tiempo. 

Ahora que conoces las principales características y beneficios de React, es posible que te preguntes ¿cómo puedo convertirme en un desarrollador web completo y dominar esta herramienta?

Primero, si estás pensando en comenzar una nueva carrera de ingeniería de software, debes empezar por aprender todo lo básico en cuanto a la creación de un sitio web: necesitas conocer los lenguajes CSS, HTML y JavaScript, aprender Git, comprender como funciona la gestión de estado en aplicaciones y entender cómo trabajar con API.  Afortunadamente, un bootcamp online de desarrollo web como el de TripleTen puede ayudarte con este objetivo.

En TripleTen, comenzarás aprendiendo habilidades básicas, incluyendo HTML, CSS y JavaScript, desde el primer día. Luego pasarás a herramientas más complejas, como React. 

En promedio, los desarrolladores React ganan un 8.7% más que el salario de desarrollo global, lo que hace que tener experiencia con esta herramienta sea una de las habilidades de codificación más valiosas económicamente en la actualidad. Además, la gente del sector sabe que React es el futuro. Únete a un webinar de introducción para conocer más sobre esta herramienta y esta profesión, y comienza en TI en cuestión de semanas.