Construyendo Age of Empires 2 en React

Rate this content
Bookmark

¿Qué mejor manera de aprender sobre las capacidades de una tecnología que hacer algo para lo que no fue diseñada expresamente? ¿Qué podemos aprender sobre el clavo cuadrado mientras lo empujamos sin piedad en el agujero triangular? En un intento de reconstruir Age of Empires 2 usando React, aprenderemos sobre las limitaciones y posibilidades de la herramienta que usamos todos los días.

22 min
24 Oct, 2022

Video Summary and Transcription

Esta charla discute el proceso de recrear Age of Empires II en React. El orador comparte su inspiración para el proyecto y explora diferentes enfoques para el desarrollo de juegos utilizando React. Demuestran cómo crear una cuadrícula isométrica, habilitar el desplazamiento y renderizar unidades. La charla también cubre cómo manejar los clics en las unidades e implementar el movimiento con clic derecho, así como técnicas para hacer que React renderice de manera más consistente. El orador concluye destacando el valor de explorar diferentes herramientas y enfoques en el desarrollo de software.

Available in English

1. Introducción a Age of Empires II en React

Short description:

Bienvenido a recrear Age of Empires II en React. Soy Joe, un consultor de ingeniería web con experiencia en React y desarrollo front-end. También disfruto del stand-up comedy y crear videojuegos. Echa un vistazo a mi Twitter y página principal para obtener más detalles.

♪♪ Hola y bienvenido a recrear Age of Empires II en React o el otro subtítulo. ¿Por qué sigo haciendo esto? Si te preguntas quién soy yo, hola. Hola, soy Joe. Soy un consultor de ingeniería web. Anteriormente trabajé en lugares como la BBC, Monzo, Lego, haciendo todo tipo de cosas de React y front-end para la gente.

Hoy en día, ofrezco mis habilidades para cualquier cosa relacionada con la vista, relacionada con React o cosas generales de la web. Y además de hacer ingeniería web, también hago muchas, muchas cosas tontas en mi tiempo libre, incluyendo stand-up comedy. También hago juegos tontos e incluso los combino cuando hago stand-up comedy donde también jugamos juegos tontos. Si quieres ver más detalles sobre eso, puedes visitar mi Twitter en joeheart, o puedes ir a mi hermosa página principal, joeheart.co.uk. Le dedico mucho tiempo a su diseño. Por favor, hágame saber qué piensas de esos estilos cuando lo veas. Y si alguna vez quieres enviarme un correo electrónico por cualquier motivo para decirme cuánto no te gustó esta charla, por favor envíame un correo electrónico a joeheart.dev.

2. Estableciendo el Contexto: Módulos de Node Katamari

Short description:

Uno de mis juegos favoritos que hice para un evento de desarrolladores llamado Smush en el pasado se llamaba Módulos de Node Katamari, que es una versión de Katamari Damacy. Es un pequeño videojuego en el que juegas como una carpeta de módulos de Node y te mueves por el mundo. El objetivo del juego es crecer lo más grande posible.

Ahora, para establecer el contexto de hacia dónde se dirige esta charla, pensé que sería bueno hablar sobre un ejemplo de las cosas que he hecho en el pasado. Uno de mis juegos favoritos que hice para un evento de desarrolladores llamado Smush en el pasado se llamaba Módulos de Node Katamari, que es una versión de Katamari Damacy, que si has jugado, sabrás hacia dónde va esto donde es un pequeño videojuego en el que juegas como una carpeta de módulos de Node y te mueves por el mundo. Y a medida que lo haces, y chocas con cosas, las cosas se pegan a ti. Y el objetivo del juego es crecer lo más grande posible. Así que para moverte por este pequeño mundo donde todos los objetos en él representan paquetes de NPM de varios tamaños, quieres obtener los paquetes de NPM más grandes posibles y simplemente hincharte tanto como puedas, al igual que nuestras carpetas de módulos de Node reales en nuestras máquinas de desarrollo todos los días. Así que eso es un poco el contexto establecido.

3. Recreando Age of Empires II en React

Short description:

Esta parte discute cómo el orador tuvo la idea de recrear Age of Empires II en React y proporciona una breve introducción al juego. El orador explora diferentes enfoques para recrear el juego y comparte consejos para desarrollar un videojuego utilizando React.

Y luego, para explicar cómo llegué aquí y hablando de Age of Empires II, como todas las buenas charlas, esto comenzó con un pequeño ajuste al azar porque estaba un poco aburrido en el trabajo donde estábamos hablando de bibliotecas de gráficos y mencioné en la reunión este gráfico de Age of Empires Two, que ocurre al final del juego, que representa todas estas cosas para ti, lo cual creo que es realmente hermoso en cómo divide estas cosas y te muestra cuándo ocurrieron ciertos eventos en el juego.

Y jugué, bromeé en Twitter por un tiempo, para algunas personas, y luego finalmente fue Lorenzo quien sugirió, ¿por qué no envías la propuesta a React Advanced para esto? Y lo hice, y ahora estamos aquí. Ahora, cuando esto comenzó por primera vez, supongo que necesito agregar un poco de contexto sobre qué es Age of Empires Two, para aquellos de ustedes que pueden no saber qué es. Era un juego de estrategia en tiempo real. Fue lanzado en 1999, creo. Lo jugué mucho cuando era niño. Y a menudo se jugaba en uno de estos, un monitor CRT gigante que explotaba cuando lo jugabas.

Era un juego en el que asumías el mando de uno de los ejércitos más grandes de la historia, y los hacías evolucionar desde la edad de piedra hasta la edad del castillo y la edad medieval y obtenías más tecnología. Y extraías recursos y construías tu base y elegías tus unidades y tus ejércitos con mucho cuidado, los componías y luego ibas a luchar contra el enemigo. Pero en realidad solo enviabas caballeros en masa. Eso es lo que principalmente hacías, y funcionaba de manera increíblemente efectiva.

Así que empecé a pensar qué podría hacer en el contexto de Age of Empires II y React. ¿Qué sería una charla interesante para venir y armar sobre la tecnología de React en Age of Empires II? Y había muchas formas diferentes de abordarlo. Age of Empires II tiene menús relativamente famosos. Hay estos diseños skeuomorfos hermosos. ¿Cómo sería intentar recrear eso en React? Y hay muchas cosas realmente interesantes allí Solo lograr que las fuentes se rendericen exactamente así, porque eso es solo Georgia, pero en un sitio web moderno es un poco complicado. Debes desactivar cualquier tipo de suavizado de fuentes que esté ocurriendo en el navegador. E incluso el logotipo principal de Age of Empires, utiliza una versión particularmente antigua de la fuente Castellan, que es de 1997 y es realmente difícil de conseguir ahora.

Pensé que tal vez podría crear un marco de trabajo divertido para crear componentes de Age of Empires II, que sería como este CSS de aceite y podría construir un increíble generador de sitios web medievales donde la gente pasaría todo su tiempo aprendiendo mi propio sistema de tokens de diseño personalizado en lugar de simplemente aprender CSS. Pero pensé que no lo haría, pensé que no sería tan divertido. En cambio, comencé a pensar en ¿qué pasaría si intentara hacer Age of Empires II? ¿O cuánto de Age of Empires II podría hacer usando React? Recrear este juego en React tanto como sea posible? ¿Qué tan difícil sería, en general, recrear Age of Empires II? Y como, si alguna vez tienes la idea de Voy a volver a hacer uno de los mejores juegos de estrategia video de todos los tiempos, aquí hay algunos tips de buenas formas de hacerlo. Estas serían buenas decisiones a tomar. Podrías usar un video game engine. Esto siempre ha crecido al hacer cosas de video juegos porque tienen muchas funciones auxiliares y renderizado de cosas. Han resuelto muchos de esos problemas comunes de los juegos una y otra vez, y eso solo hará tu vida mucho más fácil. Usa un lenguaje de tipos, porque te dará mucha más previsibilidad sobre las cosas que se están actualizando, todos tus ciclos de eventos. Podrías construir una cantidad bastante grande de tu aplicación automáticamente simplemente asegurándote de que las cosas estén en su lugar correcto. Y luego, si vas a desarrollar un video juego, idealmente querrías usar un método de renderizado de estilo rasterizado. Entonces, si lo vas a hacer en la web, intenta usar algo como el lienzo HTML 5 donde puedes dibujar sprites reales e imágenes directamente en él. O incluso si eso es un poco bajo si usas algo como Three.js donde podrías hacer algo pseudo 3D o incluso posiblemente como React 3D Fiber, React 3 Fiber sería genial para conectarse a cosas de React state management. Entonces, todas esas serían formas realmente buenas de abordar este proyecto.

4. Construyendo el Age of Empires 2 MVP

Short description:

Pero decidí comenzar desde cero usando JavaScript y React para renderizar todo con elementos DOM. La razón principal de esto es hacer que el proyecto sea lo más complicado posible, lo cual creo que es más entretenido y una forma de aprender sobre las herramientas. Queremos crear un Age of Empires 2 MVP al renderizar un fondo isométrico, permitir el desplazamiento, seleccionar unidades y edificios, y mover unidades haciendo clic derecho en el suelo. Renderizar el campo de batalla isométrico es fácil usando CSS. La cuadrícula se hace relativa, centrada, y cada fila es una fila flexible sin envoltura. Se utilizan variables CSS para el tamaño y el diseño de la cuadrícula. El código mostrado renderiza una cuadrícula, no una isométrica, pero es un punto de partida.

Pero decidí en cambio comenzar completamente desde cero, utilizando solo JavaScript y React, y renderizar todo utilizando elementos DOM. Y la razón principal por la que decidí hacer esto es porque, fundamentalmente, quería asegurarme de que este proyecto fuera lo más complicado posible para mí. Principalmente porque creo que es más entretenido para ustedes. Y simplemente creo que se puede aprender mucho sobre una herramienta si se usa de manera incorrecta. Y eso es más o menos lo que vamos a intentar hacer hoy.

Entonces, has ido a tu gerente de proyecto, has hablado sobre reconstruir Age of Empires 2 y React. Has obtenido la aprobación, ahora necesitas abrir el JIRA e intentar averiguar qué es un Age of Empires 2 MVP. ¿Cuál es el Age of Empires mínimo viable que podemos hacer? Y para mí, creo que va a ser, queremos poder renderizar este fondo isométrico, este campo de batalla que está en marcha. No puedes ver exactamente esto isométrico aquí, pero básicamente hay una cuadrícula de baldosas isométricas en las que todas las unidades pueden existir. Queremos poder desplazarnos por el campo de batalla. Entonces, en el juego, cuando mueves el cursor hacia la parte superior izquierda, se mueve hacia la parte superior izquierda. Cuando te mueves hacia la parte superior derecha, se mueve hacia la parte superior derecha. Queremos poder hacer clic en una unidad, un edificio, de una manera bastante genérica para que podamos seleccionar cosas alrededor del campo de batalla. Y luego queremos poder hacer clic derecho en el suelo para mover la unidad. Creo que si podemos comenzar con eso, entonces podremos construir y desarrollar el resto de Age of Empires.

Entonces, renderizar un campo de batalla isométrico, esto en realidad es sorprendentemente fácil usando CSS. Nuestro método de renderizado es muy simple. Simplemente vamos a tener un div al que le daremos una clase de grids. Y luego terminé creando dos matrices de índices para que podamos mapear sobre ellas, una para las filas, donde agregamos una fila anidada en cada una de ellas, y columnas donde mapeamos y renderizamos las baldosas. También, probablemente debería señalar ahora, esto no es accesible en absoluto. Pensé que intentar hacer un Age of Empires 2 accesible basado en DOM sería un poco más complicado de lo que estaba dispuesto a hacer esta vez. Y nuestra cuadrícula, simplemente la haremos relativa. La colocaremos en la parte superior izquierda de la página y la centraremos un poco más. Cada fila será simplemente una fila flexible. Nos aseguraremos de que no haya envoltura en ella, porque tenía un error extraño donde, si la encogías accidentalmente, no se mostraría demasiado. Aparecería el fondo. Terminarías con esta cuadrícula irregular. Y simplemente usamos algunas variables CSS muy simples para asegurarnos de que cada bloque tenga el tamaño y la cuadrícula correctos. Ahora, si estás mirando estos dos fragmentos de código, y estás pensando, Joe, eso solo renderiza una cuadrícula, no una isométrica, tienes razón. Ese fragmento de código que acabo de mostrarte renderizaría algo así como lo que ves a la derecha. Es solo una pequeña cuadrícula así.

5. Creando una Cuadrícula Isométrica y Habilitando el Desplazamiento

Short description:

Usando unas pocas líneas de CSS y un método de renderizado, podemos crear una hermosa cuadrícula isométrica para Age of Empires 2. Para obtener las texturas del juego, descargué un software de modificación llamado Turtle Pack y extraje los archivos SLP y DRS. Después de exportar una baldosa de césped como un mapa de bits, la ajusté en Photoshop para que encajara en la cuadrícula. Con la imagen de fondo establecida en las baldosas, cumplimos rápidamente con nuestro primer requisito. A continuación, necesitábamos habilitar el desplazamiento en el campo de batalla. Utilizando los eventos de movimiento del mouse de React y una referencia conectada al div del contenedor, implementamos una función que desplaza la vista cuando el mouse está cerca del borde del contenedor.

Pero luego, usando solo un pequeño y encantador trozo de transformación donde vamos a rotar todo en el eje X y luego en la tercera dimensión, vamos a rotar un poco el eje Z. Terminamos con esta hermosa cuadrícula isométrica, todo hecho con solo unas pocas líneas de CSS y un método de renderizado.

Ahora vas a mirar eso y pensar, Joe, eso no se parece en nada a Age of Empires 2. Y yo te diré, tienes razón. Esta es una captura de pantalla de Age of Empires 2 y mira este hermoso césped un poco borroso en el que esta unidad está parada. Así que queremos poder obtener esas texturas.

Ahora podría simplemente buscar texturas para Age of Empires 2. Curiosamente, fueron bastante difíciles de encontrar. Así que en su lugar terminé descargando esta maravillosa herramienta de modificación llamada Turtle Pack, que te permite extraer los archivos SLP y DRS, que eran archivos específicos. No sé si eran específicos de ese juego en particular, pero almacenaban todos estos datos en su interior. Así que fui a este encantador foro, que, por cierto, solo quiero decir cuánta alegría me dio ver un sitio web que hablaba sobre desactivar aceleradores de descarga y gestores de descarga, lo cual me ha dado mucha nostalgia por una sensación de tiempo. Así que logré descargar esta maravillosa herramienta y encendí mi CD, y puedes ver que dentro de cada uno de estos SLP hay estas imágenes almacenadas al estilo de los GIF, donde es un solo archivo, pero hay muchos diferentes que serían como una animación. Pero logré exportar uno de ellos como un mapa de bits. Ahí lo tienes, boom, tenemos nuestra baldosa de césped. Hay un total de seis píxeles, esto es increíble.

Ahora, el problema es que hemos hecho esa transformación en nuestra cuadrícula. Entonces, si lo ponemos como una imagen de fondo, va a distorsionarse nuevamente, lo cual es demasiado. Así que rápidamente lo arreglé en Photoshop, lo enderecé un poco, lo que hace que se vea significativamente más embarrado, y luego simplemente establecemos la imagen de fondo en todas nuestras baldosas, boom, tenemos nuestra hermosa cuadrícula isométrica. Mira qué rápido hemos cumplido con nuestro primer requisito, esto va muy bien.

Ahora, también queremos poder desplazarnos por este campo de batalla. Esto va a ser un poco más complicado que lo anterior. Afortunadamente, React facilita mucho la conexión a los eventos de movimiento del mouse. Entonces podemos usar el evento de movimiento del mouse, tener un pequeño controlador y el controlador simplemente va a almacenar la posición X e Y del mouse en un estado de React para que podamos usarlo básicamente como queramos. Y vamos a usar una referencia y conectarla a ese div, para que podamos obtener propiedades sobre ese div, como su altura, y cosas así. Y luego vamos a escribir esta función. Y cuando digo `vamos`, me refiero a que yo hice esto, donde básicamente queremos hacer la lógica de, cuando el mouse se mueve, ¿está a menos de 50 píxeles del borde del contenedor? Entonces, desplázate un poco en esa dirección si es así. Y la forma en que vamos a hacer esto es utilizando el método de desplazamiento en los elementos HTML, pero el método de desplazamiento no es simplemente desplazarse un poco, es desplazarse a un punto exacto, porque eso es lo que los documentos web quieren, ¿verdad? Quieres poder desplazarte a un lugar, desplazarte a una etiqueta, cosas así. Así que tenemos que hacer un poco de matemáticas para calcular dónde queremos que esté el desplazamiento izquierdo y superior, donde es bastante fácil obtener el ancho y la altura del contenedor actual. El margen de desplazamiento es como usarlo como la distancia de qué tan cerca del borde de mi pantalla quiero comenzar a desplazarme. Y luego la cantidad de desplazamiento es básicamente la velocidad a la que nos vamos a desplazar. Vamos a obtener la posición de desplazamiento actual, eso es el desplazamiento izquierdo y el desplazamiento superior.

6. Implementando Desplazamiento y Renderizado de Unidades

Short description:

Implementamos una función de desplazamiento que permite que el campo de batalla se mueva cuando el mouse está cerca del borde del contenedor. Mediante el uso de los eventos de movimiento del mouse de React y una referencia conectada al div del contenedor, podemos desplazar la vista según corresponda. Luego, trasladamos nuestro estado a un reductor para manejar el renderizado de unidades y edificios. Creamos una matriz de unidades y un objeto de interfaz de usuario para gestionar el estado. Agregamos un reductor para manejar la lógica de actualización de la posición del mouse. Renderizamos las unidades mapeando sobre las unidades en nuestro estado y estableciendo dinámicamente su posición como baldosas. También aplicamos transformaciones para mostrar correctamente la unidad de lancero. Finalmente, hacemos que las unidades sean interactivas agregando un controlador de clic para cada unidad.

Y luego simplemente hacemos, si el mouse está más adelante que el ancho del contenedor menos el margen, justo allí, entonces agregamos un poco de desplazamiento hacia la izquierda. Y si es al revés, restamos un poco de la izquierda, agregamos un poco hacia arriba, restamos un poco de la parte superior. Y luego podemos tomar este use callback, que he envuelto, he envuelto este método en use callback diciendo que depende del mouse X y el mouse Y, estado que definimos más arriba. Y ahora podemos poner eso dentro de un use effect. Tenemos esta pequeña y encantadora especie de bucle de juego sucediendo aquí. Esta fue realmente mi idea, quiero probar a jugar con React para video y cosas así porque el bucle de use effect es muy similar a ese bucle de juego que los motores de juego o el software de juegos tienen, donde constantemente estás haciendo un poco de lógica. Y ahora, cuando mueves el cursor al borde de la pantalla, se mueve. Tenemos el desplazamiento a través del campo de batalla. Esto es fantástico, con muchos registros de consola también. Muy necesario, muy requerido.

Así que hemos avanzado rápidamente. Hemos cumplido con nuestro primer y segundo requisito, hacer clic en unidades y edificios para seleccionarlos. Primero, para poder hacer clic en ellos, necesitamos poder renderizarlos. Entonces vamos a mover nuestro estado que estábamos guardando en solo algunos hooks de estado a un reductor porque vamos a hacer mucho más. Si vamos a tener muchas unidades en el futuro, queremos poder acceder a todas ellas en un reductor. Entonces vamos a crear una matriz de unidades, agregar una unidad allí por ahora, y luego mover todo lo demás a un objeto de interfaz de usuario para que esté fuera del camino. Y por ahora vamos a agregar un reductor que haga la lógica de actualización de la posición del mouse. La lógica que estábamos almacenando en el estado antes, pero ahora la estamos almacenando en un reductor.

Ahora, agregar una unidad y renderizarla, vamos a seguir un enfoque muy similar a lo que estábamos haciendo con el renderizado de las baldosas, donde simplemente vamos a agregar este div que existe dentro del elemento de la cuadrícula, y vamos a mapear sobre todas las unidades en nuestro estado. Les daremos un div donde tendrán una clase de unidad, que les dará algunos atributos genéricos sobre su ancho y su altura. Y luego tienen el tipo particular que sea. Para esto, es un lancero, por lo que usa el fondo de lancero. Y luego vamos a establecer dinámicamente la posición como baldosas porque se van a mover más adelante en lugar de hacerlo en el CSS. Y eso significa que obtenemos este maravilloso renderizado. Ahora, la razón por la que esto está sucediendo es porque la textura del lancero es un cuadrado y está erguido, pero obviamente hemos hecho esta transformación para que esté un poco hacia abajo. Entonces necesitamos encontrar una forma de básicamente enderezarlo de nuevo. Y la forma en que vamos a hacer eso es básicamente desrotarlo un poco, donde vamos a hacer una rotación Z negativa, rotar el X y luego también escalar el Y un poco, y boom, tenemos a nuestro lancero de pie y listo para la acción. Pero desplazarse por un campo de batalla con una sola unidad en el medio no es particularmente emocionante. ¿Cómo lo hacemos interactivo? Ahí es donde realmente brilla React porque los controladores de clic son pan comido. Muy fácilmente, para cada unidad que vamos a renderizar, le daremos un controlador de clic de unidad donde pasaremos el ID de la unidad.

7. Manejo de clics de unidades y movimiento con clic derecho

Short description:

Esta parte aborda el manejo de clics de unidades e implementa la funcionalidad de movimiento con clic derecho. Explica cómo se generan los métodos para cada unidad y cómo se despachan acciones para seleccionar entidades. El texto también cubre el uso de magia CSS para mostrar la salud e implementar un movimiento suave utilizando variables CSS. Aborda el problema del tiempo de transición y sugiere establecerlo dinámicamente en función de la distancia recorrida. Además, explora el comportamiento de desplazamiento y explica por qué el enfoque inicial utilizando useEffect como un bucle de juego no es efectivo.

Este manejo de clics de unidades en realidad va a generar un método para cada una de ellas. Por lo tanto, va a crear un método que se llamará cuando esté listo, donde simplemente despachará una acción para seleccionar la entidad, la acción de selección de entidad. Simplemente establecerá un ID seleccionado de lo que sea que haya hecho clic en ese momento. Y hemos agregado un poco de estado inicial aquí para null, lo cual debería estar bien.

Y ahora, cuando hacemos clic en él, y con un poco de magia adicional de CSS para mostrar un poco de salud en una barra de selección, ahora podemos hacer clic en él y hacer clic fuera, y hacer clic en él y hacer clic fuera. ¿Quién no jugaría eso durante varias horas? ¿No es fantástico?

Ahora, si queremos poder hacer clic derecho para moverse, esta cosa muy similar en la que puedes hacer clic derecho, tener un controlador de clic derecho, que es lo que hace el método onContextMenu. Básicamente, este es tu método onRightClick, si tuviera otro nombre. Y vamos a hacer lo mismo que hicimos para la unidad, donde para cada baldosa, le daremos un controlador donde manejaremos el clic derecho. Generaremos un nuevo método a partir de la X y la Y, y despacharemos este método. Esto es un poco más complicado que el otro, pero eso es porque queremos ir y encontrar la unidad seleccionada actualmente, y luego básicamente decirle que se mueva tomando la posición de esta nueva a la que acabamos de hacer clic en una baldosa, queremos moverla. Y luego recorreremos las unidades, la actualizaremos y restableceremos el estado.

Entonces ahora, clic, boom, movimiento. Oh, eso es un poco rápido. Realmente no necesitamos eso, parece injusto y no parece muy realista para la era medieval tener teleportación todavía. Pero porque lo estamos moviendo solo usando variables CSS, podemos establecer la transición como lineal y de repente tenemos esta unidad en movimiento. ¿No es fantástico? Oh, en realidad. Bueno, ahora el problema con esto es que se mueve suavemente, pero independientemente de cuánto se mueva, tomará un segundo, lo cual es un poco demasiado tiempo. Lo que significa que si se mueve muy lejos, es súper rápido, y cerca, súper lento. ¿Cómo podemos cambiar esto? Bueno, podríamos establecer dinámicamente ese tiempo de transición basado en la distancia que se mueve. Entonces ahora, si haces clic muy, muy lejos, la distancia será bastante larga. Y si haces clic muy cerca, será un tiempo bastante más corto. Aquí tienes un ejemplo de cómo funciona, donde ahora se está moviendo muy lejos y es un poco lento, y se mueve un poco y es mucho más rápido. Una cantidad de tiempo mucho más consistente. Pero luego, si comienzas a hacer clic un poco más rápido, no funciona demasiado bien y de repente esto no es exactamente lo que queremos. Estás haciendo clic aquí, estás haciendo clic en uno de ellos y está estableciendo la posición. Haces clic en el siguiente lugar, acelera la animación, pero la unidad en realidad no se ha movido tanto. Y también, en realidad, si volvemos a ese desplazamiento que estaba sucediendo, en realidad solo se desplaza cuando mueves el mouse. Entonces, si mueves el mouse hacia el borde del marco y no lo mueves en absoluto, no se seguirá desplazando para ti. Este no es realmente el comportamiento que deseas. Y la razón por la que esto está sucediendo es porque esa idea que tuve de usar ese useEffect como un bucle de juego, en realidad no está funcionando, porque useEffect solo se ejecuta cuando realmente mueves el mouse.

8. Haciendo que React renderice más y explorando otras herramientas

Short description:

Y sería mucho más como un juego si se ejecutara cada vez. Podemos hacer que React renderice más utilizando diversas técnicas como modificar variables, usar timeouts y el hook useAnimationFrame. Estos métodos permiten un renderizado más consistente y crean una experiencia más fluida, similar a un bucle de juego. Como desarrolladores de React, es importante explorar los límites de lo que React puede hacer y considerar otras herramientas en nuestro arsenal, como HTML5.

Y sería mucho más como un juego si se ejecutara cada vez. Donde un bucle principal en un juego generalmente maneja una serie de entradas, renderiza una serie de elementos y luego se llama a sí mismo, y simplemente sigue y sigue hasta que sales. Eso es fundamentalmente lo que es un bucle de juego.

Entonces esto nos lleva a la horrible pregunta que la mayoría de nosotros normalmente hacemos lo contrario, ¿cómo podemos hacer que React renderice más? Ahora he decidido revelar muchos de mis Secretos Oscuros donde podemos ir y leer nuestro libro de artes oscuras de React para encontrar todas las diversas formas de hacer renders adicionales. Podemos usar un setTimeout para activar un renderizado modificando una variable que luego activa nuestro useEffect. Podemos actualizar una variable de estado. Estoy seguro de que muchos de ustedes han hecho esto accidentalmente como errores en su propio código, donde tienen un useEffect que se ejecuta en el montaje, pero dentro de ese useEffect también cambian alguna variable que también está en el árbol de dependencias, y simplemente se ejecuta para siempre. Aunque eso causa más errores de desbordamiento de pila que cosas divertidas de renderizado.

O podríamos hacer una llamada, llamar al callback real dentro del useEffect mismo. Entonces, haces ese useEffect inicial y luego llamamos al callback allí. Pero el problema con estas cosas es que son formas de hacer que renderice más, pero no necesariamente hacer que renderice de manera más consistente, lo cual querríamos para cosas más animadas.

Para esto, podríamos usar la maravillosa API exclusiva de React window.requestAnimationFrame. Estoy bromeando. Por supuesto, no es una API de React. Es una API del navegador. Es una que ayuda con muchas cosas basadas en animación, pero podemos conectarla a React aquí. Y decidí tomar este pequeño y encantador hook de CSS Tricks, donde se llama useAnimationFrame. Y básicamente te permite pasar un callback, que luego será llamado por requestAnimationFrame, creando esta forma muy suave de renderizar cosas donde puedes hacerlo basado en el tiempo en lugar de solo en eventos que están sucediendo. Esto está mucho, mucho más cerca de ese bucle de juego del que estaba hablando.

Ahora, puedes tener esta única función de animación donde se te proporciona el tiempo. Puedes hacer mucha lógica. Puedes mover el mouse si está en el margen. Puedes mover las unidades. Puedes actualizar las animaciones de los sprites. Puedes cantar y bailar hacia la libertad. Y realmente, en este punto probablemente deberías haberte dado cuenta de que esto no se trata realmente de reconstruir Age of Empires II en React. La razón por la que quería hablar de este tipo de cosas hoy, el tipo de cosas que aprendes a medida que comienzas a jugar en los límites de lo que React puede hacer y lo que no puede hacer, es la verdadera pregunta que debemos hacer es, ¿en qué es bueno React y qué otras herramientas tenemos? Creo que es bastante fácil para nosotros, cada vez que estamos viendo cosas de React, pensar que debe estar en la API de React. Debe haber una solución de React para esto. Pero tenemos que recordar que, como desarrolladores de React, tenemos una gran cantidad de herramientas en nuestro arsenal. Podemos construir cosas en HTML5.

9. Construyendo con CSS o Skulls

Short description:

Podemos construir cosas solo con CSS o Skulls. Las cosas que puedes aprender al hacer que algo haga cosas terribles pueden ser bastante útiles. Espero que hayas disfrutado de mi dolorosa experiencia al intentar reconstruir Age of Empires 2 en React. No lo recomiendo en absoluto. Pero espero que puedas encontrar algo divertido para hacer con React que sea completamente diferente. Si tienes algún comentario, por favor avísame en Twitter. Gracias.

Podemos construir cosas solo con CSS o Skulls, por alguna razón, porque no se me ocurrió una cuarta para agregar allí. Tal vez los Skulls sean para testing, no lo sé. Pero creo que las cosas que puedes aprender al hacer que algo haga cosas terribles pueden ser bastante útiles.

Espero que hayas disfrutado de mi dolorosa experiencia al intentar reconstruir Age of Empires 2 en React, lo cual fue horrible y terrible, y no lo recomiendo en absoluto. Pero espero que puedas encontrar algo divertido para hacer con React que sea completamente diferente de forms o SPAs o cualquiera de esas cosas en las que React es bueno. Ve y haz algo en lo que React sea terrible.

He sido Joe Hart. Si tienes algún comentario sobre cómo esto tomó vuelo, por favor avísame en Twitter. Visita mi sitio web o envíame un correo electrónico y ven a charlar. Ha sido un verdadero placer. Gracias. ♪♪

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn