Aprende a reaccionar haciendo un juego (edición de 2024)

1. Avance de la clase: Hola amigos, y bienvenidos a Discourse. El objetivo de este curso de Reactjs es presentarte las herramientas y conceptos necesarios para comenzar a construir aplicaciones web reales Soy Daniel y seré tu instructor. Llevo más de 18 años haciendo desarrollo web , tanto en organizaciones grandes como pequeñas, y todavía me encanta. Puedes leer más sobre mí en mi página web, GSCRAFTO. He empezado a aprender a codificar tratando de hacer mis propios videojuegos. Esta es la razón por la que creo que aprender debería ser divertido y cercano al mismo sentimiento que tenías de niño cuando jugabas y descubriste cosas nuevas. Al final de este curso, estaremos construyendo el siguiente juego usando VGS Será un juego de tijeras de papel de roca para cada jugador, el juego elegirá un signo aleatorio y también decidirá el ganador. Mientras construimos este juego, revisaremos varias imágenes de las mejores prácticas de reacción y también cómo evitar trampas comunes El curso también viene con este bonito manual imprimible que podrás usar más tarde para una fácil referencia. Siguiendo el contenido de los videos aquí, hay más de 35 páginas completas con código, ejemplo, recursos o diagramas, para que puedas obtener una mejor representación visual de lo que está pasando. He puesto bastante trabajo en éste, espero que sea de ayuda. Empecemos a ver clase. 2. Introducción a la clase: Antes de comenzar a hacer alguna codificación real, nos gustaría exponer algunas cosas. En primer lugar, cómo utilizar este curso. La información en el discurso es bastante densa para obtener los mejores resultados. Mi consejo será pasar por este curso dos veces. Primera vez, obtener una visión general del curso, y la segunda vez, hacer el ejercicio real. Cada capítulo viene con un archivo de inicio y fin que facilitará el seguimiento del contenido. Te recomiendo codificar manualmente ya que esto hará que las cosas sean más fáciles de recordar. En este curso, usaré VS Code y Google Chrome porque existen mis principales herramientas de elección, pero puedes usar cualquier otro ID o navegador con el que te encuentres cómodo. Además, tenemos una configuración muy mínima. No se necesita trabajo establecido, no hay módulos NPM. De hecho, solo puedes ver la fuente y obtendrás el código que se está ejecutando en el navegador, conocimiento requerido. Desde una perspectiva real, este es un curso amigable para principiantes. Pero si no sabes nada de reaccionar, podría tener sentido tomar mi otro curso para principiantes sobre reaccionar que tengo aquí. Se espera que conozcas solo un poco sobre temas como cuál es el componente o cómo funciona una variable de estado de reacción. Considéralo como un curso que te proporciona un modelo de pensamiento sobre cómo hacer apps reales. Veremos las mejores prácticas, haremos errores, y también veremos cómo solucionarlos. Co snippets Personalmente no me gustan los cursos largos. Creo que nunca completé un curso que fuera más de 2 horas. Para reducir el tiempo de este curso, he definido muchos fragmentos de código como este Los puedes ver todos aquí en la carpeta de código VS donde tengo todos los fragmentos de código que utilizo a través del curso La razón para definir todos estos fragmentos de código es porque es bastante difícil para mí hablar en un idioma extranjero y escribir código al mismo tiempo Pero también quiero ahorrarte el tiempo donde solo me estás viendo, cómo escribo cosas en el editor de código. Con esto fuera del camino, pasemos a nuestra primera lección donde usaremos react, render y reaccionaremos a root para hacer el andamio para nuestra aplicación 3. Renderiza la aplicación con ReactDom createRoot: Echemos un vistazo a lo que tenemos en la plantilla inicial del discurso. Están estas importaciones simples. Aquí solo estamos importando Reactome y Babel como lo que hemos hecho en el pasado para enero Aquí tenemos también un bloque de script que es de texto Babble no es Javascript es texto Babble Y la razón de esto es que vamos a necesitar balbuceo y también esta importación para poder escribir X en nuestro código A. He hecho esta configuración en la idea de no complicar demasiado las cosas, no comenzar con módulos MPM, servidores web, una herramienta o cosas así. Por ahora, solo estamos teniendo este sencillo archivo HTML de índice llano. Ahora escribamos nuestro primer componente de reacción. Este componente de reacción, se llamará app. En general, app es el punto de entrada para cualquier aplicación react. Voy a escribir aquí constante app. Esta app es una sencilla función que devolverá algo así como hola desde la app react. Por cierto, lo que ves aquí es x Esto será interpretado por Babble y se traducirá en sencillo Javascript. En este punto, si voy a guardar y refrescar la página, no pasará nada. Por cierto, hemos hecho este div con la idea de root, éste servirá como contenedor principal para nuestro react Ap. Ahora, dado el hecho de que queremos insertar el react Ap dentro de esa inmersión, lo primero que tendré que hacer es venir aquí y escribir una nueva variable llamada container. Este contenedor será igual con document get element by ID root. Voy a apuntar a este de. A continuación, voy a necesitar crear una nueva raíz. Para esto, voy a escribir const root. Este es igual con react create root. Lo voy a dar como parámetro, el contenedor que acabo de crear en la línea anterior. Por último, agregaré una nueva línea donde diré route Render App Render dentro de esta ruta, esta app desde aquí. Si voy a guardar y refrescar la página, veremos que tenemos ahora este lindo hola de la Reactapp El contenido que antes estaba en la ruta ID ahora fue reemplazado por el contenido de nuestro React, hablando de este render raíz. Esto se introdujo en versiones más nuevas de React antes. Era otra sintaxis, pero esta viene con algunas mejoras de rendimiento. Voy a añadir en el manual de este curso el enlace hacia un artículo que señala algunas de las actualizaciones que se introducen al render root. Fresco. Hemos hecho de nuestro primer componente. A continuación veremos cómo crear los componentes que se necesitan para construir el juego real. 4. Andamio: los componentes principales: Ahora que hemos creado nuestra aplicación principal de Act, echemos otro vistazo a nuestra arquitectura de componentes. Así se verá el juego al final. Como podemos ver aquí, tenemos tres tipos de componentes. En primer lugar, está el componente jugador. Este componente tiene dos instancias, una para el jugador rojo y otra para el jugador azul. También está este tablero de resultados que mostrará quién ganó el juego. Por último, está el componente del juego que incluirá todo esto. Ahora vamos a hacer los andamios para todos estos componentes Volveré al índice HTML. Lo primero que voy a hacer es venir aquí y crear un componente de juego. Para ello, voy a escribir juego constante. Esta es una función, una función básica. Al igual que el componente app, tendrá el siguiente contenido. Voy a escribir aquí un dip que sólo va a devolver por ahora este sencillo texto. Ahora en la app, en lugar de devolver este H one, voy a devolver una nueva instancia del componente del juego. Si vamos a refrescar, veremos ahora que lo que tenemos aquí es este contenido que hemos declarado en el componente del juego. Pero esto no es suficiente. Si vuelvo aquí, veremos que dentro del componente del juego, hay jugadores y también este tablero Resu Vamos a crear estos dos también. A continuación voy a crear el componente reproductor. Este será nombrado jugador. Será una función que devolverá algo así, solo una con algún texto sencillo. Por último, también está el componente de tablero de resultados que también será una función. Dentro de esta función, diré que aún no hay resultados. Porque aquí en el tablero de resultados, tendremos que mostrar quién ganó el juego. Vamos en el componente del juego aquí, crear todo ese arco de componentes. En primer lugar, voy a necesitar dos instancias del tipo player. Lo que voy a hacer aquí es crear una instancia y la segunda para el otro jugador. A continuación, añadiré también esta tabla de resultados que hemos creado. Si echamos un último vistazo aquí, veremos que necesitamos también este botón de inicio de juego. Voy a volver aquí. Aquí solo escribiré un simple botón HTML. Este no es un, un componente, es solo un simple elemento HTML. Voy a ahorrar. Y ahora si vamos a refrescar, vemos que tenemos dos componentes del reproductor, el botón y finalmente la palabra resultado. Pero por ahora, los componentes de nuestro reproductor son exactamente los mismos, solo tienen este texto estándar dentro de ellos. En la siguiente lección, veremos cómo podemos personalizar estos componentes usando props Y también cómo enseñaremos a nuestros componentes a elegir un elemento aleatorio entre roca, papel o tijeras. 5. Agregado de accesorios/atrezo: Ahora que tenemos listos los andamios de los componentes, echemos un vistazo a nuestro último ejemplo De nuevo, verás que un componente de jugador es rojo y el otro es azul. Y también tienen algunos símbolos Ramble asignados a ellos. En nuestro estado actual, ambos componentes se ven exactamente iguales. Son solo un div con un texto estándar. Lo que quiero hacer contigo en las siguientes dos lecciones es antes que nada asignar parámetros a estos componentes para saber que este es rojo y el otro es azul. Y también en la siguiente lección, veremos cómo dibujar primero algunos elementos aleatorios para estos componentes. Comencemos con los parámetros de los componentes. Lo primero que tendremos que hacer es venir aquí en la declaración de componentes y asignarles un color. Aquí, voy a decir que quiero un color azul para este jugador. Siguiente aquí, voy a decir que quiero un color rojo. Así es como enviamos un parámetro en este valor al componente real. Para poder leerlas, voy a necesitar aquí agregar un nuevo parámetro de props Este es un parámetro predeterminado que cada componente de función puede recibir aquí. Lo que podemos hacer es sólo leer el valor de ese parámetro que enviamos. Entonces podemos ver aquí apoyos ese color, digamos Cuando vamos a refrescar, veremos aquí que tenemos componente de color azul y el otro es rojo Pero podemos ir un paso adelante. Podemos aprovechar las declaraciones Javaskipstructuration Lo que puedo hacer aquí es venir y agregar el comunicado de reestructuración para el Colo. En vez de tener aquí apoyos ese colo, solo puedo decir que ahora quiero el colo y las cosas van a funcionar exactamente igual que antes Pero incluso podemos ir un paso adelante y hacer todo el desestructuramiento directamente en la declaración de la función Lo que quiero decir aquí es que obtendremos algún objeto como parámetro y haremos una estructuración directa directamente desde aquí. Si guardamos y nos refrescaremos, verás que las cosas son como antes. Pero ahora el código, está un poco más limpio. Veamos en la siguiente lección cómo podemos dibujar algunos elementos aleatorios para esta carta de jugador. 6. Carteles aleatorios: Ahora tenemos los parámetros de color enviados a los componentes. Esto es bastante genial porque podemos usar esos colores para hacer que un componente de jugador sea rojo y el otro azul. Pero lo que aún no hemos cubierto son estos elementos aleatorios. Al final de la lección, lo que quiero hacer es poder extraer algunos elementos aleatorios. Por ahora, solo habrá cadenas y las mostraremos en los componentes como tenemos aquí. Volvamos a nuestro ejemplo aquí. Primero voy a añadir el comentario para saber qué estamos haciendo aquí. Y voy a definir una nueva constante, signos principales. Esta constante será solo una simple matriz que contiene algunas cadenas. Cada cuerda representará un valor posible para los letreros, piedra, papel o tijeras con esta matriz. Ahora puedo volver en el componente player aquí voy a añadir otro comentario, diciendo que estamos generando un índice aleatorio para escoger algún signo aleatorio. Esta será una nueva constante llamada random index. Este índice aleatorio será una función matemática. Devolverá valores aleatorios 0-2 Con este índice aleatorio creado, ahora podemos venir y crear otra constante llamada aleatoria L signo aleatorio Vamos a llamarlo. Este signo aleatorio serán signos de índice aleatorio. Ahora dado el hecho de que tengo este signo aleatorio, puedo venir aquí y reemplazar todo el nombre, todo el contenido de la carta del jugador con esta matriz. Es decir, que lo que viene de las selecciones de color y esto es lo que generamos aquí. En realidad, renombro esto a Signo Aleatorio. Bien, ahora si nos refrescamos, verás que tenemos al jugador azul escoge papel mientras que el jugador rojo escoge rock. Después de eso voy a refrescarme otra vez, refrescaré otra vez, y así sucesivamente. Verás que cada vez que me refresque, se elige un nuevo signo aleatorio para un jugador determinado. 7. Estilos de CSS en React: Como es ahora, nuestra aplicación se ve bastante aburrida. Vamos a añadir algunos estilos CSS. Para ello, voy a necesitar ir a crear un nuevo archivo. Este archivo se llamará Estilos que CSS. Aquí, voy a pegar los estilos CSS necesarios. Bueno, este no es un curso sobre CSS. Puedes echar un vistazo a estas declaraciones y verás que muchas de ellas son bastante autoexplicativas, como establecer un fondo Carlo, alinear el texto y así sucesivamente. Ahora que hemos creado este archivo CSS, vamos a venir y vincularlo a nuestro archivo principal de reacción aquí. El hecho de que quiero importar una nueva hoja de estilo, y esta viene de estilos que CSS. Ahora si nos refrescamos, veremos que ya empezamos a tener algunos estilos básicos dentro de nuestra aplicación. Tenemos el fondo, el color del texto es diferente, la alineación, y así sucesivamente. Pero todavía no tenemos ningún estilo aplicado aquí, por ejemplo, a los componentes del reproductor. Para ello, voy a necesitar venir y vincular, por ejemplo, la clase player y la clase container con estas dips que tenemos dentro de nuestra aplicación react para Voy a necesitar agregar un nombre de clase aquí. Diré que quiero un nombre de clase de jugador. Y aquí en el otro, cuando tengamos el contenedor principal para el jugador x, agregaré un nombre de clase de contenedor. En condiciones normales, esto será solo clase igual contenedor o clase igual jugador. Pero dado el hecho de que clase ya se toma trabajo el trabajo de reserva en Javascript, necesitamos agregar este nombre de clase con esto. Volvamos y demos frescos. Ya veremos que tenemos estos dos elementos en la pantalla y se ven bastante bonitos. Volveré al 100% del navegador, pero hay una cosa que falta. Vamos a echar otro vistazo al ejemplo final. Voy a abrir nuestro diseño final. Verás aquí que el letrero se volteó. Este está apuntando hacia el lado derecho y éste a la izquierda. Lo que podemos hacer aquí es venir en el CSS y agregar otra regla. Diré que quiero que el segundo hijo del tipo jugador se transforme. Por cierto, lo que he hecho aquí es un anidamiento CSS nativo. Voy a añadir en el manual para este curso un enlace donde se puede leer más sobre el mismo. Pero lo que es bueno aquí es que después de que haya agregado esta regla, verán ahora que este texto ahora está volteado básicamente Déjame abrir otro archivo. Esta regla que agregamos aquí, esta transformación de Scalix menos uno va y voltea la carta del segundo jugador Cuando agrego ahí una señal real, estará apuntando hacia el otro lado. 8. Configuración de estilos en línea: Tenemos algunos estilos básicos establecidos, pero aún queda espacio para ir. Por ejemplo, no tenemos un color de fondo para estos artículos y además no tenemos una imagen para los letreros como roca, papel o tijeras. Esto es lo que queremos hacer en esta lección. Empecemos por el colo de fondo. Si echamos un vistazo a cómo se ven las cosas ahora mismo, tenemos este parámetro colo que viene en el componente. Este parámetro de color se puede utilizar como el color de fondo, pues aquí vamos a tener rojo o azul. Esto es exactamente lo que queremos poner como fondo aquí. Para esto, vendré y usaré el estilo inline para definir este estilo inline. Aquí mismo, el estilo es igual a éste recibe como parámetro un objeto de script Java completo. Voy a querer decir que el colog de fondo tiene que ser exactamente el valor del parámetro que recibimos aquí Será colo de fondo y será igual a colocar. Vamos a refrescar ahora Vemos que tenemos las cartas de jugador con el colo de fondo previsto. Este objeto inline se volverá, con el tiempo más complejo. Una buena idea es venir aquí y extraerlo como un objeto separado aquí, nuestro estilo inline correcto, este estilo inline será exactamente lo que tenemos aquí. Voy a pasar este objeto directamente al estilo inline. Las cosas se verán exactamente como se veían antes, pero tenemos este bonito objeto aislado al que podemos llegar y agregarle más valores más adelante. Ahora hablemos un poco sobre las imágenes que se pondrán dentro de las cartas de jugador. En vez de tener aquí roca o tijeras. Tendremos imágenes reales para esto. Ya preparé algunos recursos y los compartiré con ustedes. Ahora, acabo de poner en mi sitio web los PNGs. Voy a abrir estas imágenes, verás que son exactamente para la roca, una para papel y la otra para tijeras. Ante el hecho de que los PNG también podemos tener fondos transparentes Y si echamos un mejor vistazo al formato de la URL, en realidad lo que tenemos ahí, es algo así. ¿Bien? Es la dirección del sitio web. Pero aquí en lo que podemos sustituir este patrón es en realidad con este signo aleatorio. Debido a que este signo aleatorio, tendremos los valores de roca, papel o tijeras. Vamos a hacer esto. Vendré y crearé una nueva constante. Y esta constante será igualada a esa URL completa. Y después de ese signo aleatorio, ese PNG, es bastante agradable porque ya puedo venir aquí y para el estilo inline, agregar esta imagen de fondo. Volvamos y vamos a refrescarnos. Veremos ahora que tenemos esas imágenes colocadas en nuestros componentes, y de hecho nos queda un poco de texto. Así que ahora puedo venir y borrar esto ya que ya no lo necesitamos. Veamos el último ejemplo en acción. Se ve bastante bien. Por ejemplo, cada vez que refresque, verás que se dibujan nuevas señales para cada jugador. Como nota final, recuerde que tenemos en los estilos aquí para la carta de jugador, tenemos todo esto. Tenemos la repetición de fondo, el tamaño del fondo, el origen del fondo, y así sucesivamente. Y en realidad estas son las reglas CSS que nos permiten hacer que estas imágenes se vean bien dentro de la carta del jugador. Esto es. Pasemos a la siguiente lección. Veremos cómo agregar esa bonita animación cuando presionemos el botón de inicio del juego. 9. El gancho useState(): Ahora que ya tenemos los estilos inline establecidos, vamos a echar un vistazo a la versión final de nuestro ejemplo. Nuestro juego parte de un estado vacío. Ahora se puede ver que cada jugador tiene un estado vacío. Aún no se había dibujado ninguna señal para un jugador. Sólo cuando presiono este botón de juego de estilo, Entonces comenzará la animación de barajado y cada jugador obtendrá una señal aleatoria Cómo se ven las cosas en estos momentos es que nuestros jugadores, cada uno de ellos empieza ya con una señal dada. Y la razón de esto es que cuando comencemos como un estilo inline, estableceremos esta imagen de fondo en función del signo aleatorio que se generó fuera de la caja. Esto es algo que queremos cambiar. Pero aún más, lo que queremos cambiar aquí es el hecho que quiero que el juego real comience cuando presiono este botón. Si nos fijamos en el diagrama de flujo de datos, básicamente lo que queremos hacer a partir de aquí son las dos partes. Cuando presionamos el botón Start Gate para enviar un evento a cada componente del jugador. Veamos cómo podemos hacer esto. En primer lugar, lo que tenemos que hacer es cambiar cómo están las cosas aquí dentro. En lugar de tener este signo aleatorio generado cada vez que se renderize el componente, queremos extraer el diseño en una variable de estado. Por lo tanto queremos usar un gancho de estado U. En condiciones normales importarás un estado U, por lo que dirás importar estado U de react. Pero dado el hecho de que no estamos usando un servidor web, tenemos esta configuración muy mínima. Tendremos que hacer un ligero cambio aquí. Y voy a importar el estado U como así const y voy a aplicar la declaración destructurante en Javascript a la reacción. Pero ten en cuenta que si estás usando una app re create, tendrás que importarla como está aquí mismo. Ahora que tenemos el estado U importado correctamente, voy a venir aquí. En el componente player, definiré la nueva variable de estado creada usando este estado U y será pecado y signo set. Está bien el hecho de que vamos a empezar con una variable Neal porque queremos aquí para iniciar los componentes del jugador sin tener algo seleccionado Esta variable de estado establecida reemplazará a este signo aleatorio que tenemos aquí. Aún más, podemos extraer todo lo que está aquí, toda la generación aleatoria, queremos extraerla en una función. Deberíamos ser capaces de llamar a esta función. Cuando presionemos el botón, reemplazaré todo lo que tenemos aquí con esta función. Si echas un vistazo, esta función pick random sin solo contiene exactamente las mismas líneas que teníamos antes. Sólo que al final establecemos el signo aleatorio en esta variable set sign state y todo está envuelto en una buena función. Ahora una cosa que tendremos que averiguar es cómo debemos hacerlo para que esta función de signo aleatorio de selección esté vinculada al botón. Cómo podemos hacerlo de tal manera que cuando presionamos este botón Iniciar juego, se llame a esta función. Te voy a dejar esto a ti como tarea. Intenta hacer esto antes de comenzar el siguiente video. Creo que hay múltiples formas de cómo podemos hacer esto, pero si quieres como propina, deberías intentar usar el usuario fa hook. 10. Eventos desencadenantes en componentes secundarios wip: ¿Cómo fue que pudiste encontrar una solución para eso? Cuando presionamos el botón Iniciar juego para enviar eventos a estos componentes A para que se seleccionen nuevos signos aleatorios. Hay múltiples formas de solucionar este problema. Veamos un plan de lo que queremos hacer. Primero, desde el componente del juego, pasaremos un nuevo parámetro llamado start time al componente player. Dentro del componente reproductor, observaremos la hora de inicio a través del gancho de efecto de uso. Cuando se modifique esta hora de inicio, entonces llamaremos al método pick random sign. Por último, en el componente del juego, actualizaremos la hora de inicio cuando se presiona el botón. Veamos todo esto en acción. En primer lugar, voy a ir en el componente de juego. Aquí voy a crear una nueva variable de estado. A ésta se le llamará hora de inicio como dijimos. También tiene esta función de tiempo de inicio establecida. Comenzará desde el valor nulo, dado el hecho de que no quieres que recojan signos aleatorios al principio. Ahora que se hace esta hora de inicio, iré aquí en ambos componentes de jugador. Enviaré el parámetro de hora de inicio. Lo enviaré para el primer componente, y después de eso lo enviaré también al siguiente componente. Este parámetro de tiempo de inicio en un punto necesita ser actualizado. Para ello, voy a crear una nueva función. Esta función será un juego de inicio con nombre constante. Este juego se verá así, por lo que establecerá la hora de inicio en la fecha. Ahora elegiremos la fecha y hora actuales del navegador, y lo actualizaremos cada vez que alguien presione el botón de inicio del juego. Finalmente, usaremos la función onclick. Cuando alguien presiona el botón, llamaremos al juego de inicio. Ahora dado el hecho de que sabemos que los componentes del reproductor tendrán esta hora de inicio nuevo parámetro, iré y lo declararé aquí y lo dejaré en los parámetros del componente. Tendremos que vigilar cuándo se modifique esta hora de inicio. Para ello, necesitaremos importar el gancho de efecto de uso. Voy a volver aquí y aquí voy a llamar también el efecto. Recuerda que si tuviéramos como una web normal, tendrás que importarla desde aquí. Importarlo directamente de react. Dado que esto ya está creado, vamos y agreguemos el gancho de efecto de uso dentro del componente player dentro de él. Haremos lo siguiente. Comprobaremos si hay una hora de inicio. Recuerda que inicialmente esta hora de inicio es nula. Si modificamos la hora de inicio, llamaremos al signo aleatorio de selección. Recuerda cómo funciona el efecto de uso. Efecto obtiene como parámetro, una matriz de valores. Cada vez que se cambian estos valores, la función que se incluye activa la función que se incluye en el efecto de uso. Veamos, ahora esto en acción. Voy a refrescarme ahora. Inicialmente no tendremos ningún valor dentro de los componentes del jugador, pero si presionamos el botón de inicio del juego, primero tendremos algunos elementos aleatorios dibujados después de eso. Más y así sucesivamente. Básicamente hemos averiguado una manera de que podamos iniciar el juego cuando pulsamos este botón. Bastante genial. En el siguiente capítulo también agregaré esa animación de barajado cuando se presione este botón 11. Animaciones y setInterval: Echemos un vistazo más al ejemplo final. Cuando presionemos el botón, verás que tenemos esta animación que se está ejecutando cada vez que se dibuja un signo aleatorio. ¿Cómo podemos implementar esto en nuestro ejemplo? Porque ahora mismo solo presionamos el juego estelar y tenemos directamente los elementos dibujados, pero ninguna animación. Pues de nuevo, aquí, hay múltiples formas de hacer esto. También hay una solución CSS pura que podemos aplicar. Pero nuevamente, seremos la solución que nos permitirá jugar con algunos mecanismos o reaccionar y nos permitirá ver cómo podemos evitar algunos errores. Vamos a darle una oportunidad. Lo que vamos a hacer aquí es usar esta función de intervalo establecido. Esta es una función Javaski, no es algo que dependa Básicamente lo que hace esta función es que la llamaré pasar hacia abajo una función que se ejecutará por cada retraso. Básicamente, digamos que quiero ejecutar algún código cada 1 segundo voy a poner aquí 1,000 porque es de 1 millón de segundos. Y entonces ese código se ejecutará como cada segundo cuando termine el ciclo, cuando ya no necesite que ese código se ejecute, tendré que llamar a esta función integral clara. Entonces veamos cómo podemos implementar esto en nuestro ejemplo. En primer lugar, necesitaremos saber cuántas veces se ejecutó la animación. Echemos otro vistazo cuando nosotros, veremos que va por un tiempo y después de eso se detiene. Esto se debe a que establecemos un tiempo de 20 animaciones para ir. Voy a necesitar venir aquí y crear una nueva variable de estado llamada contador de animación. Este contador de animación , comenzará desde cero. Este hará un seguimiento de cuántas veces ejecutó nuestra animación. Y en el signo aleatorio pick, agregaré la función set inteval Queremos que algún código se ejecute a 100 milisegundos, diez veces por segundo Lo que es ese código, es exactamente este que antes estaba directamente en la raíz de la función. Ahora se moverá en la función integral set, queremos escoger un nuevo signo aleatorio a 100 milisegundos. Pero lo que queremos hacer, también queremos en un momento esta animación deje de correr. Vendré aquí, voy a comprobar si el contador de animación es mayor que 20. Tendremos que despejar la integral para detener la animación. Y lo que he pasado entonces abajo en la función integral clara es exactamente esta, las referencias que he hecho aquí. Una última cosa que tenemos que hacer. También es para incrementar en un momento, esta chaveta de animación Cada vez que se ejecuta esta integral, voy a decir animación conta aquí Deberíamos incrementarlo con uno. No te dejes tentar a hacer algo como esto porque si lo hacemos así, acabaremos con algunos bichos Recuerda que el estado establecido, cuando se ejecuta en valores anteriores, tendremos que llamarlo así. Se llamará a través una función que obtendrá acceso al valor anterior e incrementaremos ese valor más uno Bien, muelle, ahora lo vamos a ejecutar. Presionemos el botón de inicio del juego. Verás que tenemos la animación en funcionamiento, lo cual es bastante genial. Voy a recargar la página por el momento. Si juegas con este ejemplo, verás que hay dos errores para la siguiente lección antes de comenzar realmente. En primer lugar, trata de encontrar cuáles son los bichos, ambos, y darle una oportunidad. Intenta arreglarlos. Nos vemos en la siguiente lección entonces. 12. Agregado de useRef() y limpieza de useEffect(): Terminamos la última lección tenemos algunos errores en nuestro código. Te dejé como tarea, la idea de tratar de encontrar estos bichos y arreglarlos. En primer lugar, veamos cuáles son. Hay dos errores principales en nuestro código, e hice esta imagen para que se muestren. En primer lugar, cuando iniciemos la animación, verás que esta animación se ejecuta para siempre. No se detiene después de 20 corridas, aunque tengamos aquí una condición muy clara de que si un encuentro es mayor a 20, entonces tenemos que parar. Este es el primer error y tal vez el más importante también si iniciamos la animación. Y después de eso avanzo rápido, presiono este botón, verás que la animación empieza a volverse extraña. Va demasiado rápido, que también debería, no para. Por último, también hay un tercer bug que es el más fácil de solucionar. Verás que justo si vamos ahora en la imagen en el archivo, verás que tenemos este nulo, ese PNG, el hecho de que nuestro archivo está tratando de recuperar este nulo, ese archivo PNG. Empecemos con esta fruta baja que cuelga. Primero intentemos por lo menos corregir este error que aparece en la consola. El motivo de esto es en realidad esta línea, la imagen de fondo. Lo que hacemos aquí es que estamos tratando de recuperar la imagen del sitio de basura de JS, y tenemos aquí el letrero Inicialmente, se puede ver que este signo comienza con el valor nulo. Esa es la razón por la que obtenemos ese error, porque aquí estamos tratando de recuperar los activos, lo que sea. Después de eso, ese PNG, una solución bastante fácil para este será probar si existe el signo. Si el signo existe, entonces trata de buscar la imagen De lo contrario, no hagas nada, solo recupera aquí una cadena vacía. Vamos a refrescar y verás ahora que el error no está presente en la consola. Este fue el primer error. Pasemos ahora al más complejo. El hecho de que cuando iniciamos la animación, no obtenemos ningún error, pero la animación se ejecuta para siempre aunque aquí exista esta condición. La razón por la que esto sucede es que por esta parte es como que el estado establecido en react no es sincrónico. Cuando intentaremos ejecutar esta condición, esta aún no se actualizará. Por ejemplo, si voy a consolar aquí un encuentro y me refrescaré e iniciaré el juego, verás que es para siempre cero Y la razón es porque no tuvo la oportunidad de hacer realmente la actualización completa. Una forma de arreglar esto es envolviendo todo dentro de la función de contador setanym y usar este valor anterior como nuestra referencia Por ejemplo, hice en el manual para el curso, hice este ejemplo. Lo que podemos hacer es hacer aquí una envoltura grande y poner todo el código dentro del contador stan. Y sabremos con certeza ahora que el valor del estado está actualizado y tiene el valor correcto. Pero esto no es genial porque en realidad existe la función pick rand integral, un estado establecido, es un poco demasiado. Otra cosa que podemos intentar hacer es usar referencias. Las referencias son geniales para trabajar junto con usarlas en react. Los formularios también son excelentes para almacenar valores que se mantienen entre renders pero no necesitan mostrarse en el UY real Lo que voy a necesitar hacer aquí es venir y sustituir esto, cualquier contador por una contrarreferencia alguna. Ante el hecho de que queremos utilizar esta obra, porque F es en realidad una referencia, voy a necesitar importarla a partir del valor real de la referencia se sostiene en el campo actual de la referencia. Lo que tenemos que hacer aquí es cuando iniciemos la animación, es tomar este contador y decir que la corriente es igual a cero. Después de eso, en lugar de usar la variable set state, lo haré. Volver a la referencia y decir que quiero aumentarla en una. Por último, aquí solo puedo usar esta en lugar de la antigua variable de estado. Veamos cómo va. Voy a volver a refrescar después de eso. Si presionamos Iniciar juego. Ahora la animación se detiene después de 20 iteraciones. Vamos a refrescarnos otra vez iniciar juego. Y la animación ahora se detiene después de 20 carreras, lo cual es genial. Arreglamos otro error. Por último, abordemos el último error. Volveré en el ejemplo ahora voy a empezar a presionar muy rápido en el botón de inicio de juego. Verás que la animación va demasiado rápido, que debería, en realidad hay dos formas. Hay múltiples formas, pero dos formas principales de cómo podemos solucionar esto. Una forma de hacerlo es usar otra variable de estado y desactivar este botón mientras se ejecuta la animación, lo cual está bien. Pero vamos a entrar en otro tema, reaccionamos y esa es la función de limpieza del efecto de uso. Básicamente lo que sucede cuando presionamos muy rápido, este botón, se modifica el parámetro de tiempo de inicio. Llamamos a esta función de signo aleatorio un par de veces. En realidad estamos haciendo múltiples intervalos que corren y cambian nuestro signo muy rápido. Esa es la razón por la que la animación actúa así. Una cosa que podemos hacer es usar la función de limpieza de efecto. Effect tiene una función que solo necesitamos devolver una función dada como. Entonces esta función, lo que tengo aquí, se llamará cada vez que se ejecute un nuevo efecto de uso. Así es como estamos asegurando que estamos limpiando todos los efectos de una pasada anterior. En realidad, lo que queremos hacer aquí es aclarar esta integral. Básicamente, queremos llamar a esto también aquí. Deberíamos tener algo como esto. Pero ves que la integral real se hace en esta función y la necesitamos aquí. Otra cosa que podemos hacer es crear una segunda referencia, ésta, sólo voy a copiar esta función aquí, y voy a decir que me integral O aquí. En lugar de crear solo una variable local que no quede expuesta al alcance del efecto de uso, lo que puedo hacer es venir a recoger esta referencia. Diré que éste que corriente iguala con conjunto integral. Voy a despejar aquí. Pero ahora también puedo despejar aquí. En realidad, dado que esta es solo una función de línea, puedo reemplazar todo con solo esta para que se vea un poco más agradable Ahora vamos a correr de nuevo el ejemplo. Verás que cada vez estoy presionando ahora muy rápido el botón, pero aún así la animación se ejecuta como debería ser. Cada vez que vuelvo a presionar el botón, éste se ejecuta y se borra el intervalo actual. Así es como pudimos arreglar todos nuestros ladridos. Veamos en la siguiente lección cómo podemos usar la API de contexto A para comunicar valores de un componente a otro. 13. Proveedores de contexto en React: Ahora que nuestra aplicación vuelve a ser gratuita, pasemos a tal vez el último paso antes de decidir al ganador del juego y completar la solicitud. Esta parte se refiere a cómo nos comunicamos entre componentes. Echemos un vistazo a nuestro último ejemplo. Tenemos estas dos cartas de jugador dentro de ellas. Se dibujan algunos signos aleatorios. otro lado está el componente Resualboard, el que tenemos aquí que debe saber de qué había seleccionado cada jugador para decidir quién ganó el juego Podemos hacer esto pasando apoyos de un componente a otro, pero en este caso será un poco más complicado Podemos hacerlo, pero va a ser más complicado. Otra desventaja de este enfoque es el hecho de que terminamos haciendo demasiada perforación de utilería Así es como se llaman las cosas cuando estamos pasando demasiados componentes de un componente a otro. Otra forma de arreglar esto y también jugar con alguna característica de react es usando el contexto. Veamos cómo se ve esto. Lo que queremos hacer es establecer un contexto de reacción. Después de que cada jugador haya elegido un signo aleatorio, comunicarán al contexto cuál fue el signo elegido. Después de eso, nuestro componente resulusboard recogerá ambos signos del contexto Se decidirá quién ganó el juego. Se puede pensar en el contexto de reacción como un data store general para la aplicación. Enlazaré en el manual de este curso, un video que hice hace algún tiempo explicando con más detalles cómo funciona el contexto de acto. Pero básicamente puedes imaginarlo así como un lugar general donde podemos poner datos a los que puede acceder cada componente desde una aplicación determinada. Al final de las dos lecciones, esta lección y la siguiente, queremos terminar con un componente de tablero de resultados que se vea así, para que sepa lo que ha elegido el jugador rojo y también sabe lo que ha elegido el jugador azul. Veamos cómo podemos traducir toda esta plática en código. Lo primero que tendré que hacer es crear un contexto para nuestro juego. Este será nombrado exactamente igual que el contexto del juego, el contexto del juego es igual con el contexto de creación. Este contexto de creación es una función que viene de reaccionar. Si solo creamos un contexto, no podemos hacer demasiado con él porque también necesitamos crear un proveedor de contexto Aquí. Voy a crear un proveedor de contexto de juego que se haga en base a este contexto que hicimos aquí. Podemos tomar este proveedor que acabamos de crear y pasarlo a nuestra aplicación y envolver todo el juego en el proveedor de contexto de juego. Podemos leer en cada uno de sus subcomponentes lo que colocamos en el contexto del juego en este punto Si voy a guardar el archivo y refrescar, verás que tenemos algunos problemas lo que pasó aquí. La razón por la que desapareció la LUI es que ahora estamos renderizando el proveedor de contexto de juego Y efectivamente estamos pasando de niños. Estamos pasando el juego, pero aquí dentro en el proveedor real, no estamos rindiendo a esos niños. Entonces tendremos que venir y agregar un nuevo nombre de propiedad. Niños. En realidad, esta es una propiedad predeterminada para cualquier componente react. Vamos a refrescarlo y verás que ahora las cosas se ven como antes. Solo que nuestro juego ahora está envuelto dentro de este proveedor. Una cosa genial que podemos hacer es venir y agregar un estado para el proveedor. Y este estado se transmitirá a todos los componentes de esos proveedores. Veamos cómo podemos hacer esto. Vendré aquí y agregaré proveedor de juegos estado lo que necesitamos contener en nuestro estado. Si lo pensamos, serán los signos del jugador, qué seleccionó el jugador rojo. Además, ¿qué seleccionó el jugador azul? Con esto, ahora puedo venir aquí y pasar estos valores los senos del jugador y la función Seta Se lo pasaré al proveedor. En este punto, las cosas se verán como antes, no tendrán ningún error en la consola, solo que podremos leer estos valores en cualquier subcomponente del proveedor de contexto Veremos en la siguiente lección cómo actualizar estos valores y cómo leerlos. 14. El gancho de useContext(): Al final de la lección anterior, hemos logrado crear y configurar este contexto de juego. Hemos envuelto nuestro juego en este proveedor de contexto de juego. Como recordatorio, déjame mostrarte lo que estamos tratando de hacer aquí. Estamos tratando de leer las señales que fueron recogidas por estas dos cartas de jugador y poner las señales en el contexto real. Después de eso, podemos usar en el componente de tablero de resultados, las señales, para que podamos decidir quién ganó el juego. El objetivo de esta lección es leer estos elementos y también establecerlos cuando son seleccionados. Empecemos por leer el contexto del juego en un componente. Voy a ir en el componente jugador. Aquí, escribiré el siguiente contexto, contexto, contexto de juego. Esto quiere decir que estamos usando otro gancho. Tendremos que importarlo de aquí. Este gancho proporciona acceso a un contexto dado, en nuestro caso, es el único contexto que tenemos, el contexto del juego. Como recordatorio, tenemos estas dos variables de estados establecidas en el contexto, Los valores rojo y azul para cada jugador. Déjame registrar este. Voy a registrar el contexto. Veamos si efectivamente tenemos esos dos elementos ahí mientras vamos a la consola. Y puedes ver aquí que obtenemos de este objeto consologan y lo que devuelve en primer lugar, el jugador firma que hemos configurado y también la función set para esa variable de estado Esto es genial porque podemos ir en la función pick random sign y establecer estos dos valores, el rojo y el azul. Pero antes de ir ahí, podemos mejorar un poco esta línea. En lugar de escribir solo eso, puedo usar la declaración de estructuración. Junto con el contexto del juego, puedo decir que quiero recuperar la función set y los signos del jugador. Dado el hecho de que ahora tenemos este método set player signs, debería venir aquí y llamarlo y voy a decir, bien, establecer señales de jugador. Pero ahora lo he escrito aquí en el si, cuando se dibuja el elemento final. Ahora la pregunta es, ¿qué debo escribir aquí? Y hay que tener en cuenta que aquí estamos tratando de actualizar un elemento. Lo que estamos tratando de hacer aquí es actualizar un objeto en estado de reacción. Porque volvamos de nuevo, vuelta en el proveedor, verás que éste es un objeto real. La forma de hacerlo es usar también un valor previo. Lo que haremos aquí es difundir todos los elementos que ya tenemos en el objeto y simplemente sobrescribir lo que necesitamos, en nuestro caso, anular el color del jugador y el signo aleatorio que se seleccionó Con esto en mente, volvamos ahora la junta de Zulus y veamos qué tenemos en el contexto Voy a ir aquí, voy a añadir estas dos líneas. En primer lugar, estoy extrayendo los signos del jugador del contexto. Después de eso, agrego un nivel más de la estructuración, y este está extrayendo exactamente los valores azul y rojo. Déjame registrar a los dos. Diré azul. Vamos a refrescarnos y ahora comencemos el juego. Verás que partimos de los valores nulos y terminamos con el papel y la roca exactamente lo que tenemos aquí. Esto es bastante genial porque ahora podemos completar este resuelto componente de caja mostrando lo que cada jugador ha dibujado Básicamente, esta parte de aquí. Voy a quitar el consolo porque no lo necesitamos. En primer lugar, debemos verificar si ambos elementos están establecidos, en el caso de que uno de estos elementos azules o rojos no esté establecido, entonces no deberíamos devolver ningún resultado todavía exactamente como lo tenemos en este momento. Después de eso, si ambos elementos están establecidos, podemos escribir esta línea. Déjame refrescarme. Iniciaré el juego inicialmente, no hay resultados. Y después de eso me dirá, bien, este jugador azul ha seleccionado rock, este jugador rojo ha seleccionado rock. Y es exactamente lo que también tenemos aquí. Con esto, hemos cubierto un ejemplo de cómo podemos usar el contexto A para enviar valores de un componente a otro una manera fácil sin tener que pasar demasiadas propiedades. Vamos a la última pieza faltante del rompecabezas y veamos cómo decidiremos al ganador. Entonces, ¿cómo podemos escribir algo así? El ganador es el jugador azul, o el jugador rojo. 15. Decide el ganador de la partida: La pieza final del rompecabezas será determinar quién ganó el juego y mostrar al ganador. Por cierto, en esta lección no vamos a introducir ninguna cosa nueva de reaccionar, es solo puro Javas Determinaremos el ganador en el tablero de resultados. Para ello, voy a crear una nueva función. Este se llamará Win. Nos conseguirá parámetros, los valores rojos y azules para los jugadores. Después de crear esta función, también necesitaremos llamarla A en la x devuelta del componente. Usaremos el siguiente algoritmo. No. Para determinar el ganador, comprobaremos si hay sorteo, si los símbolos son iguales. Después de eso, comprobaremos si gana el rojo. Si no hay empate y además el rojo no ganó, es seguro asumir que gana el jugador azul. Primero comprobemos lo sencillo. Para verificar si tenemos un empate, solo necesitamos verificar si el rojo es igual al azul. Si lo haremos, esta cadena comprobando si el jugador rojo nosotros, es un poco más complicado, se verá así. Por lo que hemos enumerado aquí las tres condiciones principales bajo las cuales ganará el rojo. Estas son las posibles combinaciones que harán que el jugador rojo sea un ganador. Si tenemos alguna de estas condiciones, devolveremos esta cadena. Por último, el más sencillo en el que ni siquiera necesitaremos revisar nada porque ya comprobamos si tenemos uno rojo es este. El jugador azul simplemente devolverá la cadena si esto no es cierto o esto no es cierto. Veamos ahora todo esto en acción. Voy a refrescarme. Voy a empezar el juego, finalmente, al final, me va a mostrar quién ganó el juego y efectivamente es correcto, porque el papel le gana al rock. Vamos a otra ronda. Aquí está lo mismo. Rock bate a las tijeras. Sí, ya está. Así es como escribimos función para verificar el ganador. Por cierto, si crees que esto es un poco demasiado, he añadido en el manual también refactorización de disfunción, parece que así en mi opinión, efectivamente es un poco más compacto, tiene menos código Pero creo que es un poco más difícil de leer. No sé, para lo que sea que funcione, puedes escoger y va a estar bien. 16. PROYECTO DE CLASE: Ahora que hemos aprendido todas estas cosas nuevas, es momento de ponerlas en acción. Queremos agregar algunas características nuevas a nuestro juego. En primer lugar, queremos tener un panel de seguimiento de puntuación aquí. Y también cada jugador debe tener su propio nombre. Y estos nombres son editables. Veamos la versión final del hogar Trabajar en acción. Presionaré el botón Star Game después de que haya corrido un juego, verás que ahora tenemos un contador aquí. El azul tiene una victoria y el rojo tiene cero victorias. Y también podemos restablecer el marcador de nuevo a cero. Y el hecho de que hayamos agregado estos nombres, ahora también puedo venir y editar y decir, bien, quiero que mi nuevo nombre sea Daniel y esto se actualizará aquí. Y en vez de CPU, quiero jugar, digamos contra IA y también el nombre se actualizará ahí. Como regla general, por favor primero intenta completar todo esto por tu cuenta, y si no funciona, mira la siguiente sesión de este video. Te voy a compartir algunos consejos sobre cómo construir estas nuevas características al final si quieres, también puedes verificar el final de la tarea donde puedes ver el código que nos permite construir todo esto. A partir de este momento, compartiré con ustedes algunos consejos sobre cómo construir estas nuevas características. Así que ten en cuenta que a partir de este momento, tenemos algunos spoilers aquí Solo ve a esta sección solo si inicialmente has intentado hacer el juego por tu cuenta. En primer lugar, comenzaré con esta característica agregando nombres a los jugadores. Creo que esta, es un poco más fácil de implementar. Casi todos los cambios deben hacerse aquí en el componente jugador. Lo primero que voy a hacer aquí es agregar un parámetro de jugador. Este parámetro vendrá directamente del juego. Después de eso, con este parámetro player, haré una variable de estado del nombre del jugador. Cuando hagamos clic en ese nombre, usaré esta Ventana. El prompt de ventana es la característica Javaski, no una reacción, que nos permite construir ventanas como esta, donde puedes ingresar el nuevo nombre, las cosas que has visto Después de haber leído el nuevo valor de Window prompt, debemos actualizar el estado. Y con esto deberíamos completar la nueva función. Por cierto, también hay un bono aquí donde podemos intentar extraer todo esto en un componente de nombre de jugador solo incluyendo al jugador, este componente de nombre de jugador. Pasando ahora a la segunda característica, la parte del marcador. Esta parte de aquí mismo. Todo debería entrar aquí en estos tableros. Aquí debe ir el marcador. Deberíamos agregar como diseño un botón. Esto puede ser un título o algo así, y también un párrafo con este texto. Si bien agregamos este, vamos a complicar un poco el estado del componente de Resusborg Lo que tendremos que venir y hacer aquí es agregar múltiples valores de estado para score bred, score blue, y también un ganador actual o también podemos agregar un objeto centralizado, plegamos del estado en un solo objeto. Otra cosa que tendremos que hacer es usar el gancho de efecto de uso para reemplazar este. Tenemos aquí al ganador del pick, dado que cuando escojamos al ganador, también actualizaremos la puntuación y la puntuación, también es una variable de estado. Terminaremos en un bucle infinito de Re render. Básicamente, tendremos que quitar este de aquí y colocarlo en un gancho de efecto de uso que monitoreará cuándo hayan aparecido nuevos valores para azul y rojo. Bien, una última cosa que debes tener en cuenta es que cuando actualices la puntuación, siempre debes actualizar la puntuación con base en el valor anterior. Deberíamos tener algo así en el estado anterior y anterior más uno. Por último, puedes extraer todo lo que tenemos aquí en un componente de marcador después haber probado por tu cuenta construir estas características, también echa un vistazo a la solución y mira cómo le fue, compara una con la otra Y además no vuelvas a caer solo en estas características. Deja que tu imaginación corra libre e intenta agregar todo tipo de funciones aquí. Pero algo muy importante es disfrutar del proceso. Diviértete y feliz codificando. 17. CONCLUSIÓN: Hemos logrado mucho con nuestro ejemplo partiendo de cero. Hemos construido un mini juego completo de reacción funcional. Si bien lo hemos hecho, también hemos visto cosas como cómo arrancar un proyecto de reacción desde cero. Pero también cómo podemos llegar y definir componentes y apuntalamientos. También hemos visto cómo usar el estado, el estado de reacción para actualizar los componentes UY Pero también muy importante cómo podemos actualizar un estado con base en el valor anterior del estado. futuro, hemos visto cómo usar ambos estilos CSS básicos, pero cómo usar también estilos en línea para que nuestras aplicaciones se vean geniales. También hemos visto cómo usar el gancho de efecto de uso para monitorear los valores y activar actualizaciones. También una cosa muy importante es cómo usar la función clean up del efecto use para evitar errores como complemento de las variables de estado. Hemos visto cómo usar la F para mantener valores persistentes entre los renders de Re y también cómo configurar cosas como los proveedores de contexto para compartir datos entre componentes y mucho más. Espero que este curso te haya sido encontrado y útil y hayas aprendido cosas nuevas. Enhorabuena por completar el curso y gracias por tu tiempo. Recuerda que también puedes consultar el manual principal de este curso. Y si tienes dudas, no dudes en escribirme un correo electrónico a Daniel Gongcrafto avanzando Recuerda de vez en cuando que también puedes consultar mi sitio web donde regularmente publico nuevos artículos con el fin de mejorar tu oficio de codificación web Te deseo todo lo mejor y sigue codificando amigos. Adiós.