Your React App Doesn't Need All That JavaScript

¿Qué pasaría si te dijera que estás usando demasiado JavaScript en tus aplicaciones de React? Hola, mi nombre es Jemima. Soy ingeniera de producto en CASE. Soy una Google Developer Expert en Microsoft MVP y una Profesional Certificada en Competencias Básicas de Accesibilidad. Básicamente, lo que eso significa es que realmente me gusta explorar la web y compartir las cosas que he aprendido con otras personas. Y una cosa que tengo que surge constantemente en React, al menos para mí, es que simplemente sigue sintiéndose mucho más complicado de lo que necesita ser.

Entonces, ¿cuánto JavaScript crees que realmente necesita un cambio de modo oscuro? Quiero decir, como un cambio que simplemente cambia entre el modo claro y oscuro. Estás actualizando dos colores y estás haciendo clic en un botón, eso es todo, ¿verdad? En React, es mucho más código del que sientes que es necesario, o al menos yo siento que es necesario. Así que desglosamos lo que está sucediendo aquí, ¿verdad?

Primero, tenemos nuestros estados. Si estás usando React, tendrás que trabajar con estados. Si estás cambiando entre básicamente cualquier cosa, está bien. Ese estado, todos estamos acostumbrados a Y luego necesitamos persistencia. Así que quieres almacenar las preferencias del usuario, ¿verdad? Así que la próxima vez que visiten la página, puedan ver lo que seleccionaron la vez anterior. Eso también es genial. Nos importa la experiencia del usuario. Cosas increíbles. Y luego necesitamos arquitectura global. Si estás trabajando con React, necesitas algo que pase el mismo tema a cada componente y a través de múltiples páginas, ¿verdad? Así que necesitas un contexto y necesitas tu proveedor y necesitas todo lo que maneja tu gestión de pila global.

Y luego, porque es React, vamos a incluir algo de optimización, porque ¿por qué no, verdad? Porque eso significa que nos aseguramos de estar usando memo. ¿Por qué necesitamos usar memo para cambiar el tema? Es uno u otro. Pero esa es la forma de hacer las cosas en React, ¿verdad? Para mí, esto se siente mucho más complicado de lo necesario. Recuerdo la primera vez que intenté construir un cambiador de tema en React. Y después de tener que descargar la biblioteca de gestión de estado, pensé, esto no se siente bien. Creo que estoy haciendo algo mal. Pero todos los artículos decían que lo estaba haciendo bien. Pero este es un método muy complicado de hacer las cosas. ¿Y cuál es el problema que enfrentamos cuando usamos algo complicado para manejar una tarea muy simple? Propagación de estado, ¿verdad? Así que primero, estamos manejando cada vez que la página se actualiza. Cada vez que cambiamos ese estado, ese estado necesita ser pasado a los componentes correspondientes. Así que eso significa que cada vez que haces clic en ese botón de cambio cualquier otro componente que necesite ese tema también se actualizará. Esto nos lleva a tener muchos renderizados en nuestra página. Porque React opera en un DOM virtual, cada vez que hacemos algún cambio, básicamente necesita actualizar todos los componentes que requieren ese cambio. Así que estamos causando renderizados. Y luego también tenemos los parpadeos de hidratación. Esto es cuando tu página se carga por primera vez. Y digamos que porque no has iniciado necesariamente tu React aún, vas a ver un, digamos que el usuario ha guardado el modo oscuro, vas a ver un destello de modo claro primero y luego el modo oscuro se activará. Así que para mí, esto se siente como mucho para hacer algo tan simple. Es como, imagina tener a Optimus Prime y lo estás usando para encender un interruptor de luz en tu casa. Es como si tuvieras esta plataforma gigante sobreingenierada y sobrepotenciada y la estás usando para manejar algo súper básico.

Bueno, ¿y si te dijera que hay una manera más fácil de hacer eso? Gracias a las características modernas de la web y el desarrollo, ya no tenemos que depender de la arquitectura de React sobrecomplicada para manejar componentes simples. Esta es una implementación simple de CSS que maneja el modo de tema oscuro usando solo un checkbox. Así que desglosamos lo que está sucediendo aquí. Primero, tenemos nuestro checkbox semántico en CSS y le estamos dando este un cambio de tema. Y luego tenemos el selector has. Esto es lo que está haciendo todo el trabajo. El selector has es algo que nos permite estilizar elementos padre basados en elementos hijo. Así que básicamente lo que estamos diciendo en este código es, si el checkbox de cambio de tema está marcado, da a las raíces un nuevo valor de fondo negro o texto blanco. Esto es lo que estamos usando para manejar el cambio al modo oscuro. En caso de manejar las preferencias del usuario, también podemos usar el esquema de color preferido.

Esto significa que si el usuario ya tiene algo en su sistema que dice, oh, simplemente configura todo en modo oscuro. Como, ya sabes cuando estás en tu teléfono y, bueno, mi teléfono tiene esta cosa automática donde como a las 8 p.m. o algo así, cambia al modo oscuro automáticamente. Lo que eso significa es que para cada sitio web que están usando, también va a cambiar al modo oscuro automáticamente. Así que ni siquiera necesitas preocuparte por almacenar las preferencias del usuario porque estás usando la predeterminada que viene con el sistema del usuario. Pero si aún quieres manejar las preferencias del usuario, aquí es donde entra JavaScript. Así que ahora puedes decir, está bien, todavía quiero guardar las preferencias del usuario. Déjame simplemente obtener el almacenamiento local usando JavaScript.

Así que esto es con lo que estamos lidiando, ¿verdad? De alguna manera hemos logrado llevar React de ser algo que era, cuando React fue inventado por primera vez, Facebook quería usarlo para cosas súper dinámicas. Es como, oh, necesito asegurarme de que los usuarios estén viendo cambios como inmediatamente. Necesito asegurarme de que las cosas se estén actualizando. Si estoy obteniendo datos del servidor o si un usuario está llamando a cualquier interacción que requiera respuestas de ida y vuelta quiero asegurarme de que eso se esté haciendo realmente rápido. Pero ahora seguimos usando React para cosas simples como, oh, quiero alternar un acordeón o quiero cambiar a modo claro.

Creo que necesitamos volver a donde estábamos cuando comenzamos con el desarrollo web, que era usar JavaScript para la funcionalidad y usar HTML y CSS para contenido y visualización y animación. Así que eso es lo que voy a mostrarles hoy. Vamos a pasar por seis demostraciones de componentes comúnmente construidos que todos pueden hacerse usando HTML y CSS. Como dije, vamos a ver seis componentes comunes en React que podemos construir usando solo HTML y CSS. Así que vamos a ver un cambiador de tema, un acordeón, un modal, animaciones de desplazamiento, carrusel y select personalizable. Así que vamos a ello. Comenzando con nuestro cambiador de tema, como establecimos anteriormente, manejar un cambiador de tema en React requiere mucha gestión de estado y actualización. Así que esto es lo que un cambiador de tema en React se ve. Es algo bastante estándar. Simplemente haces clic en el botón, cambia a modo claro o cambia a modo oscuro. Ahora, si quisiéramos manejar lo mismo en HTML y CSS usando ese código que te mostré antes, esto es exactamente lo que está sucediendo aquí.

lo mismo, pero no tiene ninguno de los efectos de renderizado que tiene React. También tengo un pequeño renderizador aquí. Así que puedes ver cómo se ven las actualizaciones de React. Así que cada vez que actualizamos este cambiador de tema, está llamando a un nuevo render para cada tarjeta que usa ese modo de tema. Así que cada vez que esto se actualiza, se actualiza aquí.

Pero te das cuenta de que con el CSS, solo se llama en la carga de la página y no se llama en ningún otro momento. Esto se debe a que no utiliza el mismo modelo de DOM virtual que React. Así que todo lo que se maneja en CSS se actualiza puramente a través del renderizador de GPU de CSS. No requiere ninguna nueva actualización ni trabajar con JavaScript. Vamos también a echar un vistazo al código en producción para que podamos ver qué está pasando aquí.

Si cambio a mi código. Así que este es nuestro código de React. Como dijimos, tenemos todos nuestros use effects y tenemos todos nuestros use states aquí. Tenemos todos nuestros use effects y tenemos todos nuestros use states aquí. Tenemos nuestro contexto, yada, yada, yada. Y luego este es nuestro código CSS. No usamos ninguna otra funcionalidad aquí. Lo único que está manejando el trabajo aquí es este check box para el cambiador de tema. Y luego si vamos a nuestro estilo para el cambiador de tema, te das cuenta de que tenemos nuestro has theme aquí.

Así que eso es prácticamente todo. Eso fue, eso es probablemente una de las implementaciones más simples de un cambiador de tema que he construido desde que uso React. Y lo realmente genial del cambiador de tema CSS es que porque React es técnicamente una aplicación de una sola página, significa que ni siquiera necesitas actualizarlo en toda la aplicación. Así que, por ejemplo, estoy usando la misma implementación de CSS aquí para mi gestión global del modo oscuro. Y notarás que cuando cambio a la otra página, la página del acordeón y vuelvo al cambiador de tema, no necesito hacer ningún cambio aquí. Así que si inspecciono esto en las herramientas de desarrollo globales, ves que es solo el cambiador de tema aquí, que es el check box que estoy usando. Y luego, cuando eso se actualiza, este valor raíz aquí obtiene todas las actualizaciones. Así que esto es todo lo que se está cambiando. Y una vez que cambio de ida y vuelta, porque React es una aplicación de una sola página, esto es técnicamente el único, esto es técnicamente el único div que realmente se está renderizando en la página. No necesito actualizarlo en absoluto.

Esa es una implementación realmente genial de usar el selector pseudo CSS Has para manejar cualquier cosa que requiera estilo de padre. Y la gran parte de esta cosa es que, número uno, está soportado de base. Así que puedes usar esto en producción de inmediato. Y número dos, se puede aplicar a cualquier cosa donde anteriormente necesitabas usar CSS, anteriormente necesitabas usar JavaScript para apuntar a un selector de padre. Así que, por ejemplo, aquí también estoy usando el selector pseudo Has para decir, oh, si esto tiene popover abierto, entonces mueve esta página por el padding de este espacio. Así que cualquier cosa que puedas pensar, oh, déjame usar JavaScript porque necesito apuntar como necesito apuntar a este elemento padre aquí, intenta usar Has en su lugar.

Y luego la segunda implementación que veremos es un acordeón. Así que un acordeón es un componente simple. Haces clic en un botón, muestra contenidos. Haces clic en el botón de nuevo, cierra los contenidos, cosas bastante estándar. Ahora, esto es lo que el acordeón de Java React se vería. Así que echemos un vistazo a ese código primero. Está aquí. Así que no es tan complicado para ser justos. Solo tenemos como un botón de alternar. Y luego si la alternancia está hecha, simplemente lo configuramos en el elemento activo y luego eso es todo lo que estamos alternando el acordeón aquí. Pero independientemente de si es complicado o no, ¿necesitamos que se haga en React? Probablemente no. Así que echemos un vistazo a lo que está pasando detrás del telón aquí. Así que podemos recargar nuestro renderizador de nuevo. Y esa cosa que también podemos tener aquí es el tiempo de rendimiento para mostrarte cuánto tiempo realmente toma cargar esta cosa.

tiempo de rendimiento para mostrarte cuánto tiempo realmente toma cargar esta cosa. Así que cada vez que se llama a esta cosa, tenemos al usuario esperando por el contenido y esperando que el renderizador termine. Y de hecho, esto es, por ejemplo, cuando se trata de cosas como internet lento, no siempre podemos asumir que todos están usando 5G, ¿verdad? Las personas que usan internet lento, cada vez que pones cosas como contenido en JavaScript, significa que debido a la forma en que se carga una página, obtienes tu HTML primero, obtienes tu CSS, y luego obtienes tu JavaScript. Así que eso significa que si alguien está tratando de usar tu página, tienen que esperar a que todo el JavaScript se cargue en esta página antes de que puedan luego alternar este acordeón.

Eso es un problema de rendimiento porque no quieres impedir que los usuarios puedan ver contenido en la página. Además, si descargo la página y digamos que a veces mi internet falla en medio de las cosas. Así que solo descarga como el HTML y todo el estilo está roto y no hay JavaScript en absoluto. Si eso le sucede a un usuario, significa que lo que sea que esté dentro de este acordeón, no lo van a ver en absoluto.

Pero tenemos la versión HTML de un acordeón, que tiene la misma funcionalidad exacta donde alterna todo el código, alterna todas las pantallas, pero no tienes ninguno de los requisitos de JavaScript. Así que echemos un vistazo a cómo se está haciendo esto en HTML. Esta es la única característica que necesitamos para hacer un acordeón en HTML. Así que tenemos nuestro elemento details aquí y nuestro elemento summary aquí. Y estas son las dos cosas que son responsables de alternar este acordeón aquí. Así que echemos un vistazo a las herramientas de desarrollo para ver qué está pasando realmente debajo del capó. Así que este es nuestro acordeón de detalles. Una vez que lo hacemos clic, notas que los detalles se actualizan a abierto o cerrado. Una cosa que es también realmente genial sobre el acordeón de detalles es que si vamos a este JavaScript aquí, notas que tenemos como nuestro ARIA expanded y nuestros ARIA controls y todo.

Así que cuando se trata de accesibilidad, si no estás manteniendo la accesibilidad en el centro de tu proceso de desarrollo, es muy fácil olvidar cosas como esta. Así que si alguien estaba usando un lector de pantalla, por ejemplo, sería muy fácil para ti olvidar actualizar realmente este acordeón para decir ARIA expanded, lo que significa que si estuviera en un lector de pantalla, no tendría idea de lo que realmente estaba pasando con este acordeón. Si no estuviera agrupado, si no tuviera controles ARIA, no tendría idea de lo que realmente estaba sucediendo detrás de escena.

Lo mejor de details es que tiene todo esto incorporado por defecto. Así que ves, si hago clic aquí, tengo mi panel de ARIA expanded y ARIA controls configurado aquí. Y si voy a details, leamos este. Si voy a details, notas que también tiene los valores de enfoque, expandido y enfocado aquí. Así que básicamente así es como se actualiza. Cuando comienzas a usar HTML semántico, significa que estás obteniendo muchos beneficios integrados del navegador sin tener que codificar manualmente nada de esto tú mismo. Así que te ahorra mucho tiempo a largo plazo.

Details también tiene otra característica que si quisieras un acordeón exclusivo, así que un acordeón exclusivo es simplemente cuando haces clic en un acordeón, el otro se cierra. Details también te permite hacer eso sin ningún código adicional. Todo lo que necesitas hacer es agregar un atributo de nombre. Así que notas que aquí, ahora tengo un atributo de nombre agregado a mi acordeón. Así que estoy usando el nombre FAQ. Y si hago clic en eso, notas que se alterna por sí mismo. Así que este es otro gran ejemplo de cosas que están integradas que el navegador puede manejar por sí mismo y que no necesitamos usar código personalizado o externalizar a una biblioteca externa.

Así que creo que details es un buen ejemplo de por qué la gente no necesariamente usa estas características personalizadas, porque details salió hace como 10 años. No es una característica nueva, pero mucha gente no ha oído hablar de ella. Y eso es porque la primera vez que apareció, la gente decía, oh, esto es realmente genial. ¿Cuándo puedo usar esto? Y decían, oh, lo siento, no es compatible con todos los navegadores. Y para cuando realmente se volvió compatible con todos los navegadores, la gente había perdido interés porque decían, oh, ahora vamos a usar esta biblioteca de JavaScript.

Así que creo que es un muy buen ejemplo de un recordatorio de que siempre debemos estar al tanto de las últimas cosas en la web. Creo que especialmente en esta era de IA, notarás que cuando le dices a un agente que construya algo, va a optar por el patrón más popular. Así que si le digo a mi agente que construya un acordeón de JavaScript, lo más probable es que, si le digo a mi agente que construya un acordeón en una página web sin especificación, lo más probable es que sea el acordeón de JavaScript. Independientemente del hecho de que, oh, details es una alternativa mucho más simple y fácil, va a optar por lo que ha sido popular.

Así que creo que por eso es realmente importante que nos mantengamos al tanto de los últimos cambios en el desarrollo web para asegurarnos de que estamos un paso adelante de los agentes y como haciéndoles saber lo que realmente queremos que hagan. Así que sí, eso es todo para details. Pasemos a un modal. Ahora, un modal es una cosa muy común donde la gente recurrirá a una biblioteca antes de siquiera intentar construir uno por sí mismos. Porque con un modal, no se trata solo de hacer que las cosas aparezcan en la pantalla. También necesitas hacer cosas como implementar fondos.

Así que es cuando si hago clic fuera del modal, quiero que se cierre. Necesito asegurarme de que estoy implementando el enfoque atrapado. Entonces, si he hecho clic en el modal, ¿el enfoque está siendo atrapado en ese modal? ¿Puede el usuario quedar atrapado en el enfoque en cualquier otro lugar de la página? Necesito asegurarme de que estoy implementando la funcionalidad del teclado. Así que eso es salir para cerrar. Necesito asegurarme de tener como un bloqueo de desplazamiento en el modal. La página no debería poder desplazarse si el modal está abierto.

Así que el hecho es que hay mucho que se necesita para construir un modal que la gente puede no necesariamente querer manejar, por lo que recurren a una biblioteca. Pero lo genial es que ahora tenemos una herramienta que nos da las mismas características de ese modal solo usando un atributo. Así que echemos un vistazo a cómo funciona este modal. Es la misma característica exacta. Tenemos la apertura y la animación. Tenemos el clic para cerrar. Tenemos los estados de enfoque dentro del modal. Tenemos el cierre cuando haces clic fuera.

En términos de enfoque atrapado, no tiene como una versión incorporada de eso, pero puedes crear fácilmente la tuya propia una vez que tengas esto configurado. Y echemos un vistazo a cómo se está construyendo realmente este modal. Así que este es nuestro modal de React, como dijimos, utiliza muchos diferentes escuchadores de eventos y manejadores para asegurarse de que el modal funcione. Tenemos nuestra gestión de enfoque, tenemos nuestro botón de escape, estamos creando un portal para asegurarnos de que se muestre en la parte superior de la página, tenemos todo esto. Pero cuando se trata de un modal HTML, todo lo que necesitamos es este único atributo aquí. Popover es un atributo que te permite crear modales cuando quieras.

Así que echemos un vistazo a lo que se está haciendo en este modal popover aquí. Así que notas que una vez que hago clic en el popover, esta cosa que se llama capa superior aparece en la página. La capa superior es una funcionalidad incorporada para popover. Eso significa que no tienes que preocuparte por el estilo de z-index o dónde estás colocando tu modal en la página porque popover maneja eso automáticamente por ti. Cada vez que el modal se coloca en la página, popover crea una capa superior. Y eso significa que el modal siempre aparecerá encima de todo.

Esto también es realmente genial porque si tienes múltiples popovers, si tienes popovers anidados, simplemente crea la capa superior de acuerdo a cómo fue creado. Así que tienes capa superior 1, capa superior 2, capa superior 3. Y no tienes que preocuparte por ningún z-index o gestión del enfoque porque todo eso se maneja de forma nativa en popover. Así que si echamos un vistazo a cómo se ve nuestro popover aquí, ves que tiene un popover y luego tiene una capa superior 1. Y eso es prácticamente todo.

Una vez que el popover se cierra, se establece como oculto y desaparece de la página exactamente como quieres. Así que creo que popover es una herramienta realmente genial que no se usa mucho. Y realmente no sé por qué porque creo que es una de las herramientas HTML súper útiles que tenemos hoy en día. También estoy usando el popover aquí para esta barra lateral. Puedes usar popover para una serie de implementaciones, ya sea que quieras construir un tooltip o una barra lateral, un menú desplegable, un modal, básicamente cualquier cosa que pienses que todas estas cosas necesitan aparecer en la página. Y no quiero manejar hacer que aparezca yo mismo. Popover es una gran opción para eso.

Así que comencemos con popover. Y luego tenemos animaciones de desplazamiento. Este es uno que me emociona mucho porque creo que las animaciones de desplazamiento han sido la pesadilla de mi existencia desde que he estado escribiendo componentes de React. Cada vez que tengo que configurar algo como intersection observer o comenzar a monitorear estados de desplazamiento, es simplemente, es mucho. Así que echemos un vistazo a cómo funciona la animación de desplazamiento en React. Y podemos ver nuestros contadores de renderizado aquí. Ver todo lo que está sucediendo.

Así que a medida que esto se desplaza en la página, cada elemento que necesita aparecer en la página, cada tarjeta que tiene intersection observer va a causar un nuevo renderizado. Déjame mostrarte esto con el rendimiento. Así que si tienes tu rendimiento aquí, deberías estar renderizando. Bien. Así que sí, esto va a tener parpadeo de pintura. Así que realmente debería dar una advertencia de activación si eres propenso a la epilepsia fotosensible. Pero sí, con nuestro parpadeo de pintura aquí, podemos ver cada vez que esto, y luego también podemos ver las estadísticas de renderizado de cuadros.

Así que podemos ver con qué frecuencia está llamando a la GPU. Así que esto es con qué frecuencia un renderizador de desplazamiento llama, como ocupa tu memoria y tiene que volver a renderizar en la página. Así que cada vez que desplazas o tienes oyentes de eventos de desplazamiento y todo, esto es lo que parece. Ahora veamos esa misma característica en CSS. Notas que con el CSS, no está haciendo ninguna actualización al renderizado real de la página, y tampoco está usando ninguna memoria. Así que este es un ejemplo realmente, realmente bueno de rendimiento de cómo podemos usar CSS para ahorrar mucha más memoria en nuestro código.

Pero también otra cosa con el renderizado de desplazamiento es digamos que tienes un hilo principal ocupado, ¿verdad? Digamos que tu página está haciendo muchas cosas. Y aunque tienes la animación de desplazamiento en ella, también tienes, estás ejecutando múltiples cosas en el fondo. Tienes muchas cosas sucediendo. Esto es lo que le sucede a tu renderizado de desplazamiento cuando comienzas a tener muchas cosas sucediendo en tu hilo principal. Como puedes ver, el desplazamiento se vuelve muy entrecortado y como muy poco suave. Esto se debe a que, dado que todo es React y todo es JavaScript, todos están ejecutándose en el mismo hilo único. Así que cada vez que llamas a esa animación de desplazamiento, si tu hilo principal está ocupado, necesita esperar a que lo que sea que esté sucediendo en el hilo principal termine antes de que pueda llamar a la animación de desplazamiento.

Y eso va a parecer mucho menos suave de lo que deseas. Pero con CSS, porque solo es manejado por CSS, independientemente de lo que esté sucediendo en el espacio de JavaScript, el CSS siempre va a ser suave. Siempre va a ser rápido. Así que echemos un vistazo al código que estamos usando para nuestro CSS aquí. Bien. Así que cuando se trata de nuestro desplazamiento CSS, lo principal que maneja esa animación de desplazamiento es nuestra línea de tiempo de animación aquí. Aquí lo tenemos detrás de nuestros soportes. Básicamente lo que estamos diciendo es que si el navegador que estamos usando soporta la línea de tiempo de animación, entonces aplica esta línea de tiempo de animación. Lo estamos configurando para ver y le estamos dando un rango de entradas para cubrir el 30%.

Así que básicamente lo que esto significa es comenzar la animación una vez que el elemento ha entrado en el contenedor de desplazamiento y luego detener la animación una vez que el elemento ha cubierto el 30% del contenedor de desplazamiento. Así que la línea de tiempo de animación es un ejemplo realmente, realmente bueno de cómo podemos usar CSS para crear más animación. La línea de tiempo es un ejemplo realmente bueno de cómo podemos usar CSS para crear implementaciones más rápidas de cosas que estábamos haciendo previamente en JavaScript. Una cosa realmente buena sobre la línea de tiempo de animación también es porque la estamos poniendo detrás de soportes, muchas de estas características ya son compatibles hacia atrás, lo que significa que si tu navegador no soporta la línea de tiempo de animación, solo vas a ver los elementos sin ninguna animación de ellos. No va a estar oculto y no va a impedir que los usuarios puedan acceder a la información.

va a estar oculto y no va a impedir que los usuarios puedan acceder a la información. Así que esto es algo que es muy bueno cuando se trata de usar la forma semántica de construir cosas. Incluso si la característica en sí no funciona, el contenido y la información aún se transmiten. Así que sí, eso es todo para la línea de tiempo de vista de animación.

Pasemos al carrusel. Ahora, este me emociona mucho porque los próximos dos que voy a mostrar, son características bastante nuevas, por lo que aún no van a tener soporte básico. Pero son muy buenos ejemplos de lo rápido que está cambiando la plataforma web y son buenos ejemplos de cómo se están construyendo cosas nuevas cada día. Así que este es un carrusel de React. Esto podría ser una biblioteca de carrusel estándar. Esto podría ser tu implementación estándar de carrusel, como quieras hacerlo.

Este es el mismo carrusel usando solo CSS. Como puedes ver, no está llamando a ningún renderizado en absoluto. No está usando ningún JavaScript. Es solo CSS. Y tenemos nuestros botones de carrusel que nos permiten desplazar este carrusel. Tenemos nuestra paginación de carrusel aquí que nos permite hacer clic a través de este carrusel. Y también tenemos una funcionalidad de desplazamiento de carrusel. Así que solo estoy usando mis flechas, como mi teclado, para deslizar a través de este carrusel sin hacer clic. Todo esto se hace usando CSS. Así que vamos a desglosar lo que está sucediendo aquí. En primer lugar, estamos usando el tipo de ajuste de desplazamiento para movernos a través de este carrusel. Así que el tipo de ajuste de desplazamiento es un selector CSS que te permite, ¿ves cómo cuando muevo esto un poco, se ajusta al siguiente? Eso es lo que hace el tipo de ajuste de desplazamiento. Simplemente te permite ajustar el siguiente elemento en cualquier contenedor de desplazamiento.

Scroll buttons son características nuevas que acaban de salir, creo que fue como el año pasado, se lanzaron, así que todavía están trabajando en hacer una línea base. Pero los botones de desplazamiento son características nuevas que podemos usar para controlar un contenedor desplazable y decirle a dónde queremos que se mueva. También tenemos el marcador de desplazamiento. El marcador de desplazamiento es lo que nos permite tener la paginación, lo que significa que cuando hacemos clic en él, decimos, oh, el marcador de desplazamiento está configurado en este valor. Así que llévanos a ese valor en su lugar. Y luego tenemos el objetivo actual. Así que esto es lo que estamos usando para resaltar los colores aquí, decir que, oh, si este es el objetivo actual, simplemente resáltalo aquí. Así que creo que este es uno de los ejemplos muy geniales de lo lejos que hemos llegado con CSS, porque aunque sí, solo estamos usando CSS para visualización y estilo, todavía es posible usarlo para cosas que son muy interactivas, cosas que anteriormente requerían mucho JavaScript, porque la web está constantemente cambiando. Y yo, por mi parte, creo que eso es súper genial. Así que, sí, también puedes ver el código para el carrusel aquí. No compartí ese porque es mucho, pero compartiré el enlace al repositorio al final. Así que definitivamente puedes ir a ver todo allí. Pero este es el código que estamos usando para el carrusel CSS. Y creo que es súper divertido. Así que asegúrate de revisarlo.

Y finalmente, tenemos select personalizable. Select personalizable es, vi una charla recientemente de, creo, Jake Archibald, y él estaba hablando sobre la historia de select personalizable. Una de las cosas que mencionó fue que creo que cuando se estaba construyendo la idea para el elemento select hace como 30 años, lo primero que la persona que quería crear select dijo fue, oh, pero quiero asegurarme de que pueda ser estilizado. Como quiero que el usuario pueda decidir cómo lo van a estilizar. Y 30 años después, finalmente podemos hacer eso. Así que sí, creo que esa es una charla realmente interesante. Definitivamente deberías revisarla. Pero lo que realmente me emociona de esto es que es una de esas cosas que parece tan simple, que dices, oh, ¿por qué no siempre pudimos tener select personalizable? ¿Cuál era el problema allí? Pero luego cuando ves la forma real en que funciona select personalizable, te das cuenta de que ha tomado años de innovación web para que realmente podamos llegar a este punto. Así que echemos un vistazo al select personalizable aquí. El que tenemos en nuestro React está haciendo todo lo básico que hace un select. Haces clic en un desplegable, tiene opciones. Puedes hacer clic en las opciones y se actualiza automáticamente. Cosas bastante simples. Como podemos ver, siempre se está renderizando cada vez que lo llamamos porque eso es lo que hace React. Y luego tenemos lo mismo con nuestro select de CSS y HTML.

Y notas que cuando hacemos clic, realiza todas las actualizaciones necesarias que se supone que debe hacer, pero sin ninguna de las renderizaciones. Así que cómo esto está funcionando es usando una nueva función llamada Appearance Based Select. Y también, volviendo a lo que mencioné antes sobre estas cosas que tienen funcionalidad de respaldo incorporada, incluso si haces clic en Appearance Based Select y digamos que un usuario no lo soporta, simplemente van a ver el select por defecto de todos modos. Así que esta es una muy buena manera de asegurarte de que estás usando las últimas herramientas, pero aún puedes tener un sitio web completamente funcional sin necesitar ninguna otra funcionalidad externa. Si no eres fan de los polyfills, puedes simplemente decir, está bien, para los usuarios cuyo navegador no soporta esto, simplemente vamos a mostrarles el re-select regular. Así que lo que tenemos aquí es nuestro elemento select con Appearance Based Select. Tenemos nuestro contenido seleccionado, y esto es lo que nos permite mostrar los elementos aquí.

Y una cosa que también notas es que con este, realmente podemos mostrar imágenes y texto, y podemos estilizar el texto. Podemos tener diferentes animaciones de fondo. Podemos poner este ícono aquí. Estas son cosas que anteriormente no podía hacer en Select. En Select, solo podías tener las opciones tal como aparecen. Pero ahora con Appearance Based Select, básicamente puedes estilizar los elementos select nativos de la misma manera que lo harías con un menú desplegable personalizado. Así que creo que este es uno de los avances realmente geniales que han llegado a la plataforma web recientemente. Y yo, por mi parte, estoy muy emocionado de usarlo. Y eso es todo en nuestra demo.

Así que el propósito de esta demo es básicamente, número uno, mostrarte que hay diferentes maneras de hacer las cosas en comparación con cómo las hacías antes. Por ejemplo, si anteriormente has estado usando una librería de acordeón, puedes desinstalarla ahora porque tienes detalles y es exactamente lo mismo con mucho menos código. Lo mismo con modales, lo mismo con cambiadores de tema. Estas son todas características que ya existen en el navegador. Así que puedes simplemente dejar que el navegador haga el trabajo. Porque al final del día, creo que siempre debemos adherirnos al principio de la menor complejidad cuando se trata de construir cosas. React es realmente bueno para hacer tantas cosas complicadas. Es realmente bueno para construir sitios web realmente impresionantes, pero no necesitamos una biblioteca de gestión de estado completa solo para cambiar entre dos colores. Así que cuando se trata de decidir qué herramienta vas a usar, elige la más apropiada para el trabajo eligiendo la menos compleja para el trabajo. Muy bien, y espero que esto haya ayudado.