1.1 Qué es React?
React es una biblioteca para implementar interfaces web. Sin embargo, React solo cubre la capa de vista, es decir, la representación de la interfaz de usuario. En cuanto a la estructuración de la lógica de negocios y otras relaciones arquitectónicas, la biblioteca no hace ninguna especificación, lo que se traduce en un mayor grado de libertad en el diseño de interfaces en comparación con otros frameworks y bibliotecas. Esta libertad tiene la desventaja de que es difícil, especialmente para principiantes, aprender a usar React y estructurar bien aplicaciones más grandes. Este obstáculo de entrada comparativamente alto, combinado con una curva de aprendizaje escalonada, es también uno de los mayores puntos de crítica a React. Sin embargo, el esfuerzo adicional inicial en el aprendizaje se amortiza rápidamente en el desarrollo. El sitio web oficial del proyecto, con mucha más información y un tutorial, se puede encontrar en https://react.dev.
Comenzar en el mundo de React es mucho más fácil con herramientas como Create React App. Como muchas otras bibliotecas y frameworks de JavaScript, React es un proyecto de código abierto. Sus desarrolladores han optado por utilizar la licencia MIT de código abierto, que es bastante abierta ya que permite el uso privado y comercial, requiere que se indique la licencia y los derechos de autor y excluye cualquier responsabilidad. El código fuente del proyecto se mantiene en GitHub y está disponible en forma de paquetes NPM. NPM es actualmente el gestor de paquetes más grande del mundo. Se utiliza para casi todos los proyectos de JavaScript y proporciona un repositorio público y una herramienta de línea de comandos para la gestión de paquetes.
React se desarrolló con el motivo ulterior de que la biblioteca se pudiera usar en múltiples plataformas. Este enfoque también explica por qué la biblioteca se divide en varios paquetes. De este modo, los componentes específicos de la plataforma, como el renderizador, que es responsable de renderizar la aplicación, se pueden reemplazar con poco esfuerzo, mientras que el resto de la estructura permanece intacta. En este capítulo, conocerá dos partes esenciales de React con más detalle, el renderizador y el reconciliador, que se encargan de encontrar las diferencias entre dos estados de la aplicación para renderizar la aplicación de la manera más eficaz posible.
1.1.1 Aplicaciones de una sola página
Por lo general, se usa React para implementar aplicaciones de una sola página. El concepto clave de este tipo de aplicación es que no es necesario recargar por completo el navegador cuando se va a mostrar un nuevo estado de la aplicación. De ahí el nombre de página única, ya que la aplicación consta básicamente de una sola página HTML. Esta página se personaliza mediante JavaScript para reflejar el estado actual de la aplicación. Sin embargo, este tipo de aplicación web tiene la desventaja de que el proceso de carga inicial tarda mucho más que con un sitio web tradicional. La razón es que es necesario cargar todos los recursos necesarios para renderizar la aplicación. Sin embargo, existen soluciones establecidas para este problema, a saber, la carga diferida y la renderización del lado del servidor, que conocerá más adelante en este libro.
Para los usuarios de una aplicación web, el enfoque de una sola página es mucho más conveniente que un enfoque de varias páginas, donde las vistas individuales de la aplicación deben volver a cargarse cada vez que se cambia la página, ya que las transiciones entre las vistas se pueden diseñar de manera mucho más fluida. Para una aplicación React, una arquitectura de varias páginas solo es una opción en casos raros y excepcionales, porque se debe cargar todo el código fuente de React para cada proceso de carga. Este problema se puede minimizar utilizando la memoria caché del navegador para que solo el primer proceso de carga tome más tiempo y todos los posteriores se ejecuten mucho más rápido. Sin embargo, después de cargar el código fuente, se debe ejecutar React y debe construir la estructura visible de la aplicación.
Además, una recarga en el navegador hace que el estado actual de la aplicación se descarte en el frontend y luego tenga que volver a compilarse. Para una aplicación React, esto significaría que el estado de todos los componentes tendría que almacenarse en el lado del servidor o en el almacenamiento web del navegador. En una aplicación de una sola página, el estado de la aplicación se conserva durante una sesión del navegador y se puede acceder al contenido de la memoria y colocar objetos allí.
React aprovecha las características de una aplicación de una sola página para ganar rendimiento, lo que hace que parezca que las aplicaciones web son bastante similares a las aplicaciones nativas. Sin embargo, cuando React alcanzó el nivel de optimización que tiene hoy, la biblioteca había recibido numerosas mejoras y mejoras.
1.1.2 La historia de React
En comparación con su competencia, React está en el medio si nos fijamos en la apariencia de los lanzamientos iniciales. La primera versión de Angular se lanzó en 2009; Vue.js se lanzó en 2014. React se ha utilizado en Facebook desde 2011 y ha tenido una historia colorida desde entonces. Originalmente, se utilizó para el elemento central de la plataforma social, el newsfeed. Luego, en 2012, React llegó a Instagram, que fue adquirida por Meta. La decisión de utilizar React también contribuyó significativamente a la abstracción de la biblioteca.
El surgimiento de React
La historia de React comienza en 2011 bajo el nombre de FaxJS. Jordan Walke desarrolló un prototipo de React usando esta biblioteca. Uno de los elementos centrales de FaxJS era la representación perfecta, ya sea del lado del servidor o del lado del cliente; incluso esa primera versión ya era independiente del entorno. Además, la capacidad de respuesta jugó un papel destacado. Cuando se realizan cambios en los datos de una aplicación, el frontend debe adaptarse automáticamente. La representación rápida de contenido y los tiempos de carga bajos fueron otra característica de FaxJS. Similar a React, la biblioteca adoptó un enfoque declarativo y orientado a componentes para construir aplicaciones gráficamente. FaxJS, a su vez, se inspiró en XHP, un marco de componentes HTML.
En 2015, React agregó soporte a otra plataforma además del navegador con aplicaciones nativas: React Native.
El salto de la versión 0.x a la versión 15
React sigue el enfoque de control de versiones semántico, donde la versión de un software consta de tres números de versión: versión principal, versión secundaria y nivel de parche. Durante mucho tiempo, React se desarrolló en la versión 0.x como parte de actualizaciones menores. Esta práctica es bastante común en proyectos de código abierto y tiene como objetivo indicar que el proyecto está en sus primeras etapas. Durante este tiempo, también se esperan cambios importantes para versiones menores, lo que, según el control de versiones semántico, solo puede suceder cuando se aumenta la versión principal. En general, una versión 0.x significa estabilidad limitada. Este enfoque ha demostrado ser exitoso en otros proyectos, como Node.js. Nuevamente, el proyecto estuvo en esta fase de desarrollo durante varios años. El salto a una versión principal, como en el caso de React a la versión 15, tiene como objetivo indicar a los usuarios que el proyecto ha alcanzado la madurez y estabilidad de producción completas.
React siempre se ha utilizado en directo en la plataforma de Facebook. Allí, las nuevas versiones se suelen utilizar antes del lanzamiento real, por lo que en ese momento ya se han probado exhaustivamente en la práctica. Esto y los muchos años de uso en sistemas de producción hasta ese momento se vieron aún más subrayados con el salto a la versión 15.
El cambio a la versión 15 en abril de 2016 trajo consigo algunos cambios importantes en React. Por ejemplo, se eliminó la compatibilidad con Internet Explorer 8. El proceso de desarrollo se volvió más transparente con la introducción de las solicitudes de comentarios (RFC). Desde la introducción de este proceso de desarrollo, se han publicado los cambios o las solicitudes de cambio para React como RFC y se han puesto a disposición para su discusión. Estas RFC se pueden encontrar en GitHub en https://github.com/reactjs/rfcs. Además, y para mejorar la transparencia, se publican las notas de las reuniones del equipo central de React.
La innovación técnica más importante de React 15 fue la mejora significativa en el manejo del DOM del navegador. En este contexto, se utilizó el método createElement en lugar del método innerHTML utilizado anteriormente. Además, se eliminó la necesidad de envolver texto en elementos span y se completó la compatibilidad con gráficos vectoriales escalables (SVG).
React 16: El próximo gran salto
Durante mucho tiempo, la comunidad de React estuvo esperando ansiosamente el lanzamiento de esta versión. El corazón de esta versión era el nuevo conciliador Fiber. Un reconciliador es el algoritmo que calcula las diferencias entre la versión actual y la siguiente de la interfaz gráfica. Se suponía que Fiber traería un aumento significativo del rendimiento y, lo que es más importante, allanaría el camino para futuros desarrollos y nuevas características. Esto se volvió necesario porque el conciliador de pila alcanzó sus límites, especialmente con las animaciones. Sitios web como https://isfiberreadyyet.com ilustran el estado de ánimo en ese momento. muestra cómo se veía el sitio web el 26 de marzo de 2017.
El sitio web responde si la nueva versión ya está disponible con un No bien visible. También puede ver el estado de las pruebas unitarias de la biblioteca.
El 26 de septiembre de 2017, finalmente llegó el momento: React 16 se lanzó al público como la nueva versión estable de React.
Con el nuevo algoritmo de reconciliación, cuya funcionalidad describiremos con más detalle en este capítulo, y versiones menores posteriores, se han agregado numerosas mejoras y perfeccionamientos al núcleo de React:
React 16.2
El ciclo de vida de los componentes hasta esta versión no estaba orientado a que se pudiera cancelar la creación del árbol de componentes. Se suponía que los nuevos métodos de ciclo de vida harían posible esto. Una posible razón para tal cancelación es, por ejemplo, un cambio de mayor prioridad, como se usa en las animaciones. Una segunda característica que vale la pena mencionar en esta versión es la finalización de la API de contexto, que se usa para intercambiar información entre componentes a lo largo de la estructura del árbol. Esta interfaz fue reconstruida con algunos ajustes para hacerla más cómoda de usar.React 16.4
Una de las características más importantes de React es que la biblioteca es independiente de la plataforma, por lo que se puede utilizar tanto en dispositivos móviles como en sistemas de escritorio. Para ello, se agregó a la biblioteca compatibilidad con eventos de puntero. Por lo tanto, ahora las superficies táctiles y los lápices también son compatibles de forma nativa como dispositivos de entrada.React 16.6
Un tema importante en el desarrollo de React es el rendimiento de la biblioteca. Con funciones como la funciónlazy, se implementó la primera parte de la función de suspenso. Esta función permite la recarga asincrónica de contenido. En el caso delazy, los componentes se pueden cargar de forma asincrónica y, mientras tanto, se puede mostrar un marcador de posición. La propiedad estáticacontextTypede un componente hace que el acceso a la API de contexto sea aún más conveniente.React 16.8
En esta versión, se introdujo la API Hooks. Sin embargo, detrás de esta característica, que a primera vista parece discreta, se esconde una mejora significativa de los componentes funcionales de React. Con Hooks, es posible implementar tanto el ciclo de vida del componente como su propio estado local en un componente de función, algo que antes de esta característica estaba reservado solo para los componentes de clase. Puedes obtener más información sobre Hooks en el Capítulo 6. Esta característica lleva la disociación de la lógica y el estado de la representación un paso más allá. A pesar de las capacidades mejoradas, la introducción de la API Hooks no supuso ningún cambio importante, por lo que esta extensión también se unió a una serie de actualizaciones menores que siguen la hoja de ruta de convertirse en una biblioteca más eficaz y utilizable.Versión 16.x Otra característica destinada a mejorar el rendimiento es el modo concurrente, también conocido como modo asíncrono. Esta característica le permite calcular la jerarquía de componentes de la aplicación en un proceso separado sin bloquear el proceso principal del navegador. La función
lazyimplementó la primera parte de la característica de suspenso, que permitió recargar componentes. La característica Suspenso para la obtención de datos garantiza que otras solicitudes del servidor, como las llamadasfetchasincrónicas para leer datos, puedan ser comodín. Durante el desarrollo de las nuevas características, especialmente el modo concurrente, el equipo de desarrollo tuvo que darse cuenta de que la hoja de ruta original se había planificado de manera demasiado optimista. El equipo quería probar a fondo las nuevas características primero antes de incluirlas en la versión estable. Por esta razón, el modo concurrente estuvo en una etapa experimental durante mucho tiempo, donde tuvo que activarse por separado.
React 17: La actualización sin funciones
El enfoque de control de versiones semántico establece que una actualización importante puede incluir cambios importantes. El lanzamiento de la versión 17 de React fue particularmente sorprendente para la comunidad, ya que se anunció con el titular “Sin nuevas funciones”. El objetivo de este lanzamiento era facilitar las actualizaciones a nuevos números de versión en aplicaciones existentes. Con este lanzamiento, el equipo de desarrollo introdujo actualizaciones graduales, una característica que le permite actualizar su aplicación a una nueva versión poco a poco.
Otro cambio oculto fue que, para el manejo de eventos, React ya no registra sus escuchas de eventos en el nivel del documento, sino en el nodo raíz de la aplicación.
Con los componentes de servidor, React avanza para acercar al cliente y al servidor. Esta característica tiene como objetivo combinar la naturaleza interactiva de los componentes de React tal como se utilizan en el navegador con el rendimiento del lado del servidor. Como la mayoría de las nuevas funcionalidades importantes, inicialmente se agregó a la biblioteca como una característica experimental.
React 18: Reacción concurrente
La característica más importante de la versión 18 de React es el renderizador concurrente. Esta característica permite a React preparar múltiples versiones de la interfaz gráfica. Este renderizador cambia los principios del proceso anterior y permite que la biblioteca interrumpa el proceso de renderizado, lo continúe más tarde o inicie un nuevo proceso. Para los usuarios de una aplicación, esto da como resultado una interfaz de usuario más responsiva, ya que la aplicación puede reaccionar de manera más inmediata a las interacciones del usuario.
Además del renderizador simultáneo, React 18 también incorpora Suspense para la obtención de datos para marcos externos, como Next.js.
Si se observa el desarrollo de React, se hace evidente rápidamente que el enfoque está puesto en el rendimiento, pero también en la facilidad de uso de las interfaces. El desarrollo está impulsado no solo por el propio Facebook, donde React se utiliza estratégicamente para implementar interfaces web, sino también por una comunidad muy grande y activa que se ha formado en torno a la biblioteca.