Posiblemente ya hayas leído sobre React y sepas qué es, pero todavía puedes tener dudas sobre cómo funciona React js. Lo cierto es que es lo más normal del mundo, puesto que detrás de React.js hay mucha información y distintos detalles de gran importancia.
En este artículo te vamos a explicar todo lo que necesitas saber a la hora de poner rumbo hacia convertirte en un profesional de biblioteca de JavaScript de código abierto.
¿Cómo funciona React.js en realidad?
Vamos a detallar distintos aspectos que te ayudarán a entender el funcionamiento de React.js de una manera muy sencilla. Algo que se suele explicar en las primeras lecciones de cualquier curso de React JS, pero que si lo estás aprendiendo por tu cuenta quizá desconozcas.
Así también entenderás mejor el papel que hace en lo referente a la creación de páginas web.
La situación antes de React
Para que lo entiendas bien y con facilidad, hay que explicar varios conceptos y ponerse en situación respecto a cómo se encontraba el desarrollo web antes de React.js. Esta biblioteca se lanzó en 2013 y marco un punto de inflexión por la inquietud e imaginación que demostraron sus creadores.
Hasta React, todos los elementos que se engloban en el desarrollo web se trabajaban por separado (salvo muy en el pasado cuando se combinaban, pero de una manera poco favorable).
El código HTML creaba el cuerpo de la web, el CSS se ocupaba de su aspecto y el JavaScript eran las tripas, lo que hacía que la página tuviera funciones y que reaccionase de una u otra manera.
Pero estos tres pilares, imprescindibles para un buen desarrollo web, funcionaban de una manera totalmente independiente. Cada uno estaba alojado por separado dentro del servidor, en sus carpetas, sin conexión entre sí.
Lo que provocaba esta situación era que, en algunas ocasiones, no solo hubiera que repetir recursos por la falta de sinergia entre los distintos elementos de la web, sino que también se creasen problemas para reutilizar otros contenidos o incluso funciones.
Dicho de una manera sencilla: no se trataba de la forma más práctica ni productiva de trabajar.
Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier aprendiz de programación.
Sin embargo, si quieres acelerar tu aprendizaje, te recomendamos ver esta guía con los mejores cursos de React online. Los hemos seleccionado y analizado minuciosamente para ayudarte a elegir el ideal.
React lo combina todo
Debido a esta situación, un equipo de ingenieros que trabajaban en Facebook tomaron la iniciativa de buscar una solución al problema.
Su objetivo era que todo se pudiera combinar en un mismo paquete de una vez por todas, pero que el resultado fuera tan flexible y fácil de usar que no se produjera ningún tipo de inconveniente y que todo fuera sencillo.
Para ello lo que hicieron fue crear los componentes, que son los paquetes que engloban HTML, CSS y JavaScript. Dentro de lo que se establece en la naturaleza de un componente, el código HTML y el JavaScript tienen que ser de conexión inseparable, pero el CSS se entiende como un código combinable.
A esto se añadió la introducción de una notación adicional conocida como JavaScript XML, más famosa por sus siglas JSX. Con esta notación se consigue simplificar el desarrollo de aplicaciones y se evitan los problemas que aparecieron en el pasado cuando el código HTML y otros elementos del desarrollo web también estaban habitualmente combinados.
¿Qué es JavaScript XML (JSX)?
Su concepto se presenta como una ampliación de la sintaxis fundamental de JavaScript, implementada con la intención de dar capacidad para compilar un objeto de JS con la tarea de mapear un elemento que corresponda al objeto del documento (DOM, en el siguiente párrafo te lo explicamos mejor).
El uso de JSX permite la creación de DOM virtuales, caracterizados por el bajo consumo de recursos y por su peso ligero. A la hora de trabajar con React.js, en el momento en el que se produce algún cambio en su estado, se realiza una ejecución rápida de las funciones y se plasma en una representación virtual de la web.
Los resultados se plasman también en el DOM para que la página se haya actualizado de inmediato con rapidez y con un bajo nivel de consumo de recursos. Uno de los aspectos positivos del JSX es la eficacia que ofrece y la manera en la que supera ampliamente a lo que se refiere trabajar únicamente con JavaScript.
El motivo de ello es que los cálculos de las versiones anteriores y las nuevas se realizan con total inmediatez y precisión, por lo que se actualizan de una manera instantánea. Los cambios que hay que implementar en el DOM son rápidos debido a esta sincronía entre las versiones de la página que había antes y la que se ha modificado.
Los primeros pasos en el aprendizaje de React son cruciales y es muy fácil perder el tiempo con tutoriales incompletos de Youtube.
Ponle solución con una formación correcta y directa.
En este proceso se usa el DOM virtual, el cual es el recurso que evita que el DOM se tenga que estar actualizando y sufriendo modificaciones constantes que podrían empeorar la experiencia y el rendimiento.
El DOM virtual es el que corre con todo el esfuerzo, ocupándose de analizar los cambios del estado para comprobar cuáles son los nodos que hay que actualizar y modificar.
¿Cómo funciona el DOM y el DOM virtual?
Para terminar de entender el uso de React.js, hay que explicar un poco más en profundidad el funcionamiento del DOM. Pongamos que hemos dibujado un animal real que tenemos delante de nosotros, como nuestro perro.
Los rasgos principales de ese animal, como su pelo, el tipo de cara, sus orejas o incluso la forma de su lengua, son propiedades actuales que están incluidas en el DOM. Pero ahora, convertimos a nuestro perro en nuestro conejillo de indias para someterlo a una sesión de peluquería y cambiamos algunos de sus rasgos en un abrir y cerrar de ojos.
Le recortamos el pelo, le ponemos ropa que parece de persona e incluso le colocamos un collar en el cuello. Cuando hayas acabado, React.js notará que has hecho algunos cambios en tu mascota.
Eso generará una reacción por parte de React. Esta consiste en dos procesos. En el primero de ellos, se pone en marcha el algoritmo diffing que hace una comparación entre la imagen previa de tu perro y la nueva. Su objetivo es ver cuáles son los factores que han cambiado.
El segundo es un proceso de sincronía en el que el DOM recibe la información del diffing para ponerse al día.
Aplica este tipo de idea a una página web y entenderás cómo funciona React.js en base al DOM virtual, que se trata de la forma en la que las modificaciones que se hayan realizado se trasladan a una página virtual a modo de sistema de garantía que evita riesgos innecesarios.
Además, en todo este proceso no hay cambios genéricos, sino que el DOM solo se actualiza realmente con lo que ha cambiado. No se vuelve a repetir el proceso de copia de todo lo que ya estaba, simplemente se concentra en lo nuevo.
El DOM virtual evita que se tengan que hacer renderizados completos de todo el código y que así el sistema gane en recursos, eficacia y tiempo. Es algo que lleva a que React.js sea una de las mejores ideas que han entrado en juego en el desarrollo web en los últimos años.
