¿Cómo funciona React.js?

En aquel tutorial aprendimos a configurar un entorno de desarrollo basado en Node.js porque queremos desarrollar apps frontend SPA con React.js de forma productiva, e instalamos los paquetes Webpack y Babel para automatizar estas tareas repetitivas:

  • Construir un solo archivo bundle.js con las dependencias de módulos resueltas
  • Traducir el bundle.js a EC5 para que todos los navegadores web puedan entenderlo

¿Cómo funciona React.js?

¿Conseguiste ejecutar el hola mundo? Seguro que sí.

La primera vez que configuras tu entorno Node.js parece que debes hacer un montón de cosas pero cuando le coges el truco es muy fácil, ¡y al final te vuelves productivo!

¿Y ahora qué?

Sí, aquella súper app imprimía un hola mundo en la pantalla, pero todavía no hemos explicado nada acerca del funcionamiento de React porque el objetivo era configurar nuestro entorno. Pronto vendré con un par de ejemplos prácticos, pero antes déjame explicarte los puntos clave de la filosofía React:

  1. Programación declarativa
  2. JSX
  3. Componentes que reaccionan
  4. DOM virtual
  5. Flux

Ventajas de React

Esto es bastante teórico. Solo lo entenderás al 100% cuando hayas ejecutado y comprendido unos cuantos ejemplos prácticos. Ten un poco de paciencia.

Ah, antes de que se me olvide decirlo. Para poder seguir este post necesitas saber cómo funcionan HTML y JavaScript, y también debes tener algo de experiencia programando apps JS.

1. Programación declarativa

A diferencia de JavaScript y jQuery, donde manipulamos el DOM manualmente, paso a paso, de forma completamente granular e imperativa, React envuelve el API del DOM en un paradigma de programación declarativo centrado en los componentes de la GUI.

Por si no lo sabes, en la programación imperativa uno tiene que expresar paso a paso cómo desea hacer las cosas mientras que en la declarativa dice qué quiere hacer y ya está.

El problema de JavaScript y jQuery es que al ser imperativos los desarrolladores tienen completa libertad para hacer lo que quieren. Los menos experimentados terminan escribiendo código espagheti, aunque los que cuentan con más experiencia y aplican OOP en sus diseños escriben un código JS bueno y mantenible.

JS

En mi humilde opinión, la propuesta de Facebook es buena porque nos sitúa en un escenario de desarrollo orientado a objetos EC6 donde aplicamos buenas prácticas de programación desde el minuto cero. Es algo así como un estándar o un patrón de desarrollo, como prefieras llamarlo.

Sea como fuere, React es un cambio de chip radical porque te abstrae por completo de cómo manipular el DOM, y al final terminas escribiendo poco código, aplicando buenas prácticas de programación, que es de lo que se trata.

2. Componentes GUI que reaccionan

React.js proporciona un marco conceptual novedoso basado en componentes. Los componentes son los elementos que constituyen la interfaz del usuario, por ejemplo un botón, un reloj, un buscador, etc. ¡En React todo son componentes!

En React te olvidas para siempre de manipular el DOM porque los componentes reaccionan tanto a los eventos producidos por el usuario como a los del servidor, repintándose a sí mismos cuando ocurre un cambio de estado. De ahí el nombre de la librería.

3. JSX

Cada vez que un componente (botón, reloj, buscador, etc.) actualiza su estado los desarrolladores JS/jQuery terminan repintando un determinado trozo de código HTML en el DOM. Nos pasamos media vida repintando los elementos de la GUI de forma imperativa, sin embargo es muy tedioso porque hay que escribir un montón de código.

JSX es una extensión de JavaScript inspirada en XML que facilita el repintado de elementos DOM.

Mira este ejemplo:

Gracias a JSX entendemos de un golpe de vista qué está pintando nuestro código: una etiqueta h1 con el texto Hello world!.

4. DOM virtual

React no trabaja directamente con el DOM porque es costoso en términos de rendimiento, sino con un objeto JavaScript que lo simula: el DOM virutal. Cuando ocurre un cambio de estado en la aplicación, React solo pinta los nodos que son estrictamente necesarios para reflejar dicho cambio.

5. Flux

Flux es una arquitectura de diseño de aplicaciones React creada por Facebook que simplifica el desarrollo frontend, ayudando a construir apps robustas y fáciles de mantener. Sus tres piezas clave son las vistas (componentes React), el despachador y los almacenes, y utiliza este esquema unidireccional:

React → Despachador → Almacén → React

En resumen, un componente React responde a un evento y propaga la acción al despachador central. A continuación se actualiza el modelo de datos, que lanza otro evento, y los componentes React involucrados responden repintándose a sí mismos.

Conclusión

Hasta hace muy poco tiempo, el mundo del desarrollo frontend era un caos porque los frontenders no cuentan con tanta experiencia como los backenders en aplicar buenas prácticas de programación en sus proyectos.

Por otro lado, la especificación EC5 ha dificultado la creación de aplicaciones SPA robustas porque no invita a concebir las GUIs en términos de OOP, y la naturaleza imperativa de JavaScript ha dificultado la adopción de patrones de diseño de software.

Sin embargo las cosas están cambiando a un ritmo frenético. La llegada de EC6 y los frameworks de desarrollo frontend están dando un fuerte impulso a la adopción de buenas prácticas.

React.js y Flux son las propuestas de Facebook que solucionan este problema con programación declarativa, componentes GUI que reaccionan, JSX, DOM virtual y Flux.

¡Todo esto es muy teórico!, pronto vendré con unos ejemplos prácticos que te ayudarán a entenderlo mejor.

3 comentarios
  1. Pablo
    Pablo Dice:

    muy buena info. Tendrias que analizar tambien Vue.JS, propuesto por Laravel.
    Realmente tambien esta bastante bueno y muy sencillo de usar.

    Responder

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *