Primeros pasos con React JS

1. Introducción: Hola ahí. Mi nombre es Daniel. Soy desarrollador aquí en Skillshare y me gustaría darles la bienvenida a esto iniciando con los códigos React. El objetivo de este curso es darte los conceptos e ideas necesarios para poder empezar a usar ReactJS en tus aplicaciones web. El curso está dividido en dos secciones. El parte fundamental, donde discutiremos los bloques de construcción de React, cosas como componentes React, propiedades, state, o cómo usar CSS para darle estilo a tus componentes. Todas las lecciones de esta sección, te mostraré modular y al grano para que puedas utilizarlas más adelante como referencias. También, está la parte de ejemplos. Aquí, construiremos ejemplos más complejos que desarrollé a través de múltiples lecciones. Ya veremos cómo se combinan los conceptos básicos de React para construir una aplicación completa. Te animo a seguir y codificar al lado. El curso viene con más de 15 conceptos y cada lección tiene su proyecto de inicio y también una muestra final de cómo deberían verse esos archivos al final de la lección. Además, antes de iniciar este curso, asegúrate de tener instalada la utilidad de la aplicación Create React. Los enlaces se proporcionan en la descripción de este curso. Por favor, ten en cuenta que si bien este es un curso dedicado a presentarte a ReactJS, debes tener una comprensión básica de JavaScript, HTML, y CSS en general. Empecemos y veamos cómo React puede hacer tu vida más fácil e impulsar tu carrera. 2. Tu primer componente react: El plantilla de inicio de nuestro primer ejercicio está casi vacío. Tenemos este archivo js index que solo contiene un elemento y también un index.html con un solo cuerpo vacío. Ten en cuenta que para poder iniciar nuestro ejercicio, he descargado nuestra plantilla de inicio, lo comprimo, y después de ejecutar npm install y npm [inaudible], deberíamos tener esta alerta apareciendo cada vez que guardemos un archivo. El alcance de esta lección es hacer que nuestro primer componente reaccione. Para esto, primero necesitaré agregar en el index.js, la declaración de importación para reaccionar. Existen múltiples formas de crear componentes de reacción. El enfoque más clásico es mediante el uso de clases de JavaScript. Para esto, primero crearé una clase llamada primer componente. Este primer componente extenderá React.Component. El [inaudible] cacao para el componente reaccionar es la función render. React expandirá la etiqueta correspondiente a ese componente a lo que sea que se devuelva de la función de render. En nuestro caso, si queremos que nuestro primer componente solo sea un h1, aquí dentro, diré que quiero devolver h1 con el texto, hola mundo. Ahora si guardamos y la página se actualiza, todavía obtendremos sólo esta alerta como salida. Esto se debe a que no dijimos reaccionar en qué parte del HTML colocar este componente. Primero, movamos esta alerta y después, entraré dentro del index.html aquí, crearé un div con el id de root. Este nuevo div creado servirá como el contenedor para nuestro componente. De vuelta en el índice js agregaré una nueva declaración de impulso. Esta vez para un ReactDom. ReactDom también tiene una función de render pero esta toma un componente de reacción específico y lo adjunta a una nota HTML. Podemos decir ReactDom.render y como primer parámetro, daremos nuestro primer componente y como segundo parámetro, utilizaríamos el document.getElementById y diremos que queremos adjuntar este primer componente a el ID de raíz. Ahora bien, si guardo, podemos ver en la pantalla nuestro primer componente de reacción. A modo de conclusión, la idea es que cualquier componente reaccionar tiene esta función de render y reaccionar expandirá por defecto la etiqueta de reacción real a lo que se devuelve de esta función aleatoria. 3. Componentes anidados: El componente que tenemos en la pantalla, es uno muy sencillo. Simplemente tiene un nodo HTML h1 con algún contenido. Pero cuando estamos en esa función, también podemos devolver estructuras HTML más complejas. Por ejemplo, aquí dentro puedo agregar un enlace. Si ahorramos, podemos ver que las cosas funcionan como antes. ¿ Y si nuestro componente necesita resultar dirección aún más compleja? Digamos que después de este h1, también queremos tener una línea horizontal. Si ahorramos, veremos que vamos a obtener un error. Esto está sucediendo porque en condiciones normales, la función de render simplemente debe devolver un solo elemento raíz. En las nuevas innovaciones, hay solucionaciones para este mundo. Pero la solución más fácil en nuestro caso, será solo agregar aquí cerrando div que servirá como el elemento raíz. Si guardamos, podemos ver que ahora nuestro componente también tiene un h1, un enlace, pero también esta línea horizontal que agregamos antes. Pero las cosas pueden ponerse aún más interesantes. ¿ Y si necesitamos otro componente que esté hecho de dos componentes de este tipo? Al final, una aplicación React es una colección de elementos React que trabajan en conjunto para lograr un objetivo común. Agregaremos un nuevo componente, y este componente se llamará App. Para construirlo, solo copiaré y pegaré este primer componente, cambiaré su nombre a App, y a partir de ese final de función inicialmente, solo devolveremos este div vacío. Ahora en ReactDom, si reemplazamos eso por componente a configurar en App y guardar, solo conseguiremos la pantalla vacía. Esto está sucediendo, por supuesto, porque a partir de este final de la función, simplemente devolveremos el div vacío. Pero podemos venir aquí y de la declaración de retorno también agregar dos componentes de tipo primer componente. Si ahorramos, podemos ver en la pantalla que nuestra aplicación acaba de llegar a ser más compleja. Es posible ir tan complejo como queramos con este tipo de estructuras. Veremos en las lecciones futuras cómo podemos usar cosas como propiedades, contexto o eventos para enviar datos de un componente a otro. 4. JSX e interpolación: Echemos un vistazo a lo que tenemos en la pantalla. Tenemos una clase JavaScript y también algunos otros objetos JavaScript que se importan y utilizan. Puede que se pregunte, aunque estemos en un archivo JavaScript, ¿cómo eso podemos usar estructuras HTML como esta? Bueno, esto se debe a que sobre la sintaxis llamada JSX que proviene de JavaScript XML y fue desarrollada por la gente en Facebook para ser utilizada con React. El material cool es que podemos usar este tipo de mezcla entre HTML y JavaScript incluso a un nivel más profundo. Este método de render es una función JavaScript al final. Entonces, al usar JSX, puedo interpolar alguna variable JavaScript en el HTML real. Esto significa que puedo declarar aquí una variable llamada x con un valor de 10, y dentro de la declaración return, agregar un nuevo párrafo que diga algo así como, el valor de x es, y usando llaves, Simplemente ingresaré aquí el nombre de la variable, en nuestro caso x, y si guardo, veremos en la pantalla que tenemos este nuevo párrafo que está hecho de algún texto HTML estático, pero también ofrecen valor que viene directamente de JavaScript, este 10, aún más así podemos agregar expresiones Ruby o JavaScript aquí. Algo así como el doble de x es, y aquí dentro de llaves puedo agregar cualquier cosa que quiera siempre y cuando sea una expresión de JavaScript y diga algo x multiplicado por 2, y vamos a obtener el doble de x es 20, y esto es no restringido a números. Por ejemplo, puedo usar objetos JavaScript o alguna otra cosa. Digamos que vamos a definir aquí una nueva variable llamada my-string con el valor de React es cool, y después de eso ir en la declaración de retorno y aquí añadimos un nuevo párrafo que diga que los primeros cinco caracteres son y mediante el uso de llaves, Tomaré la my-string y diré sub-cadena de cero y cinco y esto funcionará como podemos ver en pantalla los primeros cinco caracteres son React. Es así como podemos usar JSX y la interpolación con el fin de que nuestros componentes React muestren algunos datos complejos. 5. Propiedades de componentes de React: Para poder explicar cuáles son las propiedades de reacción, comencemos desde el ejemplo actual. Contamos con nuestra app React que muestra dos párrafos. Uno con el contenido, “Hola, mi nombre es Bob”, y el otro con el contenido, “Hola, mi nombre es Joe”. Dado que el contenido es muy similar, tendrá perfecto sentido eliminar estas redundancia y construir un componente de reacción que muestre este texto. Algo así como, el componente say hi, a partir de su método de render, simplemente devolveré un párrafo vacío con el contenido, “Hola, mi nombre es”. En teoría, deberíamos poder reemplazar estos dos elementos por algo así como, digamos hola componente para el primer párrafo y el segundo componente para el segundo párrafo. Pero aquí hay un problema, y ese es el hecho de que para el primer párrafo, el nombre es Bob, y para el segundo, el nombre es Joe. Las propiedades de reacción son exactamente lo que HTML [inaudible]. Por ejemplo, si tomo una nota de enlace aquí, con algún texto. Tengo este atributo href que puedo apuntar este enlace a algo como google.com. Puedo venir aquí y decir, vale, el nombre del primer componente es igual a Bob, y el nombre del segundo componente es igual a Joe. Tenemos esto en su lugar dentro del actual, diga hola componente en el método render, crearé una nueva constante llamada nombre, y este nombre será igual a esto.props.name. Al tener este nombre extraído, ahora puedo reemplazar esto usando la interpolación, el nombre de la constante que acabo de crear. Si ahorramos ahora, podemos ver que para el primer componente que tenemos, “Hola, mi nombre es Bob”, el valor que hemos enviado aquí, y para el segundo, tenemos, “Hola, mi nombre es Joe”. Cualquier cosa que se almacene en estas referencias de propiedad es una constante. No podemos modificar el valor de una propiedad. Por ejemplo, si escribo aquí esto.props.name es igual a Daniel, y si guardamos, obtendremos el siguiente error diciendo que no se nos puede asignar un nuevo valor a una propiedad. Tenga en cuenta que las propiedades son constantes. No obstante, lo que podemos hacer es usar la destrucción de JavaScript, con el fin de escribir menos código cuando extraemos nuestras propiedades. Al tener estas cosas en su lugar, ahora puedo eliminar los párrafos estáticos. Se puede preguntar si en una aplicación de reaccionar puedo decir que hay un parámetro, algo más además de una cadena, algo así como, digamos la edad de los que dice hola, y la respuesta es por supuesto, sí. Puedo usar números, booleanos, objetos, o incluso funciones como parámetros. La única diferencia es que para cosas que no son cadenas, necesitaré usar llaves para poder enviar un valor. Por ejemplo, si aquí quiero agregar edad igual, y diré en llaves, 25. Si voy a enviar este 25 como una cadena, dentro de mi componente, esto se recogerá también como una cadena. Es aquí donde usaremos llaves para enviar un número. En el componente say hi, esta estructura, también esta propiedad de edad y aquí agregan algo, “Mi edad es” y dentro rizado frenan la edad. Si ahorramos ahora, veremos que para el primer componente, nos diría que, “Mi edad es 25", y para el segundo, no se imprimirá nada ya que no enviamos ninguna edad propiedad. 6. Eventos básicos de UI: En esta lección, vamos a echar un vistazo a cómo funcionan los eventos de usuario de React. Nuestros componentes no valen demasiado si no saben cómo manejar los eventos de los usuarios. A lo mejor el evento más usado es el click básico. Digamos que queremos hacer este botón para mostrarnos una alerta al hacer clic. Tendré aquí una función llamada show message. Esta función show message tendrá una alerta diciendo algo así como “Hola ahí”. React sabe cómo manejar eventos mediante el uso de propiedades de función. Hay algunas propiedades incorporadas que saben manejar eventos básicos, como OnClick. Diré que para mi evento OnClick quiero llamar a esta función que acabo de escribir. Diré esto, ese mensaje de mostrar. Después de guardar, ahora, si presiono este botón, obtendremos la alerta que acabamos de poner en la función show message y tenemos más eventos. Por ejemplo, si queremos interceptar un evento de entrada de mouse, sólo voy a agregar aquí onMouseEnter. Voy a señalar este evento a esto que onMouseEnter y por supuesto también tendré que crear esta función. Por ahora, aquí sólo voy a agregar un simple mensaje de registro de consola diciendo algo como “esto está en el ratón enter”. Ahora si guardamos y abrimos la consola, veremos que todo el tiempo que estemos colocando el botón logrará imprimir este mensaje en la consola. En la documentación de React, hay una lista completa de los eventos de UI que he soportado. Pondré este enlace en la descripción de la lección. Tenemos cosas como hacer doble clic, mouse over, mouse out, eventos de teclado, eventos de enfoque, y mucho más. 7. Boca de alcance de los eventos: Quizás el escollo más común a la hora de seleccionar utilizar los componentes del engranaje es el encuadernamiento del alcance. ¿ Cuál es este alcance vinculante? Digamos que tenemos la situación actual. Un botón que tiene manejador OnClick y onMouseEnter. Posteriormente en nuestra aplicación, tenemos la necesidad de contar con múltiples de estos botones. En este caso, quiero crear una nueva clase llamada MyButton. Este MyButton simplemente devolverá un botón que tiene estos manejadores OnClick y OnMouse adjuntos a él. Dentro de la aplicación, eliminaré los manejadores y en lugar del botón HTML estándar, solo usaré esta clase MyButton que acabo de crear antes. Según lo dicho, queremos tener dos de estos botones en nuestra aplicación. Ahora la parte interesante, será, poder personalizar estos dos conjuntos de botones, ambos ahora están mostrando exactamente el mismo mensaje. Podemos hacer eso usando una propiedad. Diré aquí que para el primer botón, el mensaje es igual a algún mensaje. Para el segundo botón, el mensaje es igual a algún otro mensaje. Al tener estas propiedades, puedo venir aquí ahora en la alerta y usar en lugar del mensaje estándar, algo así como est.props.message. No obstante al hacer clic en el botón, veremos que vamos a obtener este error, “No se puede leer 'props' en indefinido”. Esto se debe al problema que mencionamos anteriormente sobre esta combinación. La idea es que cuando pasamos el manejador, estamos en un contexto diferente y React no sabe nada de la clase de carga. Para solucionar esto, tenemos dos opciones. La primera opción, estará aquí para vincular la función ShowMessage al este elemento. Si guardamos, podemos ver ahora que si hago clic, obtenemos el mensaje de show, y si escojo el segundo, obtendré algún otro mensaje. Pero de alguna manera esto es un poco engorroso para agregar siempre a un manejador que se unen a esto. Podemos utilizar en nuestra ventaja. El hecho de que las funciones de flecha para ECMAScript 6 estén directamente vinculadas al ámbito principal. Por esto, lo que puedo hacer es tomar este ShowMessage y convertirlo en una función de flecha. Ahora puedo quitar fácilmente el bind y si hago clic, las cosas funcionarán como se esperaba. Por regla general, siempre que estemos usando ECMAScript 6 clases con el fin de crear sus componentes siempre use funciones de flecha con el fin de crear manejadores de eventos. 8. Estado de componentes: El estado React nos está permitiendo gestionar el cambio de todos los elementos de React Components y actualizar los visuales en consecuencia. Para introducir este concepto de estado en el React Components, simulemos el comportamiento de los usuarios que inician sesión en una aplicación. En un principio, tenemos estos dos botones. Hemos hecho clic en patos de tierra adheridos a ellos. Si hago clic en este botón, obtendremos el siguiente mensaje de registro de consola y si hago clic en éste, obtendremos otro mensaje de registro de consola. Esto está sucediendo porque aquí tengo OnClick configurado para usuario conectado y conectado admin. Dicho esto, lo que quiero pasar en la aplicación final es también tener aquí mostrado el tipo de usuario que actualmente está conectado. Por ejemplo, si hago clic en “Iniciar sesión como administrador” aquí, tendrá que guiar el UserType es admin y si hago clic en “Iniciar sesión como usuario estándar” aquí dentro, tendrá que guiar el UserType es usuario. Para poder utilizar el estado, primero tenemos que declararlo. Al usar Enigma saltar seis clases, podemos declarar el estado en espera. El modo menos verbal es mediante el uso de atributos de clase. En algún lugar aquí diré que el estado es igual, y el estado de un Componente React es siempre un objeto que contiene las variables de estado. En nuestro ejemplo, solo necesitamos una de estas variables y se llamará UserType. Inicialmente, tendrá un valor de una cadena none. La segunda forma de declarar el estado está dentro del constructor de clase y la sintaxis se ve algo así. Al final, el resultado es el mismo solo que esta función constructor tarda un poco más de tiempo en escribir. Lo eliminaré y usaré la variación inicial. Lo que puedo hacer aquí después de que se declare el estado es que puedo entrar aquí y escribir esto.state y diré que quiero mostrar el UserType. A pesar de que en el momento que ahorremos veremos que el resultado es exactamente el mismo. Lo que podemos hacer teniendo este mecanismo de estado establecido es que aquí, puedo reemplazar el mensaje de registro de la consola por un método llamado set state y this.setState es siempre el método que queremos usar con this.setState es siempre el método el fin de modificar el estado en un Reaccionar Componente. Lo que haré es darle un objeto con las cosas que quiero cambiar a ese estado. Aquí, diré que el UserType, quiero que se establezca a usuario. Para el segundo mensaje de registro de consola tendré this.setState y diré que el UserType necesita ser cambiado a admin. Veamos qué pasa ahora después de que guarde. Si voy aquí y presiono “Iniciar sesión como administrador”, tendré el cambio de texto en el tipo de usuario es admin y aquí, si presiono “Iniciar sesión como usuario estándar” tendré el tipo de usuario es usuario. Lo que logré lograr es tener ese estado de una actualización de componente, pero también los visuales de ese componente para cambiarse de manera acorde. Algunas cosas que me gustaría señalar. En primer lugar, utilice siempre el estado establecido para cambiar el estado. Si simplemente haríamos algo como este.state.userType igual algo. Cuando guarde, en primer lugar, veremos que tendremos una advertencia en nuestra consola, pero también si presionamos el botón de usuario, no ocurrirá ningún cambio en nuestra pantalla. Esto está sucediendo porque a pesar de que el estado es cambio, no se llamó al método render. Si queremos que nuestra UI también se actualice, siempre aquí dentro, tengan algo como este.SetState y lo que queramos cambiar. La segunda observación será que siempre tenemos que inicializar el estado antes de usarlo. Por ejemplo, si eliminaré aquí la inicialización de nuestro estado si guardamos, veremos que obtenemos un cuadro de error diciendo que no podemos usar algo como UserType hasta que no se inicialice ese estado. Por último, el tercero, this.setState fusiona este parámetro con el estado actual, no sustituye al estado actual. Básicamente lo que eso significa es que aquí, en el estado inicial, si voy a tener una nueva variable de estado de x establecida en cinco, cuando llamaré en LoginUser o LoginAdmin, este estado conjunto y daré un nuevo valor para el UserType. Sólo se cambiará este tipo de usuario. El x inicial se fijará en cinco y no se le hará ningún cambio y luego lo tenemos. Estos son los primeros pasos, pero también los primeros trampas que encontrarás al usar React SetState. 9. Estilos: El alcance de esta lección es ver cómo podemos usar CSS con el fin de darle estilo a nuestros componentes React. Al final de las lecciones, queremos poder construir componentes que se vean como cuadrados y que podamos especificar qué color de fondo debe ser ese cuadrado. Como configuración inicial, ya tengo aquí el cuadrado de clase, un componente que solo devuelve un div y nos consigue una propiedad de texto, y ese texto se muestra en la pantalla. El primero que queremos hacer, es adjuntar un archivo CSS a este index.js. Para esto, iré aquí y crearé un nuevo archivo. Este archivo se guardará como index.css. El material interesante en React, es el hecho de que podemos importar para cada archivo algunos archivos CSS que necesitamos ahí dentro. Aquí, puedo decir que quiero importar, y desde la carpeta actual, importar, index.css. Tan sólo para ver que todo está funcionando, iré aquí y tomaré el atributo HTML. Diré que quiero que se le adjunte un borde gris de píxeles blancos. Ahora si decimos, podemos ver que básicamente el índice js y el índice css ahora están vinculados, y los estilos del CSS se aplican en mi archivo index.js. Conociendo esto y teniendo como objetivo final, componentes como este, volveré en el índice CSS y aquí crearé una clase llamada cuadrada. Empezaré a enumerar las propiedades CSS que necesitaré para que nuestros divs se vean como las de la imagen. En primer lugar, necesitaré agregar un borde de negro de un píxel. Después de eso, diré que la altura de línea para nuestro texto es de 100 píxeles. Además, el ancho de nuestros componentes son de 100 píxeles. También necesitaré text-align, set to center. Por último, necesitaremos un poco de margen de 10 píxeles. Esta plaza de clase nos dará el diseño básico para nuestros componentes. Ahora, si vamos en el índice CSS, lo que podemos hacer es venir aquí, y decir ClassName es igual. Diré que quiero que este div tenga una clase de plaza. Si guardamos, veremos que ahora nuestros divs también obtuvieron las propiedades CSS que se enumeran en esta clase. Algo que me gustaría señalar, es el hecho de que aquí he usado ClassName para asignar una clase CSS a un atributo HTML. Esto se debe a que en el mundo JS ya tenemos la clase como palabra clave. En circunstancias normales, utilizarías un ClassName para asignar clases CSS a etiquetas HTML. Aún así nuestro ejemplo no está completo. Sería bueno poder decir, que este es un cuadrado rojo y éste es uno amarillo. Para esto, usaremos los instyles de React. En un componente React, es posible ir y establecer un atributo de estilo que recibe como parámetro, un objeto que contiene este instyles de ese componente. Ahora diré aquí algo así como, el estilo es igual. Digamos que el color inicialmente es rojo. Si guardamos y volvemos a nuestra aplicación, ahora verás que ambos cuadrados ahora tienen un texto establecido en rojo. Pero lo interesante es que podemos mapear estos valores al valor de una propiedad. Puedo venir aquí y decir que el color es igual al rojo. Para éste, el color es igual al amarillo. Por último, podemos cambiar el valor inicial del rojo aquí a esto.properties, y diré el color. Si guardamos, veremos que para el primer cuadrado, el color es rojo. Para el final, el color, es amarillo. Para configurarlo como color de fondo, solo tendré aquí para escribir, este es un color de fondo, y CamelCase el color funcionó. Si ahorramos, finalmente veremos nuestra salida deseada. A modo de conclusión, ten en cuenta que podemos adjuntar archivos CSS a nuestros componentes React, y somos capaces de darle estilo a estos componentes o mediante el uso del ClassName y adjuntarle una clase CSS específica. O mediante el uso de estilos en línea con este atributo de estilo con el fin de agregar más flexibilidad a nuestro estilo. 10. Cómo utilizar el objeto de los niños de react: Hola allá y bienvenidos. Hay bastante altas posibilidades de que antes hayas oído hablar de estos datos para los niños. En su esencia, las sondas que los niños se utilizan cuando se tiene un componente de reacción como esta galería. Se desea utilizar dentro de él el contenido HTML vía declaración de componente recibe. Por ahora, tenemos una galería de imágenes vacía. Si quiero agregar algún contenido aquí, digamos esta sencilla etiqueta de párrafo y este párrafo a renderizar en nuestro componente de galería. Yo puedo ir y escribir dentro de los tirantes rizados, esto que apuntala a sus hijos y hecho. Lo tenemos funcionando. Por supuesto, reemplazamos este texto, nos olvidamos de la imagen y tenemos a nuestra gente gato en la galería. Pero React también sabe mostrar múltiples elementos secundarios, no solo uno. Nadie puede impedir que agreguemos una imagen más porque nunca se pueden tener suficientes fotos. Si refrescamos, tenemos un nuevo cuadro a bordo. Si echas un vistazo a los docs React js, verás que en realidad existe este objeto infantil que nos da acceso a un conjunto de métodos. Puede ser una buena idea revisar más adelante todos estos métodos vienen aquí. Por ejemplo, si desea mostrar cuántos elementos secundarios tiene su componente, puede utilizar el método de recuento. Para no tener que escribir todo el tiempo reaccionar que los niños, voy a añadir el objeto hijos como una importación separada. Ahora voy a crear un nuevo párrafo con algún contenido y aquí usar niños.contar y pasarlo, ¿qué queremos contar? Después de la actualización, podemos ver ahora que tenemos en pantalla también el número de los niños. Si queremos forzar a nuestro componente de galería sólo para recibir un niño, podemos usar niños que sólo, y así sucesivamente. Pero tal vez el método de niños más útil es el mapa que lo usa, podemos pasar por todos los niños y mapearlos a nuestro elemento que regresa. En nuestro caso, podríamos decir algo así como niños, ese mapa más esta función anónima. Tomará un niño a la vez y le devolverá lo que debe mostrarse. Por ahora, la salida es exactamente la misma pero lo cool es que ahora podemos controlar estos elementos. Por ejemplo, si queremos que nuestra biblioteca permita sólo imágenes como niños, podemos decir aquí, si elemento ese tipo, no es igual a imagen, entonces lanzar un nuevo error. Por ahora, todo es igual que antes pero si agrego en la galería, digamos h1, bueno, vamos a obtener este error, tendremos que eliminar esto por ahora solo para tener todo el código funcionando de nuevo. Otra cosa para la que podemos usar mapa es manipular los elementos compartidos no sólo para restringirlos. Por ejemplo, si una imagen no tiene un atributo title, nos gustaría agregar uno predeterminado. Este parámetro de elemento es de tipo vía componente. Podemos decir aquí algo como si no hay elemento que apoye ese título, entonces elemento que apuntala ese título equivale sólo al gato. Ya conseguiremos este error. Bueno, tal vez recuerden que la prop ha terminado vía componente de sólo lectura. Afortunadamente, podemos caminar por esto usando el elemento clon. Asignaremos este elemento a un clon de sí mismo. Pero en un elemento clon reaccionar, también podemos pasar en un segundo parámetro para configurar nuevas propiedades. En nuestro caso, pondré el título para que sea solo un gato, y deberíamos estar bien para ir. Cuando voy a guardar, veremos que cuando inspeccionemos este elemento, también obtenemos este look de API de título predeterminado. Espero que hayan disfrutado de este show a los tutoriales de la app. Si tienes preguntas, siéntete libre de hacerlas en los comentarios que aparecen a continuación. Yo soy Daniel y nos vemos entonces la próxima vez. Salud. 11. Crea un juego con React parte 1: Hola y bienvenidos. Mi nombre es Daniel y seré tu instructor para este ejemplo práctico de VRGS. Nuestro alcance para este tutorial será construir estos muy sencillos juego de rock, papel, tijeras. En este juego, tenemos dos jugadores, el rojo y el azul. Cuando coloquemos el botón “Ejecutar juego”, nuestro juego mostrará una animación aleatoria y seleccionará aleatoriamente uno de los elementos totalmente disponibles. En base a lo que se seleccione para cada jugador, nuestra aplicación decidirá cuál de los jugadores es el ganador. Pongámonos a trabajar. En la plantilla de inicio para este proyecto, trabajo en la instalación de NPM. Si no lo has hecho antes, puedes ver en los enlaces de este episodio, una guía sobre cómo configurar tu entorno. Después de que la instalación del NPM esté completa, podemos escribir NPM start y deberíamos tener nuestra aplicación en funcionamiento. Echemos un vistazo a lo que actualmente tenemos en el código inicial. En primer lugar, el archivo index.js, que sólo renderiza nuestra aplicación. Al lado de ella, tenemos esta app, CSS, que contiene los estilos para nuestra aplicación. Ahora, dado que este es un curso de ReactJS, no discutiremos demasiados detalles sobre cómo se construyeron los estilos CSS. Sólo cuando sea necesario, nos ocuparemos de las partes CSS que son importantes para nuestra aplicación. El parte más importante es esta app que archivo JS, que servirá como punto de entrada para nuestra aplicación. Por ahora, solo renderiza un simple componente React que tiene solo un div vacío. El primero que vamos a abordar es la creación de estas cartas de dos jugadores. Si pensamos un poco en ellos, son componentes apátridas, que dependen de dos propiedades, el color del jugador y el símbolo. Con esto en mente, volveré al código y crearé un nuevo componente sin estado. Este componente apátrida se nombrará tarjeta de jugador. Inicialmente, nuestra carta de jugador solo será un div vacío con un nombre de clase establecido en player-card. Este nombre de clase ya está definido en la app CSS y muestra el renderizado básico de nuestras tarjetas. Ahora, con este componente sin estado creado, puedo volver al método de render, y aquí dentro agregar dos nuevos componentes de tipo tarjeta de jugador. Ahora, después de guardar y la página se actualiza, podemos ver en el lado derecho los dos nuevos componentes creados. Como dijimos antes, nuestras cartas de jugador dependen de dos propiedades. Dependen del color y también del símbolo. Con las nuevas propiedades declaradas, estableceré el color para la primera carta en rojo y su símbolo en papel. Para el segundo, pondré el color en azul y el símbolo en rock. Para asegurarme de que todo esté bien, volveré al componente de la tarjeta del jugador. Aquí, mostraré la propiedad del símbolo. Después de guardar, podemos ver ahora que nuestros componentes también tienen los símbolos dados. Quizás te estés preguntando por qué el segundo componente tiene sus textos escritos boca abajo. Bueno, esto es porque dentro del archivo CSS de la app, tenemos una regla especial que discutiremos al final del próximo episodio. Si volvemos a nuestro ejemplo final, cada una de estas tarjetas debe colorearse en el color correspondiente. Esta es una gran oportunidad para utilizar los estilos en línea de React. Para esto, iré a crear un nuevo objeto llamado estilo, y dentro de él, estableceré el fondo para que sea igual a lo que recibimos del parámetro de color. Por último, en la declaración de retorno del método render, asignaré el estilo del div para que sea igual al objeto de estilo que acabamos de crear. Ahora, después de guardar, podemos ver que tenemos una carta de jugador de color rojo y la otra de color azul. 12. Crea un juego con React parte 2: Hola, y bienvenidos de nuevo. En la primera parte, agregamos los elementos básicos para nuestro juego. Hagamos ahora nuestro juego para seleccionar un símbolo aleatorio. Para lograr esto, primero tendremos que decirle al juego, ¿cuáles son todos los símbolos disponibles? Iré en la app principal y añadiré un constructor por defecto que por ahora solo hace una súper bobina con las propiedades por defecto. El siguiente paso será agregar un campo de símbolos bajo esta referencia. Señalará una matriz que contiene todos los símbolos disponibles libres, roca, papel y tijeras. También necesitaremos un botón para iniciar el juego. Iré en el render principal cualquiera aquí, agrega este botón con el texto Ejecutar juego. También voy a añadir un método de juego de ejecución que inicialmente bien sólo tienen un simple registro de consola con el texto iniciar el juego. Este método se asignará al evento on click del botón. Después de guardar, si abro la consola, veremos que cada vez que presionamos el botón, tenemos este mensaje apareciendo en la consola. Tener el conjunto en su lugar. El siguiente paso lógico será enseñar a nuestro juego cómo hacer elemento aleatorio en el click inferior. Básicamente, necesitamos generar un índice aleatorio y sacar el elemento correspondiente de esta matriz. En primer lugar, crearé el índice aleatorio y le daré un nombre de índice. Para generar el número aleatorio, usaré Math.Random, y lo multiplicaremos por el número máximo de símbolos en nuestro caso, tres. También usaremos Math.Floor para asegurarnos de que no conseguiremos números como 2.5 o 1.3 ni nada que no sea un número entero. Con este índice aleatorio construido, sólo podemos ir ahora y hacer un registro de consola de estos, esos símbolos y de índice. Ahora bien, si actualizamos la página, cuando presionamos el botón, obtendrá un elemento aleatorio después de eso, otro, otro, y así sucesivamente. Vamos a poner estos símbolos aleatorios en la vista ahora. Tendremos que reemplazar este valor estático y también este, tenemos algo así como el elemento aleatorio generado aquí. Este es un ejemplo perfecto para usar el estado de los componentes. En primer lugar, voy a reemplazar esto por estos que estados PlayerRed, y también por éste, voy a escribir estos ese estado, PlayerBlue. Estos dos valores de estado se establecerán en el método de juego Run. Dado que tenemos que lidiar con propiedades estatales, tendremos que usar esto que setState y pasarle un objeto. Dentro de este objeto, diré que el PlayerRed es igual a estos que símbolos, y como índice, pegaré toda esta fórmula. Vamos a reutilizar exactamente la misma fórmula, pero esta vez para el PlayerBlue. Lo borraremos y lo agregaremos código y después de guardar, veremos que obtenemos un error. Esto se debe a que aquí, estamos tratando de acceder a algo del estado y aún no hemos creado ese estado. Esto es muy fácil de arreglar. Entraré dentro del constructor y una guía que este ese ese estado equivale a un objeto vacío y con este conjunto en su lugar, volveré a la ventana del juego y ahora veremos que cada vez que presionemos el botón Ejecutar, obtenemos un símbolo aleatorio que se muestra en nuestra pantalla. Vamos a echar otro vistazo a la versión final de nuestro juego. Aquí, tenemos estos bonitos iconos para los símbolos y no el texto estático. Volviendo al código en la carpeta pública, tenemos esta carpeta de imágenes que contiene los tres iconos de símbolos. Todos ellos tienen una extensión png. Para construir esto en nuestro proyecto, usaré los estilos en línea de la carpeta de propiedades de imagen de fondo. Aquí, estableceré que la URL sea la carpeta de imágenes, más el símbolo correspondiente y más la extensión de archivo de png. Eliminaremos el código formal y ahora si guardamos y ejecutamos el juego, verás que también tenemos estos iconos en la pantalla. Es posible que te preguntes por qué esta segunda imagen se gira 180 grados. Bueno, esto es por esta propiedad CSS que he agregado aquí y que define que, para el segundo ítem de este tipo, deberíamos tener una escala CSS y un flip CSS como filtro. 13. Crea un juego con React parte 3: Logramos la suerte de nuestra aplicación. Nuestro juego tiene ahora un diseño básico, sabe dibujar algunos símbolos aleatorios, y también cómo mostrar los iconos correspondientes para los símbolos. Algo que podríamos hacer a continuación es mostrar estas animaciones aleatorias cuando se presiona el botón. Existen múltiples técnicas que podemos usar para lograr esto pero por el bien de nuestro ejemplo, solo escojamos el de JavaScript puro. En JavaScript, tenemos dos tiempo principal de funciones. En primer lugar, tenemos el setIntervalo, y en segundo lugar, el setTimeout. Para ambos. El objetivo principal es que ejecuten una función específica después de algún tiempo. Les damos una función para ejecutar y el retraso para aplicar a esta función. El principal diferencia entre ellos es que setTimeout ejecutará que dan una función solo una vez. En tanto, SetIntervalo lo ejecutará hasta que se cancele. Dado que en nuestro ejemplo, este efecto de afilado se hace a partir de múltiples cerdos aleatorios usarán la función de intervalo establecido. Dicho esto, lo que debemos hacer ahora es volver a nuestro código. En primer lugar, tomaré toda esta parte que genera los símbolos aleatorios y envolveré en una función y usaré esta función con el setIntervalo. Estableceré un intervalo de 100 milisegundos, lo que significa que hay disfunción se ejecutará cada 100 milisegundos hasta que se cancele. Después de guardar, si colocamos el botón de correr juego, veremos la animación en acción. Aún así, las cosas aún no se han completado. Un tema que enfrentamos ahora es que nuestra animación no se detiene. Por ahora. Simplemente lo detendré manualmente al refrescar la página, necesitamos encontrar la manera de detener la ejecución de esta función de manera programática. Si volvemos a la documentación, descubriremos esta clara función integral que podemos utilizar combinada con una referencia a un intervalo establecido específico. Conociendo esto el plan será así. Dejaremos que la función se ejecute por 40 veces y después de esto, usaremos el intervalo claro para cancelar la ejecución de nuestra función. En primer lugar, volveré a la fuente. Aquí, crearé una nueva variable llamada contador. Este contador comienza con el valor de cero en un nuevo juego. Cada vez que se ejecuta esta función, ese contador se incrementará. A continuación, necesitaremos una referencia a nuestro intervalo. Para esto, definiré una nueva variable llamada mi intervalo. Como se puede ver, señalará al setIntervalo. Después de esto, usaré una declaración para comprobar si nuestro contador había alcanzado un nivel superior a 40 y si es así, diré claro el intervalo de mi intervalo. Después de esto, cuando la página se actualice, cuando volvimos a empezar, el juego verá que nuestra animación se detendrá después de 40 rondas. El paso final, debemos enseñar a nuestro juego cómo decidir al ganador. Para ello, introduciremos un nuevo valor o al estado llamado ganador y lo pondremos inicialmente en una cadena vacía. Se tomará la decisión en una nueva función llamada el lado. Esta función se llamará después de que despejemos el setIntervalo, dado que tenemos que lidiar con variables de estado, vamos a utilizar el método de estado assist y decir que el ganador debe ser esto.DecideWinner. Fuera de esta función, les conseguiremos el resultado de nuestro juego. Empezaremos usando una declaración destructiva para extraer del estado el valor del jugador azul y el jugador rojo. Inicialmente, comprobaremos si el jugador rojo es igual al jugador azul, caso en el que regresaremos que tenemos un resultado dúo. A continuación, comprobaré si el jugador rojo no es el ganador. Siendo una declaración de registro, simplemente pegaré el código. Pero básicamente, solo comprobaremos aquí por cada uno de los tres casos que podrían hacer rojo al jugador con el ganador. En este caso, vamos a conseguir que ese jugador rojo sea el ganador. Por último, si no tenemos un resultado dúo y jugador rojo no es el ganador, es seguro asumir que el jugador azul ganó el juego. Ahora, todo lo que nos queda por hacer es ir dentro del método aleatorio. En aquí en un párrafo, mostraré la variable estatal para el ganador y también cerraré el párrafo. Nuestro juego debe estar listo para ir a una prueba de manejo. Si ejecutamos el juego, seleccionará para el papel del jugador objetivo, para el jugador azul. Nos dirá que el jugador rojo acaba de ganar. Esto concluyó nuestra solicitud. Dentro de este ejemplo, hemos visto en acción cosas como componentes básicos de React, manejadores de eventos, o cómo usar funciones de temporización de JavaScript con React. Gracias por verlo y espero que lo hayan disfrutado. Feliz codificación y nos vemos la próxima vez.