¿Qué es React?

React

¿Qué es React?

Cuando desde el departamento de Recursos humanos de mi empresa me preguntaron en qué tecnologías estaba interesada, para una formación continua, mi respuesta fue la siguiente:

React

Ahora que estoy integrada en un equipo de desarrollo de un gestor documental en SharePoint Online con tecnologías React, Redux, UI Fabric… os voy a transmitir (o intentarlo al menos) algo de lo que estamos haciendo, empezando primero por los conceptos, la teoría, aunque ésta siempre es, menos interesante, pero a la vez, muy importante.

 

¿Qué es React?

Respuesta

R1

React también llamada ReactJS es una librería de JavaScript creada por Facebook y publicada como OpenSource, que se diseñó para ayudarnos a desarrollar aplicaciones SPA (Single Page Applications).

 

React nos permite diseñar e implementar la interface de una aplicación web. Se puede decir que es la V en un patrón MVC (Model, View, Controller) o MVVM (Model-View-ViewModel).

 

 


Para empezar a desarrollar en React necesitamos instalar una serie de dependencias, en nuestro proyecto, hemos usado NPM como gestor de dependencias. También es necesario tener instalado Node.js en nuestro equipo. Puedes seguir los pasos de creación con la ayuda de este post:

http://blog.jakoblind.no/react-with-webpack-babel-npm/

En la imagen podemos ver la estructura de una de nuestras apps y tengo que decir que es muy diferente a lo que estábamos acostumbrados.

 

R2La carpeta src es el directorio principal donde vamos a colocar los archivos de nuestros componentes

 

El archivo package.json contiene las dependencias de npm además de la información del proyecto.

 

El punto de entrada a la aplicación es el archivo scr/app.js, en éste se inicializa el componente principal, a través del método render.

 

 

 

Dicho método recibe como primer parámetro el componente a renderizar y como segundo el elemento del DOM donde el componente va a ser renderizado:

Imagen 2 React.jpg
Ejemplos de aplicaciones desarrolladas íntegramente con React es Instagram así como las apps móviles de WhatsApp y Uber, entre otras.

 

¿Qué es y cómo funciona el Virtual DOM?

Respuesta

Del Virtual DOM podríamos decir que es el secreto de React. El Virtual DOM (Document Object Model) es una de las características de React que convierte a esta librería en una librería extremadamente eficiente.
R4

 

En lugar de generar directamente elementos HTML y modificar el DOM, que es una operación muy lenta, los componentes de ReactJS renderizan un modelo del DOM en memoria.

Una vez generado el Virtual DOM completo, ReactJS se encarga de buscar las diferencias entre el DOM real y el virtual y realizar únicamente las modificaciones necesarias sobre el DOM real.

¿Cómo funciona ésto? pues utilizando un algoritmo para calcular diferencias (diffing algorithm) entre el DOM renderizado y el virtual y sólo aplica las diferencias como ya he dicho anteriormente.
R5

 

Un ejemplo práctico para entender el funcionamiento:

 

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, si tomamos ese objeto y le hacemos algunos cambios. Se ha añadido un bigote, unos bíceps y otros cambios. En React, cuando aplicamos estos cambios, dos cosas ocurren:

– En primer lugar, React ejecuta un algoritmo de «diffing», que identifica lo que ha cambiado.

– El segundo paso es la reconciliación, donde se actualiza el DOM con los resultados de diff.

Lo que hace React, ante estos cambios, en lugar de tomar a la persona real y reconstruirla desde cero, sólo cambiaría la cara y los brazos.

 

¿Por qué usar esta librería en vez de otras?

Respuesta

El Virtual DOM es una de las características importantes en la toma de decisión.

Es también una de las diferencias importantes con uno de los frameworks más utilizados como es Angular junto con el binding que en Angular es bidireccional y en React es unidireccional.

¿Esto último que significa? Pues que el flujo de información a través de los componentes de React es unidireccional. Cada componente pasa la información a sus componentes hijos y no al revés. Esto hace fácil el seguimiento y razonamiento sobre cómo los datos se mueven a través de la aplicación. Gracias a este detalle, es más sencilla la planeación y detección de errores en aplicaciones complejas.

 

En la imagen siguiente se puede ver una comparativa entre el framework de Google y la librería de Facebook:
R6

 

Otra característica de React es que puede ser combinado con cualquier otra tecnología rápidamente, puesto que no asume ninguna instalación o estructura previa. Por lo tanto, es fácil comenzar un proyecto nuevo con React, así como integrarlo a uno existente.

 

¿Qué es JSX?

Respuesta

JSX es un lenguaje, el cual, es una extensión al lenguaje JavaScript que permite agregar etiquetas XML en un fragmento de código JavaScript. Esto nos permite definir el código HTML de nuestro componente directamente en el archivo JavaScript.

No es obligatorio usar JSX, se pueden implementar usando código JavaScript regular, con la desventaja que el código resultante es más difícil de entender para los desarrolladores.

Debido a que los navegadores web no entienden el código escrito en JSX, se hace necesario usar un traductor para convertirlo a código JavaScript regular. Babel es un compilador para la nueva generación de JavaScript que precisamente puede realizar dicha traducción.

 

¿Qué es la arquitectura basada en componentes y que ventajas aporta?

Respuesta

Las interfaces que se crean con React están basadas en componentes independientes, dinámicos y reutilizables.

React hace uso del paradigma llamado Programación orientada a componentes.  

React utiliza una sintaxis basada en XML (similar al HTML) para construir sus componentes usando el Virtual DOM. Esta sintaxis se transcompila a JavaScript, por lo que en el fondo sólo es JavaScript presentado de una forma un poco más «visual».

React plantea otra forma de construir vistas. Con React estamos agrupando la lógica y la presentación relacionadas en módulos independientes.

En la siguiente imagen os presento uno de los componentes de una de nuestras apps:
R 9
React

 

Existen tres conceptos importantes en referencia a los componentes: Ciclo de vida, propiedades y estado.
R8

Ciclo de vida

Me ha gustado mucho una frase que he leído:

“Los componentes nacen, crecen, se renderizan y mueren 🙂 ”

Es verdad, cuando se crea un componente éste realiza unas operaciones internas y cuando se renderiza en el DOM, realiza otras operaciones. Cuando el usuario interactúa con el componente, se realizan más operaciones. Cuando el componente es eliminado del DOM, realiza sus últimas operaciones.

Propiedades (props)

Haciendo analogía con el HTML tradicional, las propiedades son los atributos de las etiquetas. Son datos de entrada pasados al componente. Son inmutables internamente. Haciendo más analogía, son equivalentes a los argumentos de una función. Entrada necesaria para generar una salida.

Estado (state)

Si quisiéramos tener código estático inmutable, escribiríamos HTML simplemente. Los componentes a diferencia del código estático, pueden mantener un estado interno y mutable que influye en el comportamiento y aspecto del componente. Este estado puede ser cambiado en cualquier momento, interna o externamente, y el componente se adaptará instantáneamente a su nuevo estado.

 

 

Hasta aquí la teoría, ahora os animo a entrar en este mundo apasionante de React ? 

Yo actualmente, me encuentro en los inicios del aprendizaje, me queda aún mucho por crecer en esta tecnología, pero, eso sí con mucha ilusión.

Como dije anteriormente, desarrollar en React es muy diferente a lo que estaba acostumbrada.

Al principio te resulta muy complejo, pero poco a poco, vas viendo la luz, por supuesto gracias a la ayuda inestimable de mi tutor y “profe” Javier Ordoñez Castro ¡Muchas gracias Javi! y como no, de mi jefe de proyecto Luis Miguel Rodríguez González. Gran equipo al que tengo el orgullo de pertenecer.

Elena foto

 

Elena González Lagares

Desarrolladora SharePoint & .Net

MVP CLUSTER

4 Comentarios

Responder a Elena González Lagares Cancelas Repuesta

Comentario
Nombre
Email
Sitio Web