Tutorial de Javascript y ES6 completo (incluyendo ES7 y React) [2/2]

1. Presentación de clases: en JavaScript permite construir modelos de objetos basados en datos relevantes y comportamientos a partir de objetos del mundo real. Esto introduce un sistema de herencia entre clases relacionadas. Esto nos ayuda a encontrar similitud entre objetos. Los programas describen entonces cómo estos objetos estaban latentes, interactúan entre sí para calcular datos y evaluar condiciones. Para definir una clase, utilizamos la palabra clave class y le damos a una clase los datos asignados usando una función constructor especial que el constructor crea e inicializa es un objeto para esa clase basado en la información única que nos gustaría darle. Si quieres crear nuevas clases basadas en las existentes, ahora podemos usar la palabra clave extends con el fin de hacer sub clases e Hijos de clases de padres . Exploremos las clases con un ejemplo, y nos quedaremos con el tema con el que podrías estar familiarizado y algo que podrías disfrutar. El Rey León. Ahora todos en El Rey León de Simba tis como tú eres un animal por lo que en la misma base tendrá en clase animal. Este animal tendrá entonces algunos datos de objetos muy básicos, como un nombre y bombo. Incluso tendrá un método dentro de él llamado Hola. Eso dice un mensaje de cuál es su nombre y de dónde viene. Otras clases podrán extenderse sobre esta clase basada en animales. Entonces supongamos que tenemos una clase mentirosa que extiende animal. Heredará el nombre y los datos de espera de Animal, pero podríamos modificar un poco sus datos para una línea. Podríamos darle aún más datos, como el color de su para y actualizar la hola meth it con el fin de decir su nombre y que sea de Pride Rock. Excelente. Ahora esta lógica puede extenderse a una multitud de clases y también heredar del animal. Y se puede imaginar la gran cantidad de objetos que podríamos presentar. Después de todo, en la tierra tenemos jirafas, aves, warthogs y muchas más clases potenciales para crear basadas en esta clase de animales. Pasemos a ver estas clases en acción 2. Definir clases: vamos a crear nuestra situación de primera clase siguiendo esa línea. Rey Ejemplo. En primer lugar queremos una clase animal, así que usa una palabra clave class y la llamaremos animal. Y luego para el cuerpo de la clase, es solo un par de llaves como cualquier otro alcance o función. Ahora, dentro de esa clase para inicializar los datos del objeto, usamos el trabajo de clave constructor especial. El constructor puede tomar cualquier número de parámetros. Decidimos dependiendo de los datos relevantes para esta clase específica. Entonces recuerda que queremos un nombre y altura para todos nuestros animales Ahora, dentro del constructor, podríamos empezar a modificar el objeto que se crea para la clase con la palabra clave this. Por lo que necesitamos precisar eso. ¿ Es esto para el animal ahora tiene una clave de nombre un signo del nombre que pasamos dentro de la lista de argumentos constructores. Entonces digamos que este nombre stop es igual a nombre. De igual manera esto para la clase necesita un té alto un signo de la altura que pasamos como segundo parámetro. Esta altura de Saad es nuestra altura. Ahora no se confundan por el hecho de que tenemos un nombre tanto en la izquierda como en la derecha. El nombre variable que se ve a la derecha refiere el nombre que está pasando por el constructor. De igual forma, la altura que está a la derecha se refiere a la variable de altura que se pasa por el constructor. Y en realidad podríamos llamar a esto cualquier cosa que queramos, como A o B siempre y cuando especificaras que este no nombre es ahora igual a un en esto, esa altura es igual a ser. Vamos a revertir esos cambios. Todo se ve bien para el animal construido. Podemos ilustrar mejor cómo funciona esta clase creando una nueva instancia de la clase animal . Así que crea un nuevo rey variable deja que King iguale y asígnalo a la nueva palabra clave, seguido de animal y un par de paréntesis. Las nuevas palabras clave significa que JavaScript toe buscar una clase o tipo de objeto. Ahora mira al animal y sus paréntesis. Se nota que se ve muy similar a una función bien dentro de estos paréntesis. Al igual que una función. Podemos especificar lo que queremos pasar como parámetros a lo construido ahora, así que vamos a darle movimiento fossa por su nombre más Fatah y luego 4.5 por su altura porque mi jefe es una línea bastante alta como ahorramos. Ahora deberíamos tener una variable de clase king. Y luego vamos a seguir adelante y consejo dot log king y echa un vistazo Ser constantes. Vamos a salvar y Boom. Contamos con una nueva clase animal con el nombre de Move fossa y una altura fijada a 4.5. Muy cool. Ahora, ¿qué tal agregar unos métodos especiales? La clase llamada HeLa que nos da un bonito saludo del nombre de los animales y de dónde viene ? Veamos al constructor a las ocho. Hola, Método. Justo después del constructor, Di hola y luego este saludo dirá algo así como alto en el repentino nombre del reino Animal. Por lo que utilizamos una cadena de tableta para lograr esto. ¿ Cónsul dot registrará una basura temp alta? Yo soy este nombre de punto, y para poder acceder a este nombre de hijo, usemos el signo de dólar y el par de llaves. Entonces sólo podemos decir el nombre de las acciones porque tenemos nuestro este objeto dentro del animal de clase . Ahora había sólo, digamos, del reino Animal, Grande y no usar este método. Saquemos este registro constante y al igual que un objeto accedemos con el punto de rey de época Hola, ya que guardamos. Hola, soy Mufasa del Reino Animal y agradable conocerte. Mueve fosa. Genial. Acabamos de ver a nuestra primera clase de animal en acción. Pasemos a extender esta clase para crear un niño y ampliar nuestros conocimientos sobre las seis clases y la herencia de Estados Unidos en general. 3. Clases de inherencia: Vamos a crear una clase infantil de la clase animal para mostrar la herencia trabajando en JavaScript. Recuerde que la herencia se refiere a esta idea de que podemos crear cláusulas fuera de una clase base y recibir todas esas propiedades de la clase padre. Digamos que queríamos definir una clase mentirosa. Empezamos la relación clásica normalmente, pero entonces, para heredar del animal, sabemos precisar que esta clase de león se extiende sobre el animal. Entonces digamos león clase extiende animal grande. Dado que la línea se extiende animal, ya podemos crear instancias de la clase de línea y darle algunos datos. Vamos a crear un hijo Grable en un signo en una nueva clase y darle algunos datos dentro de los parámetros. Entonces vamos a hijo igualar a un nuevo león era Simba, y su altura es, también, porque sigue siendo bastante joven, bien asesorado hijo de registro, y echa un y su altura es, también, porque sigue siendo bastante joven, bien asesorado hijo de registro, vistazo a la cláusula de sol o a la clase de línea más bien y boom. Tenemos una línea cuyo nombre es Simba, y la altura es de dos. Excelente. Ahora la línea sigue siendo igual de general como nuestra clase animal. ¿ Cómo lo hacemos los leones del dedo del pie más específicos y nos permiten darle información Mawr en la declaración de instancia. Bueno, volveríamos a darle a la línea un constructor. ¿ Había dos parámetros de nombre y altura una vez más. Pero después de la altura, podemos empezar a especificar campos adicionales para darle a esta línea más datos. Dado que las líneas a veces tienen diferentes colores para, vamos a darle ese campo adicional. Entonces el color es el 3er 1 en nuestra lista de constructores. Antes de poder empezar a acceder a este objeto, sin embargo, necesitamos llamar a una palabra clave especial para esta clase, ya que se extiende animal en clases infantiles antes de poder empezar a usar ese objeto para modificar datos de clase, necesitas usar una súper palabra clave para reconocer el constructor de un padre. Esto llamará al constructor de la clase padre con el nombre y altura que especificamos primero, Así que hazlo igual que super nombre y altura, luego dentro del constructor. Después de usar el Super para llamar al constructor de padres, podemos volver a acceder a través de este objeto. Entonces ahora tenemos la libertad de decir que este color de stock es igual a un color que discutimos dentro del constructor, y ahora podemos especificar símbolos color en su instancia. Entonces es el color es dorado y bang. Hemos nombrado a Simba. Altura a ti y es color es dorado. Muy bien ahora y si aún queremos usar ese método hola para líneas, pero queremos registrar un mensaje diferente por completo. Por suerte, en las clases infantiles, podemos simplemente anular los métodos de las clases de padres redeclarándolos. Personalicemos un saludo hola en la clase de línea para saludar, no soy este llamado de Pride Rock. Entonces ahora en un Hello muffin justo después del constructor ellos un cónsul dot log Hola, soy este nombre de punto de Pride Rock y luego en la parte inferior en lugar de consejo. No maderas, hijo. Simplemente podemos llamar a hijo no hola para ver que saludo en acción y alto Simba es genial conocer a alguien de la familia real. A continuación, generalmente existirán varias clases en módulos separados. Vamos a extraer esta clase animal base en un archivo separado llamado Animal dodgy s. Así que en primer lugar, crear la nueva bola nuevo archivo animal dot Js Ahora sacar la clase lo cortará, ritmo dentro del ducado animal s, y luego agregar un valor predeterminado de exportación de animal al animal dot Js cinco y en la parte superior de nuestro índice punto Js No podemos importar animal de animal Dodge s con el fin de agarrar se extraen clase animal, Digamos Y ahí vemos nuestro mensaje SIMA todavía registrando al cónsul Importación y exportación trabajó para nosotros para estos módulos para las clases. Muy bien, impresionante. Acabamos de ver un ejemplo de herencia con clases y la palabra clave extiende en script Java En realidad podemos implementar tantas clases infantiles del animal como quisiéramos. Podríamos crear hienas, pájaros, elefantes y cualquier cosa que quieras en todo el reino animal. Además, la clase de niño león en cualquier clase que pudiéramos crear podría ampliarse aún más para crear aún más subclases y nietos de la clase animal base. Muy bien, pasemos a explorar otro concepto dentro de las clases, los métodos estáticos. 4. Métodos estáticos de las clases: empecemos con una pizarra limpia y discutamos un nuevo tema dentro de las clases. Método estático. Cuando creamos un método estático dentro de una clase, podemos acceder a esos métodos sin declarar explícitamente una instancia de la clase. Esto resulta útil cuando queremos crear clases más prácticas como espacios con nombre para métodos en lugar de contener datos. Por ejemplo, empecemos con una pizarra en blanco y definamos una nueva clase de calculadora. Es una calculadora de clase, y su cuerpo es un par de razas rizadas. Ahora, con en esta clase, podemos elegir tener un constructor. No obstante, recuerda, no usaremos esas clases para sus datos, sino más bien sus métodos. Entonces vamos a darle un método estático para hacer un método estático. Es exactamente lo mismo que definir un método regular para una clase, excepto que procedemos ese método con la palabra clave estática. Definamos nuestro primer método estático para la clase de calculadora ahora y le daremos uno llamado Multiply. Tan estático. Multiplica un retorno B a veces B. Y como puedes ver, este es un método completamente idéntico al método de multiplicación que creamos antes cuando exploramos módulos. Muy bien, ahora que tenemos este método estático. Podemos empezar a utilizar la clase calculadora como utilidad para acceder rápidamente a la multiplicación. Entonces definamos una variable y dijimos que es un lugar igual a calculadora. No multipliques cinco y siete Bien confiado. Registra a y ¿qué esperas ver si dijiste 35? Tienes razón. Enfriar. Entonces como puedes ver calculadora punto multiplicar ahora es un método estático. No creamos una nueva instancia de calculadora, pero la palabra clave estática nos permite acceder. Multiplique enseguida. Genial. Añadamos un método estático más a la clase calculadora con el fin de reforzar este concepto en el método de adición exstatic. Y al igual que antes de nuestros módulos, ejemplo devolverá un plus B Si cambiamos calculadora, no se multipliquen al punto de calculadora Agregar cinco y siete. ¿ Qué crees que va a aparecer? Bang, Vemos 12 como probablemente adivinaste, apareciendo en nuestro cónsul. Todo en este momento podemos empezar a ver la utilidad de la palabra clave estática en las clases. Calculadora ahora se convierte en una forma de que podamos acceder rápidamente a toda una colección de métodos desde una sola importación de clase. La nueva palabra t calculadora en este caso no es un objeto que contiene datos sino un homónimo para sostener métodos relevantes como agregar y multiplicar. Y podríamos haber dividido, restar valor absoluto, todo lo bueno. Muy bien, pasemos a explorar hasta Mawr es seis con clases y prototipos. 5. Resaltar las diferencias entre clases y prototipos: vamos a discutir la diferencia entre clases y prototipos en JavaScript. Aquellos de ustedes familiarizados con la programación o que han tomado antes una clase de informática podrían estar familiarizados con este paradigma o concepto llamado programación orientada a objetos. La programación orientada a objetos se refiere a este concepto en informática que modela objetos basados en objetos del mundo real. Estos objetos contienen datos relevantes, y un programa diseñará alrededor, haciendo que estos objetos interactúen entre sí. Muchos de los principales lenguajes de programación, como C, Java y Ruby, proporcionan soporte pesado para modelos de programación orientados a objetos alrededor de sistemas de clases y herencia. Entonces la pregunta es, ¿Son buenos los empleos basados en un modelo de programación orientado a objetos? Después de todo, las clases de E seis empleos que acabamos de explorar parecen apuntar a que la respuesta sea. Sí, sin embargo, la verdadera respuesta es no. JavaScript se basa en un prototipo todo modelo de herencia. Es un poco diferente a las clases bajo el capó. En realidad, las clases son solo extracciones de prototipos de script de trabajo, por lo que en realidad no estamos creando clases de datos de la misma manera que Java y Ruby lo hacen con su modelo de programación orientado a objetos. Pero la sintaxis de clase E six nos permite crear prototipos JavaScript muy rápidamente de una manera más comprensible. Entonces la siguiente pregunta es, ¿qué es un prototipo? Un prototipo es una característica que tiene todo objeto en JavaScript, y eso nos dice una característica muy específica sobre ese objeto, y esa característica es su padre o el objeto que heredó sus propiedades de See . Cada objeto en JavaScript tiene un prototipo y en realidad hereda propiedades y métodos de su prototipo padre. Esto crea una cadena de prototipos o incluso una estructura de datos como una fecha o una tasa en JavaScript hereda de prototipos por encima de ellos. En lo más alto de esta cadena está el prototipo de objeto en sí. Ahora que hemos explorado cómo funcionan los prototipos en JavaScript, hemos aclarado también la diferencia entre prototipos y clases en otros modelos de programación orientados a objetos . Ahora tenemos una mejor comprensión del hecho de que las clases no son clases en absoluto, sino prototipos bajo el capó. En general, toda la historia empieza a volverse mucho menos abstracta cuando en realidad vemos prototipos en acción 6. Prototipos: Vamos a cagar nuestro primer prototipo de objeto JavaScript. Para hacerlo, usamos la función constructor de objetos en script de trabajo, así que usamos una función de palabra clave y luego damos seguimiento con el nombre del prototipo. Vamos a crear un prototipo de asistente para funciones asistente y el cuerpo es un par de llaves como de costumbre. Ahora, la palabra clave function en este caso no se está utilizando para crear una función real que logre alguna expresión lógica, sino que se utilizará para alojar datos en este prototipo de objeto, un prototipo que tiene datos según el número de parámetros que le pasamos. En primer lugar, vamos a darle a este prototipo de reserva el nombre campo Ah, campo de casa y un campo de mascotas. Entonces función asistente nombre Casa Mascota. Genial. Ahora podemos acceder al objeto del prototipo con la palabra clave this y siguiendo el mismo patrón que no hicimos clases. Dijimos las claves sobre el esto a los valores que pasamos en la lista de funciones de parámetros. Por lo que este nombre de acrobacias equivale a nombre. Esta no altura o esta de casa Más bien es igual a casa. Mr Pet es igual a mascota. Excelente. Ahora hagamos nuestra primera instancia del Mago el nombre será Harry Potter. El domicilio será Griffin Door y su mascota estará fuera. No podemos pretender prototipos de objetos ahora con la nueva palabra clave, igual que una clase y asignarla a una variable. Entonces que Harry la variable iguale a un nuevo prototipo de mago con Harry Potter como el nombre su casa será Griffin Door y su mascota será nuestra y entonces confiaremos en el registro Harry y salvaremos. Ahora tenemos un prototipo de asistente apareciendo en nuestro cónsul que los espectáculos son relevantes. Data Griffin Puerta, Harry Potter y Out Impresionante. También podemos agregar métodos al prototipo que le da alguna funcionalidad basada en sus datos . Añadamos un método que describe en un saludo llamado Greep al prototipo Qué es este asistente. Entonces diremos que esta cosecha de acciones es igual a una función de flecha. El dis regresa. Yo soy este nombre de punto en una camada temporal de esta casa de puntos. Tenga en cuenta que en esta función de época, no tengo que especificar la palabra clave de retorno, en realidad, por lo que podemos sacar este corsé, sacar la palabra clave de retorno, y ahora esto devuelve la expresión de la derecha por predeterminado de la sintaxis de la función de flecha porque estamos omitiendo las llaves actualmente. Ahora vamos a aclarar algo. A diferencia de las declaraciones de funciones normales, las funciones de Flecha no crean su propio este objeto para el ámbito local de la función por defecto. En cambio, su alcance todavía hará referencia a que esto fuera de la función loro exterior. Esto nos beneficia enormemente a la hora de crear funciones y prototipos más avanzados porque sus inter funciones concil hacen referencia a los datos en el ámbito de los padres. Muy bien, en una bitácora de harry dot griego al consejo. Entonces vamos a enmendar esto para decir, Harry Dockery mientras salvamos notamos que soy Harry Potter de Griffin Door. Encantado de conocerte a continuación. Supongamos que quería agregar más datos a este prototipo. Bueno, fácilmente podríamos simplemente actualizar la declaración del prototipo. Pero cada prototipo también viene la propiedad de palabra clave prototype, que representa sus datos de objeto. Podemos entonces aprovechar esa palabra clave prototipo toe Adam o propiedades al prototipo Wizard muy fácilmente. Entonces supongamos que quería agregar otro campo como nombre de mascota, por ejemplo, sin tener que volver atrás y cambiar el constructor real. Podríamos usar una palabra clave prototipo igual que esa arriba de Harry. Diga asistente Pato prototipo punto nombre de mascota. Y esta línea como propiedad de nombre de mascota. Vea el prototipo como si realmente lo hiciéramos en la declaración del prototipo. Siguiente para agregar el nombre real de la mascota. Decimos que el nombre de mascota de harry dot es igual a Hedwig. Noté que nuestro instante se mantiene igual. Pero si asesoras, no registres a Harry ahora encontraremos que el nombre de la mascota de Harry es Hedwig. Impresionante. Ahora revisitemos esta discusión que empezamos antes sobre sus funciones, no creando su propio este objeto en su ámbito de función. Supongamos que quisiera agregar un método a nuestro prototipo ahora. Bueno, usemos un prototipo. Era igual que antes podemos decir mago, no prototipes dot info Así que esta función nos dará algo de info sobre la mascota de Wizards. Entonces intentemos agregar esa función con una función de flecha. Yo diría Wizard up prototype dot info equivale a anillo de temperatura de retorno que dice que tengo una esta parada Se llamó a este inicio que viven. Se dijo un consejo. No registres información de harry dot ahora, y como puedes ver nuestras quejas de concierto, eso no tiene forma de manejar esto, y la info es indefinida. El motivo por el que este código no funciona es que la función de flecha no crea un este objeto para que el prototipo de función haga referencia. Ahora una función de aire funciona dentro del prototipo de función real porque tiene un externo esto para referirse así como una solución al usar la palabra clave protect para definir un método. Dado que no podemos referirnos a ese ámbito local este objeto dentro del prototipo, en realidad no usamos una función de flecha. Utilizamos la declaración de función normal. Esto recreará este objeto y nos permitirá referirnos a aquellas propiedades que se mantienen dentro de este objeto de nuestro prototipo. Entonces en cambio decimos asistente dot prototipo dot info es igual a función sin el retorno de flecha. No tengo este stop pet llamado este nombre de punto. A medida que ahorramos, encontramos que no tengo a nuestro llamado Hedwig trabajando y iniciando sesión al consejo Excelente con una simple operación de la función de Js vieja que vemos son relevantes. Aparecen los datos Así que esto muestra que las funciones del aire, si bien locamente útiles y acortadas concisas, realidad no son la mejor solución en todos los casos. Esta vez, necesitábamos una palabra clave function con el fin de crear un este objeto para nuestro prototipo. Ahora que hemos visto prototipos en acción, debería quedar un poco más claro que la clase es simplemente extraer su lógica y envolverla para hacer que los prototipos se vean bien para los codificadores con un fondo de programación orientado a objetos. Pero cuando se trata de ello, recuerda que las clases se acaban de envolver. Los prototipos y prototipos son simplemente funciones. Recuerde, cada objeto en JavaScript desciende de otro prototipo y hereda esas propiedades comenzando todo el camino desde el principio de la cadena. El prototipo de objeto en sí. Está bien, sigamos aprendiendo E s, seis. 7. Presentación de estructuras de datos en ES6: en el campo de las estructuras de datos de ciencias de la computación se referían al almacenamiento programático de datos para su uso eficiente. Toda aplicación a nivel de la industria aprovecha una estructura de datos con el fin de administrar sus datos de manera más eficiente. En primer lugar, apagado, algoritmos sofisticados utilizaron estructuras de datos para realizar cálculos avanzados como buscar o clasificar en CS. Podemos cuantificar ciertos algoritmos en función de su tiempo de ejecución o de la rapidez con que resuelven un problema. Además, podemos clasificar algoritmos en función de la cantidad de memoria o datos que utilicen. En otras palabras, el recurso es que requieren ahora en Essex, recibieron algunas estructuras de datos más limpias actualizadas dentro del comunicado. Exploremos la primera estructura de datos en esa colección. El conjunto de seis nos permite almacenar valores únicos. Es similar a una matriz, pero no se puede tener duplicados la característica específica de no valores duplicados. Lugares conjuntos como una estructura de datos ventajosa sobre una carrera. Supongamos, por ejemplo, que estábamos organizando un evento, y cada individuo recibe un sorteo. Cada vez que un visitante único viene por un regalo, se lo damos a él o a ella, y en el individuo a nuestro conjunto de personas que han recibido un regalo. Ahora supongamos que ese individuo volvió por un segundo regalo con una matriz, tendríamos que implementar un algoritmo o propia función de ayudante personalizada, para comprobar si nuestra lista contenía a ese individuo ya que no le damos a esa persona un segundo regalo. No obstante, si utilizamos un conjunto para rastrear a nuestros huéspedes con regalos, sabemos de inmediato si ese individuo ya recibió un regalo mediante el uso de los métodos que proporciona la estructura de datos de conjuntos de JavaScript. Estos métodos incluyen el método ad method delete y tiene método con comprobaciones de la presencia de datos dentro de un conjunto. Muy bien, pasemos a implementar un set nuestra primera e estructura de datos de Essex. 8. Escribir un conjunto: Saltemos a nuestra estructura de datos del 1er 6 e implementa un conjunto bajo el capó. Todos los conjuntos heredan del prototipo set, por lo que declaramos un conjunto con la nueva palabra clave. Declarado un nuevo conjunto llamado A En un signo it y nueva instancia del conjunto prototipo declaración Dejar un nuevo conjunto igual. En este conjunto, podemos agregar cualquier cosa desde valores primitivos. Objetos del dedo del pie. Todo lo que tenemos que hacer es pasar los datos al método set dot Add. Vamos a añadir algunos números nuevos un punto añadir cinco, por ejemplo, y un punto añadir 43. Excelente. Ahora, ¿qué tal agregar una fuerza? ¿ Eso funcionará? ADA anuncio bien y parece que todo está bien con nuestro set. Ahora intentemos agregar en objeto solo para una buena medida cuyo valor X será de 50 y por qué el valor será de 200. Adelante y guarde eso. Todo parece estar bien. Y por último, vamos a Cónsul, no registremos un y echemos un vistazo al set de una vez por todas. A medida que ahorramos, vemos que nuestros números cinco y 43 se están reduciendo así como nuestro valor de objeto. Excelente. Exploremos los métodos que ahora proporciona el prototipo de set para que averigüemos algo de información sobre este conjunto. Para empezar, todos los lados tienen una propiedad de tamaño a la que podemos acceder para determinar cuántos elementos existen dentro del conjunto consejo dot log un dot size y boom. Vemos cuatro, como habrías adivinado, porque agregamos cuatro elementos a nuestro set. Ahora aquí viene una función muy útil. Vamos a comprobar si este conjunto contiene datos comprobará si contiene el número cinco. Entonces en lugar de un tamaño de punto, vamos confidante log un punto tiene cinco. ¿ Y qué crees que va a aparecer? Bueno, cierto, como habrías adivinado, ya que agregamos cinco antes, vamos a comprobar si tiene siete entonces y allá vamos, nos ponemos falsos. Por lo que es un valor verdadero o falso, dependiendo de si el parámetro existe dentro del conjunto. Muy bien, veamos algo muy útil. Podemos convertir conjuntos de borrados enteros muy fácilmente. Sólo tenemos que pasar una matriz al constructor de conjunto. Hagamos una matriz de números y empecemos con una pizarra limpia. Dejar que los números sean iguales. Podrías tener los números que quieras, así que voy a hacer 578 13 y 17 y ahora están entumecidos. Set será un nuevo conjunto que pasa en la matriz de números al constructor. Voy a ir adelante consejo no registre Numb set. Y ahora vemos un prototipo conjunto con 578 13 y 17 que es lo que teníamos en nuestro original, ¿no? Siguiente. ¿ Cómo imprimimos cada uno de estos elementos de conjunto de forma individual? Bueno, necesitamos alguna manera de generar a través de estos datos en el conjunto e imprimir cada elemento uno a la vez. Por suerte, el conjunto de JavaScript nos proporciona un método de valores que nos permite hacerlo justamente. Devuelve un objeto iterado que contiene todos los valores configurados para recorrer a lo largo. Ahora, con el fin de manejar esto iterado correctamente se utilizará una variación del bucle cuatro llamado Enhanced for Loop. Entonces vamos a declarar que cuatro bucle ahora para el elemento let de valores de ajuste numb. Y en esta línea, estamos viendo un bucle de cuatro con en asignación dentro de ella. Lo que está sucediendo es que la variable de elemento se establecerá al valor actual en valores de ajuste numb en cada adoración del bucle. Entonces debido a que numb dijo, los valores de punto contienen esencialmente una lista honorable de valores del conjunto original, este enhance for loop sienta los elementos cada uno de esos valores uno a la vez. A medida que cancelamos el elemento log, deberíamos ver cada generación. Entonces obtenemos 578 13 y siete. Impresionante. Ahora vamos a aplicar el conjunto a un problema relevante que podríamos encontrar en una aplicación empresarial o proyecto personal. Considera una larga cadena de caracteres aleatorios. ¿ Cómo podríamos decir rápidamente qué caracteres aparecen en la cadena? Bueno, como una solución, podríamos convertir todo el rayo atún de cuerda, luego convertirlo en un conjunto y bang. De repente, tenemos todos los elementos únicos en ese encogimiento original. Probémoslo ahora. Crea un encogimiento de personajes aleatorios enloqueciendo en tu teclado. Así que deja que los caracteres igualen lo que quieras en esta impresionante cadena. Ahora dividamos esta lista de caracteres en una matriz de todos sus personajes llamando a la palabra clave split especial en el deslizado. Dejar que los caracteres sean iguales. Chars dot split en la cadena vacía para dividir cada carácter dentro del encogimiento original, y voy a hacer un juego de carga que es un nuevo conjunto pasando en la carga son entonces vamos a seguir adelante y constante log el conjunto de carga y comprobarlo. Y como vemos, ahora tenemos un conjunto de cada elemento único que incluimos en nuestra cadena aleatoria original y que solo logró escribir 10 caracteres mientras me volví loco en mi teclado. De acuerdo, eso cubre un set en E s seis. Pasemos a aprender aún más e a seis estructuras de datos. 9. Presentación de mapas: siguiente arriba explorará un segundo. Sí, seis mapas de estructura de datos. El mapa tiene pares de claves y valores. Para esas claves y valores, podemos usar tanto valores primitivos como objetos dentro de un Essex met. Cada T es única. No se puede duplicar la misma clave dentro de un mapa. Para entender cómo funciona eso, podríamos pensar en ellos como casi idénticos a los objetos tanto objetos como siestas. Asignemos valores de claves. Podemos recuperar esas llaves, eliminarlas y cambiar lo que está almacenado para ese té. No obstante, existen algunas diferencias importantes entre el objeto JavaScript regular y la estructura de datos del mapa que s six nos proporciona. Y estas diferencias en realidad hacen del mapa una recopilación de datos mucho mejor. Dado que los objetos tienen un prototipo, existen ciertas claves predeterminadas que chocarían con las claves que queremos si no tenemos cuidado. No obstante, en el mapa ES six, podemos usar cualquier TV quiera sin preocuparte. Además, las claves de un objeto son principalmente contracción, mientras que con un mapa, estas podrían ser cualquier cosa desde primitivas, objetos e incluso funciones. Por último, podemos obtener el tamaño de una estera muy fácilmente llamando bien a la propiedad size, tenemos que resolver esto el largo camino manualmente con un objeto JavaScript regular. De acuerdo, vamos a sumergirnos en el mapa es seis estructura de datos y veamos algunos ejemplos útiles con código. 10. Escribir un mapa: Vamos a crear nuestra primera instancia del mapa ES six, similar al conjunto que bronceamos instantáneamente. Se comió el mapa usando la nueva palabra clave. Crea una variable A y asígnala a On que dejó un igual sabía que grande. Para dar los mapas, um, um, emparejamientos de claves y valores, utilizamos el método de conjunto de puntos de mapa. El mapa. Ese método set para mapas toma dos parámetros una clave y un valor. manera muy sencilla, definamos una clave para este mapa, y éste será un loquero como T uno igual Shrinky. Entonces llamaremos al método set de esto un mapa. Y discutamos en el primer parámetro, el clave que acabamos de crear para el segundo parámetro, solo una cadena que dice Valor de retorno para una clave de deformación. Por lo que una vez más, una clave de conjunto de puntos, una para el primer parámetro de arte un mapa y luego devolver valor para emitir clave. Eso es constante. Inicia sesión a y echa un vistazo. Aquí vemos que tenemos un encogimiento ahora mapeo a nuestro valor de retorno para ese encogimiento. Impresionante. Añadamos claves adicionales. Esta vez. Tendremos una clave para vamos clave para igualar un objeto e éste dirá una clave, que es solo algunos datos ficticios, pero vamos a seguir adelante y establecer el valor de clave para devolver valor para on object key. Pero teniendo Bata boom, tenemos un valor de retorno clave para un objeto. Él Así que aquí concebimos que tenemos objetos como una clave real dentro de nuestra estructura de datos del mapa E Essex . Muy cool te conoce otra, y podemos tener funciones como claves también. Es como T tres función igual, y sólo tendremos una función vacía que no devuelve nada. Pero la distinción clave es que consentimos clave 32 un valor de retorno para una clave de función. Y a medida que guardamos, vemos la función válida como una clave para la estructura de datos E six que devuelve valor de retorno para una clave de función para que pudiéramos tener facilidad de contracción. Objeto. Es teclas de función, cualquier cosa que nos guste dentro de nuestro mapa con el fin de mapear un par clave y valor. Ahora pensemos en cómo iterar a través de mapas con el fin de imprimir claves y valores, igual que un conjunto que puede tomar en una matriz de elementos y convertirse. Del mismo modo, un mapa puede tomar una matriz de longitud a las matrices. Convierte eso en un mapa. Vamos a crear un mapa rápido de esta manera. Entonces primero declarar un nuevo par de valores clave para Numb son, que va a ser una matriz regular. Su primer elemento será un Array, que tiene uno y luego uno. Tendremos otra matriz de dos para entonces, finalmente, finalmente, otra matriz de dos longitud de tres y tres. Ahora podemos convertir esto fácilmente en un mapa E six. Al igual que así, deja que Val mapa iguale nuevo mapa, entonces vamos a pasar en ellos están en el constructor de estera. Salvemos la cultura. No se registren mapa de Val. Y como pueden ver, tenemos nuevo mapa con un mapeo 212 a dos y tres mapeo a tres, como se esperaba al convertir los Numb originales son impresionantes. Ahora, para poner estos valores uno a la vez más que de una vez, necesitamos generar de alguna manera a través de que eso. El mapa estructurando Essex sí tiene el método de ayuda de valores, igual que la estructura de conjunto. Pero este Onley devuelve estos segundos elementos, que son los valores para que nuestras claves impriman. De igual forma, si usamos un método de claves paralelas, solo encontraríamos las claves para nuestro mapa y dicho Queremos usar un método de ayuda para mapas llamados entradas Otra vez usaremos el mejorado para Luke o el cuatro de Loop, ya que también es llamado a mapear a través de cada par de claves y valores uno a la vez e imprimirlos. Así que saca el registro de la consola para Let He Value Now tendría una matriz para enlazar de entradas de puntos de mapa Val . Vamos Cónsul, no registremos una cadena de plantilla, que dice que tenemos una clave que apunta a nuestro valor a medida que guardamos. Muy bien, un punto alguien dos puntos dos y tres puntos de tres. Genial. Está bien. Ahora exploremos aún más profundamente tus seis mapas. Con el problema relevante, revisitaremos ese recuento de cartas en un encogimiento aleatorio que introdujimos en la discusión sobre ES seis sets. Esta vez tenemos una capacidad extra dentro de esos pares de claves y valores. Ahora podríamos usar mapas para volver a asegurarnos de que nuestras entradas de cartas sean únicas y no entren más de una vez porque este mapa nos impide duplicar claves. No obstante, esta vez cuando nos acercamos a una carta, ya hemos añadido a la estructura ya no nos saltaremos más. Esta vez tendremos un contador para cada letra, y al final, sabremos exactamente cuántas veces se presentó cada personaje en nuestro loquero. Una vez más, comienza con una pizarra limpia, declara un nuevo encogimiento y luego aborda el teclado. Es cada Oh, y quién sabe qué idiomas son, pero contaremos las letras, y tal vez eso nos dé una pista. En primer lugar, declarar una nueva carta importa, pero las letras equivalen a nuevo mapa. Y luego implementaremos un bucle de cuatro que genera sobre la cadena un carácter a la vez para Let I Iguals cero. Ojos escuchaban encoger longitud de punto, cinco más, y luego enviaremos una variable de carta al personaje actual de acuerdo a nuestras vidas. Valor para el carácter tengo en el encogimiento dejar letra igual encoger. Y aquí comienza la diversión por implementar la lógica de conteo real. En este punto, necesitamos pensar en dos casos posibles que pueden suceder cuando nos encontramos con una carta ya sea que eso no tiene la letra aún o ya la tiene. Por lo que el mapa no tiene. En la letra se establecerán las letras valor dedo del pie uno en el mapa para contar esa letra. De lo contrario sí tiene la letra y podemos actualizar su valor y agregarle uno. Al inicio de ello todo significará si afirmación que cheques de eso no tiene la letra todavía. Digamos que si letras que tiene letra es igual a caídas. Haz algo ahora. En realidad podemos acortar esta condición para decir si las letras de explosión punto tiene letras. Lo que dice lo mismo. No, el uso de este bang como se mencionó anteriormente o signo de exclamación Todo esto hace es cambiar un valor de abucheo a su opuesto. Por lo que podríamos haber comprobado si las letras que tiene letra es igual a caídas. Pero ves flequillo por todas partes en JavaScript para acortar las declaraciones y expresiones así . Entonces si el mapa no tiene carta, recuerda, recuerda, enviamos su valor a uno para reconocer la primera aparición de esa carta. Por lo que decimos letras dot set letra uno, lo contrario en el bloque else actualizará el valor de la letra. Ya que sabemos que el mapa de letras ya tiene nuestra letra letras letras punto set letra, sacaremos el valor actual de la letra y luego le agregaremos uno dulce. Con este código, llenará nuestro mapa con un montón de recuentos de cartas. Todo lo que queda por hacer es en realidad echar un vistazo a este diputado completo. Concejo no registremos cartas al final. Seguiremos adelante y ahorraremos. Y acabo de tener un poco de tipografía. Diremos letras punto conjunto y boom. Ahí vamos. Escribía un cinco veces 04 veces algo interesante que hablé mucho. También conseguimos un P cuatro veces tan cool conseguimos un par de valor clave impresionante del número de veces un personaje apareció en nuestra cadena, un caso muy útil para la estructura de datos del mapa en E. A six. Fantástico. Acabamos de pasar por mapas de Essex, que son mejores colecciones de pares de valor clave que objetos. Pero seguirás viendo objetos por todas partes en código de Essex. Así que no solo reemplaces cada objeto ahora con un mapa donde los mapas realmente son muy prácticos. ¿ No son las colecciones donde necesitamos claves más allá de solo cadenas o el valor clave? A menudo, los pares se agregan, eliminan o actualizan. Excelente trabajo, y sigamos aprendiendo 11. Presentación de cierres: examinará ahora un concepto significativo dentro de JavaScript y E S six cierres. Los cierres se refieren a funciones que recuerdan el entorno en el que fueron creados y podrían hacer referencia aún más a las variables independientes dentro de ese entorno. De esta manera, el cierre combina una función en el entorno dentro de la cual declaramos que los cerradores de funciones nos permiten hacer pensamientos intrincados como la creación de fábricas de funciones. Es decir, podemos crear funciones que devuelvan otras funciones para hacer métodos más adaptables para los más cierres nos permiten declarar métodos de una manera que mantenga datos privados en JavaScript No podemos hacer esto automáticamente como en lenguajes como Java. . Pero no podemos emular este tipo de comportamiento de variables privadas vistas en tantos otros idiomas. Use recintos bien, esperemos responder a la pregunta básica de qué no son cierres y cómo funcionan a medida que los exploramos en los próximos ejemplos 12. Cierres y de Scoping: exploremos este concepto de cierres con más detalle. Recuerde que con cierres se crearán funciones que pueden referirse a las variables dentro su entorno y realizar un seguimiento del entorno de su creación. En primer lugar, definamos una nueva función llamada Call. Dejar llamar igual a una función de flecha con un cuerpo vacío. Y en esta función, vamos a darle algunos datos locales secretos. Vamos a secreto igual es seis rocas, aunque eso no es mucho secreto. Ahora bien, si tratamos de acceder a la variable secreta fuera del alcance de la función de llamada, encontraríamos un aire para que consejo no registren secreto y ha visto secreto no está definido en el ámbito global. No obstante, podemos obtener acceso a estos datos si su cierre de función tiene un método que revela los datos . Vamos a agregar ese método ahora dejar revelar igual a otra función de flecha. Bueno, simplemente, Cónsul, no registres en secreto. Ahora llamaremos a revelar dentro de su cierre real. Y luego llamemos al cierre con un comentado y boom, vemos EEA seis rocas, pesar de que nuestra variable secreta está sobre Lee, dentro del alcance de esta convocatoria, cierre seguía accediendo de alguna manera en el ámbito global impresionante. Hemos visto nuestro primer cierre en acción. Con frecuencia escucharás este concepto de interfunciones accediendo a los valores en los ámbitos de los padres como léxicos, alcances, léxicos. alcance simplemente se refiere a la idea de que JavaScript y nuestro programa realizan un seguimiento de la ubicación de una variable para entender dónde se puede acceder. Vamos a buscar este ejemplo de cierre y explorar más a fondo el Skube léxico en lugar de llamar a revisión dentro de nuestro cierre. Devolvamos la función de revelar por completo ahora. Esta declaración de retorno nos permite definir una variable y asignarla al resultado de nuestro cierre. Entonces en lugar de llamar, llamar, desvelemos llamada igual y luego vamos adelante y llamemos a develar. Y como lo hacemos vemos que nuestro cierre aún tiene acceso a esa variable secreta interna. Ahora, para aquellos de ustedes con experiencia en otras programaciones, lenguajes podrían encontrar esto un poco contrario a intuitivo. Después de todo, las variables locales dentro de una función generalmente solo duran allí la ejecución de la función. Por lo tanto, puede parecer que no podemos acceder a la variable secreta una vez que nuestra función termine de completarse . ¿ No debería ser indefinida la variable secreta una vez que intentemos llamar a develar? Bueno, esto apunta al poder de los cierres dentro de JavaScript. Es esta idea de alcance léxico el cierre conserva una referencia al entorno léxico en el que fue creado y nos permite acceder a datos dentro de ámbitos de funciones incluso después la función se complete. Por lo tanto, nuestra variable Annville se le asigna el valor de lo que llaman retornos de cierre. De esta manera, tenemos acceso al secreto dentro del cierre, incluso después de que termine. Está bien, no te preocupes. Si los cierres siguen pareciendo un poco abstractos, profundizaremos más en el concepto con ejemplos más prácticos para mostrar cómo puedes aprovechar los cierres ya para mejorar tus programas E A six. 13. Factories de función: en script Java en Essex. Los cierres nos permiten crear fábricas de funciones, fundir fábricas, tomar uno o más argumentos y devolver nuevas funciones basadas en esos argumentos, vamos a crear nuestra primera fábrica de funciones con una función que agrega un sujeto a una fortaleza. Tomará un parámetro los sujetos que esperábamos por lo que Const sumar algunos picks es igual a X, que serán nuestros eventuales temas. Devolvamos algo dentro de este ámbito de cuerpo dentro del alcance de agregar alguna corrección. Añadamos un inter función llamado can Cat que tiene un argumento propio y devuelve un resultado de sumar el argumento del anuncio Suffolk y su propio argumento de concatenación. Por lo que Const no podía gato igual. Por qué el resultado de retorno de agregar Por qué más X Porque X's son Celtics. Entonces queríamos seguir qué? Por último, esta función de sufijo de anuncio ahora devuelve el inter cierre. Por lo que en un comunicado que los retornos pueden gato excelente, hemos creado una fábrica de funciones. El primero toma un argumento, define un cierre y lo devuelve con capacidad variable. Dependiendo de nuestro argumento inicial, vamos a explorar cómo funciona esto con un par de llamadas. Agrega algunas púas. En primer lugar. Supongamos que quería una función que agregue un sufijo ness a cualquier palabra que discutamos. Así que vamos a agregar nous iguala el resultado de llamar Añadir algunas fotos discutiendo ness Vamos a seguir adelante y consejo no registre Adn s para ver cómo luce esto Así como puedes ver, el resultado es una función devuelve Por qué y por qué más x Así que vamos a llamar a esta función ahora con un prefijo adn s r prefijo será feliz Y vamos a asegurarnos de que establezca esto en una variable Let h igual adn s happy Vamos adelante y confidante log h junto con maldad y boom Obtenemos felicidad como resultado Así vemos el resultado de nuestra fábrica de funciones primero argumentamos lío a los anuncios La función de Suffolk que es excepto parámetro mira la función con cat en el interior que no es un cierre que recuerda un entorno léxico de ad Suffolk y devuelve su propio argumento de por qué más X Y luego finalmente lo devolvería ese cierre de agujero para agregar algunas fotos. Ahora hemos creado toda esta función en una fábrica para desorden publicitario y luego podemos usar add mess Y estás contento? Y ahí vamos. Somos cónsul punto maderando felicidad. En consecuencia, vamos a mostrar esto otra vez con otro sufijo. Dejar añadir total igual. Agrega algunas púas. Teléfono. Dejar f igual. Advil argumentará fruta. Ahora sigamos adelante y confidante log f y nos volvemos fructíferos como resultado. Qué cool. Muy bien, probemos este concepto de funcion fábricas casa con un segundo ejemplo. Esta vez nos ocuparemos de una fábrica de funciones más orientada a las matemáticas. Definamos nuestra segunda fábrica de funciones, que convierte una función que multiplica dos variables. Seguirá una estructura similar a nuestro anuncio Función y Cierre de Suffolk para encontrar un producto de función que tome un parámetro. En última instancia, esta se convertirá en nuestra fábrica de funciones que devuelve un inter función que multiplica nuestro parámetro original de producto con parámetro inter funciones. Añadamos esa inter función ahora, excepto esta vez acortemos el cierre y regresemos la función de inmediato para que podamos simplemente devolver por qué y a cambio. Por qué Tiempos X como de costumbre. Genial. Llamemos a esta fábrica de funciones de producto y creemos algunas funciones que dieron vuelta el resultado de multiplicar números personalizados. Por lo tanto, que Multi cinco igualen una función de fábrica devuelva función de producto y cinco aquí estamos creando una nueva función con nuestra fábrica de funciones llamada Multi Five que hace una función con un parámetro para una variable y devuelve esa variable multiplicada por cinco. Como argumentamos originalmente, eso es confidente. Registrar una llamada de multi cinco y moldear 53 Aquí encontramos 15 como se esperaba. Muy cool. No, hagámoslo de nuevo con una doble llamada Cool producto a su consejo. No registre resultado de duplicar nueve a medida que ahorras. Ahora encontramos 18 en el cabildo y grandes nosotros las fábricas de funciones nazis trabajando plenamente con sus ex cierres, lo que nos da una gran funcionalidad personalizada. Ahora, antes de seguir adelante, podemos aprovechar una vez más un par de pasos para reducir esta fábrica de funciones. Recordar con funciones de flecha que podemos quitar la palabra clave de retorno y devolver automáticamente la expresión de la derecha. Entonces acortemos la inter función. Saca los frenos, semi colon, la palabra clave de retorno y luego nos dieron un retorno. Por qué arrow y Times X ahora nota que todo así funciona como guardo. Todavía llegamos en 18 pero notarás que aún podemos acortar esto de nuevo. Sacaremos esta llave rizada esta palabra clave de retorno así es esta llave rizada, y como resultado, tenemos una declaración muy concisa, que es una fábrica de funciones completamente válida. A medida que guardamos y recargamos. Boom, todavía tenemos 18 impresionantes. Verás métodos reducidos como este aparecen en solo una línea más que a menudo India six coat. Pero la fábrica de funciones antes en la sintaxis expandida de la versión anterior, puede ser más comprensible. Depende de ti implementar de qué manera te gustaría, siempre y cuando seas internamente consistente al crear tus programas E six. Está bien, sigamos explorando cierres en Essex. 14. Métodos privados: muchos lenguajes, como Java soportan la capacidad de crear métodos privados para habilitar la encapsulación de datos. Thes métodos privados tienen acceso restringido dedo sólo otros métodos dentro de la misma clase. Ahora en JavaScript, no podemos hacer esto de forma nativa con la clase Essex, por ejemplo, pero podemos emular el comportamiento de los métodos privados mediante el uso de cierres. Exploremos este concepto de crear métodos con cierres, ejemplo de una función que realiza un seguimiento de un presupuesto con datos privados. En primer lugar declaró una nueva función llamada presupuesto y asignarlo en una función de flecha ominosa. Contras. Presupuesto es igual a la función de Flecha R con un alcance de cuerpo. A continuación, demos a este presupuesto algunos datos privados. En primer lugar, una variable de equilibrio. El de la banda es igual a cero número. Crear un método privado llamado cambio Bow. Deja que cambie sobre igualar una función con un parámetro, que acaba de regresar al saldo de retorno más igual que, y esto seguirá adelante. Actualizar saldo para agregar lo que discutamos dentro del cambio sobre ahora, agreguemos algunos cierres a esta función de presupuesto para darle al usuario formas y manipular estos datos de saldo privado. Estos cierres en la función utilizarán entonces el entorno de funciones y nos darán formas manipular su alcance léxico para nuestro primer método o cierre accesible. Vamos a crear un método de depósito 20 que utilice un cambio sobre método privado y nos permita actualizar el saldo agregando 20 a nuestro presupuesto. Así que llámalo depósito. 20 es igual a una función de flecha que sólo los giros el arco de cambio de 20. Ahí vamos ahora para darle acceso al usuario a este depósito. 20. Método. Devolvamos un objeto, que está sosteniendo un depósito. Mapeo de 20 claves a nuestro depósito. 20. Método Iremos e instantáneamente 10. Se comió una billetera ahora igual presupuesto y vamos a consejo dot log ¿Qué? Que si bien en realidad parece como guardamos, vemos un objeto con una sola función. Un depósito, 20 función. Adelante y llamemos al depósito 20. Ahorremos y boom deposite 20. Parece que funcionó, pero realmente no podemos decir lo que realmente sucedió. Entonces para revisar nuestro saldo, vamos a agregar un cierre de función de cheque ahora al presupuesto. Por lo que CONST cheque igual devolver lo que es actualmente el saldo. Y ahora agreguemos eso a nuestra lista de funciones, así que chequear mapas a chequear se ahorraría, y después de depositar 20 no podemos constituir log un cheque del monedero y boom, te re multado 20. Regresa a nuestro cónsul, que se actualiza después de cero. Genial. Entonces la pregunta es, ¿por qué no podríamos simplemente comprobar el rebote de punto de la cartera? Probemos ese saldo de punto de cartera. Vamos a tímido cónsul punto registrándolo justo después del cheque. Vamos a ahorrar y tenemos indefinido. Eso se debe a que no estamos devolviendo saldo dentro de nuestro retorno. Objeto para el presupuesto real eran sólo métodos de devolución que tienen acceso al presupuesto, pero no el saldo presupuestario real en sí. Esta no es una variable privada en cuanto al uso de cierres y la función bastante cool. Entonces esto es impresionante. Tenemos a cierres en nuestra función presupuestal. Ahora agreguemos 1/3 1 ahora al entorno léxico. Retirar 20. Eso cambiará el saldo en negativo 20. Por lo que Const retirar 20 igual a función de flecha que apenas cambia el arco por 20 negativo lo que restará 20 del presupuesto general que sumará un retiro. 20 Llamar Retirar 20 y cualquier cosa sobre objetos es que cuando las claves y los valores son exactamente iguales, India seis. Ni siquiera tenemos que especificar la sintaxis de colon. Solo podemos especificar una palabra clave de inmediato y devolver los métodos relevantes. Bonito truco de sintaxis taquigrafía de Essex que hace que las cosas se vean realmente bonitas. Por lo que ahora retiremos 20 antes de nuestro cheque de presupuesto Empate. 20. ¿ Qué hay en un par de llamadas más para depositar? 20. Saca esta pelusa extra. Vayamos a revisar el saldo después de este primer depósito off, 20 es más 20. Retirar 20. Vuelve a cero y un par más de veinte depósitos. Deberíamos conseguir de 40 a medida que ahorramos. ¿ Qué vemos? 40 pavos por nuestra sopa de billetera. Endless. Simplemente usamos cierres para definir métodos de acceso público que acceden a métodos privados dentro de nuestro presupuesto general Variable. El uso de cierres para lograr este efecto se llama el patrón de módulos en JavaScript y E Essex. Los cierres generales, en combinación con métodos privados, tienen grandes beneficios. Los métodos privados no sólo restringen el acceso sino que mejoran significativamente los programas y hacen que el adeudo sea más manejable manteniendo las funciones esenciales separadas de las funciones, en particular a un cierto espacio de nombres locales. En consecuencia, el espacio de nombres globales para todo nuestro programa se ve Pierre y limpio. Excelente. Sigamos adelante 15. Presentación de generadores: Discutamos una característica que trajo mucha emoción. E un seis generadores con los que pueden sentirse extraños trabajar al principio, pero con algunos ejemplos. Y después de sumergirse en el código, verás por qué los generadores resultan tan útiles en E A. Seis. En primer lugar, los generadores rompen las carreras típicas un modelo de finalización para funciones normales, es decir, cada vez que corremos, una función que esperábamos completar antes de seguir adelante en el programa. Por lo tanto, otras expresiones y declaraciones sólo pueden ocurrir una vez que una función ha terminado. Los generadores como un tipo diferente de función pueden pausar en el medio o en múltiples momentos y reanudar de nuevo posteriormente función de depósito en un generador, utilizamos un rendimiento de palabra clave especial, y para reanudar la función, hacemos una llamada al método especial punto siguiente. Generadores permite entonces construir cosas muy útiles, como funciones con flujo controlado y versiones simplificadas de generadores. Muy bien, hagamos girar estos engranajes de codificación y empecemos a trabajar con generadores 16. Definir un generator: Vamos a saltar. Está creando nuestro primer generador. Esa sintaxis para un generador utiliza la palabra clave de función seguida de un asterisco. Nuestro primer generador sólo se llamará creador de cartas. Vamos a definirlo ahora, así que función asterisco creador de letras. Es una función por lo que tendrá un cuerpo denotado por llaves. Muy bien, recordó la idea de un generador que el generador introduce. ejecuta el flujo controlado en las funciones. Entonces, en lugar de seguir el modelo de corridas hasta la finalización, podemos crear funciones con capacidad de pausa y reanudación. Entonces, de nuevo, ¿cómo hacemos una función que pausa? Devuelve su valor actual cuando se pausa. Bueno, usamos una U de palabra clave a tres rendimientos para el creador de letras, y simplemente rendiremos una lista de caracteres uno a la vez. En primer lugar cederá el personaje A luego cederá el personaje. Ser entonces cederá el personaje. Ver Ok, ahora que tenemos un generador muy básico, vamos a crear una instancia de este generador y averigüemos cómo acceder a sus patas Valores un rendimiento a la vez. En primer lugar declaró una nueva instancia de este creador de cartas y lo llamaremos carta. Jen deja que la letra Jen igual fabricante de letras note que no usamos la nueva palabra clave al definir instancias de generadores. Genial. Ahora finalmente podemos revelar cómo acceder al estado rendido en cada rendimiento dentro de nuestro generador para acceder al rendimiento o pausa dentro de la función del generador. Utilizamos el método dot next siguiente, da un paso dentro de nuestro generador y devuelve el estado actual de ese generador. Y entonces podemos acceder a ese estado de retorno usando el valor. Muy bien, así que llamemos a Sadat log una llamada de la letra James dot next método carta jane dot Siguiente, y luego vamos a seguir adelante y acceder al valor de retorno. Pero ahorrar y boom. Obtenemos una presentación en nuestro cónsul Awesome en un par de troncos de cónsul más idénticos, y encontraremos cada rendimiento. Tan bueno. Copia y pega esto un par de veces y deberíamos conseguir ABC. Ahí vamos, ABC. Veamos qué pasa si tratamos de acceder al siguiente valor después de ABC. Nos quedamos indefinidos porque no tenemos ningún rendimiento definido y hemos llegado al límite de nuestro generador. De acuerdo, vamos a trabajar con un ejemplo más práctico, un generador que rinda un contador uno a la vez, por ejemplo, Imagina que este generador hace un por ejemplo, seguimiento de los clientes en tu tienda de tecnología. Cada vez que alguien camina por la puerta, el generador devolverá el siguiente valor. Lo bonito de este generador en comparación con otros métodos será que no importa con qué frecuencia lo llames, cuántas veces lo llames o a qué hora lo llames. Siempre devolverá el siguiente valor así definido el generador como conteo, creador, función, asterisco, creador de conteo, cuerpo de llaves y dentro del fabricante de conteo definirá variable de cuenta. Dejar contar igual a cero en. La idea con este generador será arrojar tres conteos. Tenemos un límite de tienda de tres, y una vez que la cuenta sea mayor de tres, el generador ya no devolverá un valor. Para ello, agregaremos una condición al conteo valioso y mientras sea menor a tres rendirán nuestra variable de conteo agregando una a sí misma. Por lo que mientras el conteo sigue siendo menor a tres rendirá conteo más igual a uno. A medida que ahorramos. Hagamos una nueva instancia de este generador de conteo. Por lo tanto, que Conde Gen Igual Count maker Vamos adelante y consejo no registre un montón de llamadas al recuento n punto Siguiente, accediendo al método de valor. Por lo que 123 y cuatro a medida que ahorramos, obtenemos 123 e indefinidos como se esperaba. Genial. Ahora podemos seguir adelante y ceder cuatro si quisieras después de tres solo aumentar el límite para contar es menos de cuatro y obtenemos un contador del dedo del pie. 1234 Impresionante. Vimos algunas implementaciones fundamentales del nuevo generador ES six, y son casos prácticos de uso. Por ejemplo, lo que acabamos de ver con el generador de Count Maker también se puede extender a un sistema para hacer I DS. Es decir, el generador seguirá generando nuevas ideas para los usuarios uno a la vez, asegurando que siempre sean únicos. Pero en un formato muy controlado e interino, no importa cuando un nuevo usuario se registre donde los dos minutos después del último usuario, dos horas o incluso dos semanas, este generador devolverá el siguiente i d para el nuevo usuario y un número adecuado. Ahora que hemos visto este caso de uso, vamos a continuar y sumergirnos en algunos o involucrados usos del generador en E s seis 17. Controlar el flujo con generadores: trabajará ahora con los generadores involucrados MAWR. Continuar explorando el concepto de rebaño controlado. Averigüemos cómo agregar una capacidad reciente a nuestros generadores. En primer lugar, crearemos un nuevo generador que enumere los números pares, empezando por dos para encontrar un nuevo generador y llamarlo función iguala. asterisco iguala el cuerpo de la función como aparatos ortopédicos. Como de costumbre. Vamos a inicializar la variable contable ahora y establecerla en recuento cero igual a cero. Y ahora hagamos algo considerado cerca de la blasfemia. En el ámbito de la programación se agregará un bucle que nunca podrá detenerse mientras que verdadero, que siempre será cierto. Cuenta más es igual a dos. Entonces vamos a seguir adelante y la cuenta de rendimientos ahora, el bucle while Untrue nunca puede romper en una corrida un modelo de finalización. Esto nunca saldría y causaría un bucle infinito. Esta es en realidad una notoria pieza de código. Un profesor de informática podría decirte que nunca escribas en uno de tus cursos introductorios , pero con los generadores nos gusta vivir al borde. Hacemos caso omiso de ese consejo y utiliza bucle peligroso a nuestra ventaja. Entonces veamos en acción creando una nueva instancia de arte iguala generador let secuencia iguala Vamos a seguir adelante y llamar al registro de puntos una primera llamada del estado de rendimiento, por lo que secuencia punto siguiente accediendo al valor. Sigamos adelante y copiemos esto un par de veces más. Ahorremos y llegamos a 46 como se esperaba. Y esto mientras que loop no está rompiendo nuestro programa ahora, podría estar preguntándose cómo va a volver a establecer exactamente la variable de cuenta no parece que podamos hacer mucho dentro de aquí. Bien recordó ese punto siguiente método especial para los generadores que estaban usando aquí mismo. Bueno, tiene un parámetro opcional que podemos usar el estado pasado a nuestro generador. Cualquier cosa que pasamos como parámetro a la siguiente función puede modificar el estado interno y comportamiento de nuestro generador. Por lo tanto, actualice el generador igual que así, establezca el recuento de rendimiento en una variable de restablecimiento. Aquí, el reinicio se ve de lo que sea que se pase al generador y lo comprueba en una declaración de rendimiento . Muy bien, Y entonces, si el reinicio es verdadero, así es igual al verdadero. Pero sólo podemos decir que si un reinicio en sí es cierto, eso irá adelante y volverá a poner el conteo a cero. Como se ve, la declaración de rendimiento no sólo devuelve el estado actual sino que también verifica el estado pasado al propio generador. Entonces tenemos una simple declaración if que devuelve la cuenta a cero si esa declaración de rendimiento alguna vez evalúa la verdad. Muy bien, veamos esto en acción. Vamos a mantener estos registros de secuencia start next stop value. Pero después, vamos a contar adulto log secuencia dot siguiente valor de punto verdadero y luego conseguiremos no registremos otra llamada al punto de secuencia siguiente valor de punto y vamos a revisar los valores devueltos aquí mientras guardamos Boom, nosotros conseguir 246 Pero luego pasamos. Fiel a la función iguens, Serie set se convierte en realidad. Vuelves a poner atrás a cero y rinde un plus a cuenta. Impresionante. +246 a 4. Ya hemos descubierto cómo restablecer nuestros generadores. Nunca se recuperó. Restablecer. Pasemos a aún más formas en las que podemos aprovechar los generadores E S seis 18. Generadores vs: Discutamos los generadores en comparación con los generadores en JavaScript y ES six y generador en cualquier lenguaje de programación accederá a los elementos de una colección o matriz uno a la vez, y realiza un seguimiento de su posición tal como lo hace en JavaScript. Al igual que el generador, podemos definir nuestro propio integrador con el siguiente método que devuelve el siguiente valor de un pasado por derecho. Vamos a crear nuestro propio generador ahora, que no será un generador, sino nuestro propio generador artesanal desde cero. Definir un concepto llamado Generador de matriz, que será una función de flecha con una matriz de parámetros. CONST. Calificado. Aireador es igual a matriz. Aquí está nuestra función de flecha y genial. Ahora, dentro de este generador, necesitamos definir el punto de partida. Asignado una nueva variable de índice 20 con el alcance inter evaluador de matriz. Dejar índice igual a cero. A continuación se devolverá un objeto para este generador con la siguiente palabra clave que se mapea a un aire de función. Regresa a continuación y tendremos una función de flecha. Genial. Ahora todo lo que nos queda es el anuncio la lógica real dentro. Siguiente para devolver el siguiente ítem en array e incrementar el índice en uno cada vez. En primer lugar queremos comprobar si el índice es menos cosa, la vida del terreno. De esa manera, nuestro generador sabe que se detiene una vez que el índice supera los límites de las matrices, y luego almacenaremos temporalmente el valor actual dentro de la matriz. Indice entonces aumentará el índice en uno y finalmente devolvió esa variable temporal. Entonces, agregémoslo, lógica justo dentro del siguiente alcance del cuerpo. Por lo tanto, si el índice es menor que la longitud de punto de la matriz, asegúrese de que todo esté formateado correctamente. Dejar a continuación igualar el índice de matriz actual. ¿ Eso incrementará índice en uno, y irán cabeza y rendimiento y regresarán más bien esa siguiente variable. Ahora vamos a trabajar con nuestra propia función iterada personalizada creando una instancia y pasándola matriz de 123 Así que digamos que t es igual a array it aireador pasando en 123 que es solo una matriz para usar por ahora y entonces vamos a seguir adelante y consejo dot log algunos próximas llamadas. Entonces, vamos a iniciar sesión. Yo afiné a continuación y echa un vistazo. Ahorremos y boom en nuestro consulado, obtenemos uno, que es el primer valor que pasamos en nuestro er iterado. Vamos a hacerlo. Un par de veces más deberíamos conseguir 123 Hagámoslo una vez más y vemos que finalmente regresa indefinido una vez que pasa la vida del array dot. Muy cool. Ahora este generador funciona para pasar por la matriz un elemento a la vez, Pero con los generadores, tenemos una poderosa alternativa saliendo el código del generador. Tan sólo un tenerlo como referencia. Es un buen comando slash. A continuación, crearemos ahora en ES six generator. Entonces función, asterisco una tasa y más roja, que ahora es un generador dentro del generador. Tenemos acceso especial a una palabra clave llamada Argumentos, que comprueba lo que pase cuando llamamos a nuestro integrador de arreglos. Está bien, entonces está a un rendimiento a los argumentos reales. Palabra clave. Harán una instancia de aireador nominal R y lo pasarán en valores de 123 Hasta el momento, I t igual aireador nominal R. 123 Vamos en seguro log una llamada de i t punto Siguiente, encuentra el valor actual que ahorras. Obtenemos array de 1 a 3. Está bien. Bastante cool, excepto que queremos ceder estos valores uno a la vez en lugar de como en la matriz de neumáticos. Entonces emulará el comportamiento de nuestro generador original, pero agregando cuatro bucle mejorado que pasa por cada argumento de forma individual y produce aquellos así en lugar de sus argumentos mejorar cuatro bucle para Let our of arguments entonces en cada instancia cederá el propio Argh. ¡ Vamos a salvar boom! Obtenemos el valor actual de solo uno. Añadamos un par más y deberíamos conseguir 123 Awesome. Sepa que esencialmente hemos utilizado una palabra clave yield tres veces en este bucle. Bueno, es seis nos proporciona un atajo. Siempre que usamos yield más de una vez en una fila, podemos simplemente usar un asterisco de rendimiento, sintaxis y reformar el bucle de cuatro en una línea con argumentos de asterisco de rendimiento, argumentos A medida que guardamos, obtenemos un traje tres. Igual que antes. Genial. Ahora tenemos un generador muy reducido que imita completamente el er personalizado o reiterar que recreó originalmente impresionante. Esto cubrió, um, o tema avanzado dentro de JavaScript y E s seis en general. Y si planeas codificar en idiomas en más de solo Js y él s seis, entonces los aireadores se mostrarán en todas partes con e six, aunque los generadores te permitirán acercarte a los programas de avance MAWR y crearlo más efectivo Aireadores. Recuerde, los generadores tienen esa funcionalidad de pausa de inicio y restablecimiento con el rendimiento práctico, palabra clave y siguiente método. Está bien, sigamos aprendiendo s seis. 19. Presentar programación y promesas con programación y sinónimos: Vamos a sumergirnos en el concepto de una programación sincrónica en JavaScript y E. Un six First Off definirá la programación asíncrona, pero primero aclarando las diferencias entre los programas sincrónicos y los programas sincrónicos . Cuando nos referimos a programas sincrónicos, nos referimos a aquellos que se ejecutan en secuencia de arriba a abajo. Estos programas pueden o no enfrentar operaciones de bloqueo que afectan su tiempo de ejecución. Por otro lado, los programas asíncronos se refieren a aquellos que se ejecutan en un motor en bucles, lo que significa cuando ocurre una operación de bloqueo, como una red solicita a un servidor que puede tardar un tiempo en pasar. El secreto A es Code Die. Burt es la operación a un manejador diferente. Por lo tanto, esto mantiene un programa funcionando sin que ocurra nunca un bloqueo. Entonces, lleguemos a la importante pregunta que nos ocupa. ¿ Por qué necesitas saber de un secreto? Es programación, ¿ y por qué importa? En primer lugar, las interfaces de usuario fuera y los navegadores son asíncronos por naturaleza. Después de todo, los navegadores U. N. N.maneja eventos como clics de botones, movimientos masivos y envíos de datos una sincrónicamente. Piensa en el hecho de que estos eventos llegan a suceder en momentos impredecibles en el tiempo. Por lo tanto, en un modelo sincrónico Esto provocaría un bloqueo constante para el usuario siempre que el motor tendría que manejar cada nueva solicitud y esperar a que termine con una programación sincrónica , sin embargo, este problema está chupado. Si el usuario envía una nueva solicitud de función, esa función se desvía a un manejador. Bueno, el usuario ve una respuesta, y la respuesta se procesa en segundo plano. De esta manera, un secreto es la programación nos permite interactuar con bases de datos, servidores y ojos de AP públicos, porque las operaciones con estas tecnologías podrían tardar algún tiempo en completar la India. Seis. Podemos seguir un modelo de un secreto es programar y manejar funciones que tardan tiempo en completarse con promesas. Las promesas nos permiten manejar procesos asíncronos representando valores que en algún momento regresarán en el futuro. Las promesas pueden existir en uno de los tres estados siguientes pendientes, cumplidas y rechazadas, que, respectivamente, cuenta de la situación actual de las promesas en el cumplimiento de la función. En última instancia, las promesas introdujeron una gran manera de manejar la programación asíncrona en Essex y definitivamente aparecerán en cualquier programa y proyectos de Essex que codifices en el futuro. Entonces empecemos a explorar promesas y programación asíncrona 20. Promesas: empecemos con la sintaxis básica para una promesa en ES seis. En primer lugar, declare nueva variable y un signo de que el resultado de llamar a un nuevo constructor de promesa dentro del constructor tendrá una función estrecha. Con dos parámetros, se resolverá el 1er 1 y el siguiente será rechazado. Tanto resolver como rechazar representan manejadores en la promesa que dan una función para actualizar el estado de la promesa. Resolver manejado, promesa exitosa Las llamadas rechazarán pedales, promesas que no pueden determinar de valor. Primero exploremos esa promesa resolviendo un valor futuro. En primer lugar, resolvamos una cadena que acaba de resolver promesa. Date me. Ahora necesitamos una forma de determinar cómo acceder a estos datos de promesa. A menudo se escucha el concepto de acceder a los datos de promesas como consumir el proceso. Para ello. Reutilización de promesas punto entonces método, que acepta una función que obtiene un valor de retorno de promesas una vez que se cumple. En este caso, llamaremos a esa función que obtiene la respuesta de valor de promesa de retorno eventual. Por lo que en una llamada a punto p entonces tendremos una respuesta con una función de flecha. Y simplemente cónsul dot registremos esa respuesta. Sigamos adelante y guardemos y se resuelva la respuesta. Promesa datos. Muy cool. Muy bien, ¿qué tal una promesa que no devuelva datos con éxito sino que la rechaza? ¿ Cómo podríamos crear ese tipo de promesa y manejarla? Además, modifiquemos la promesa de rechazar un valor estándar para la promesa en lugar de devolver uno resuelto. Entonces en lugar de resolverse, usemos la función de rechazo para rechazar los datos de promesa rechazados. Observe que ahora vemos en el aire con nuestro cónsul que tenemos datos prometidos no capturados de nuestra entonces declaración. Esto nos da una pista de exactamente qué función de manejador llamar con el fin de ver los datos rechazados . Entonces al lado de entonces, podemos agregar una declaración de captura de puntos para atrapar ese valor. Entonces punto atrapar y este toma una función de flecha interna también. Entonces hacemos aire y consejo no registremos ese aire específico ya que ahorramos. Notamos que hemos rechazado los datos prometidos ahora en nuestro cónsul tan gran aviso que tenemos una cadena de funciones ahora la primera, luego declaración comprueba los datos resueltos en la promesa y cuando no encuentra ninguno pasa el flujo de control a nuestra declaración de captura. Esto tiene el efecto de encontrar la promesa, aire y consumo se prometen datos. Hagamos una distinción más importante con promesas. Recuerde, las promesas representan stand en valores para los datos, sin embargo, las promesas a menudo pueden tardar tiempo en procesarse. Esto incluye aquellas funciones que tratan con los servidores Ojos AP o redes que pueden necesitar tiempo para procesar los datos antes de devolverlos. Entonces examinemos los efectos de un secreto. ¿ La programación con una promesa que no necesariamente resuelve de inmediato una vez más modifica la promesa? Esta vez usamos una función de tiempo de espera establecido, y resolveremos algunos datos de promesa. Por lo que en un llamado para resolver los datos prometidos resueltos. Y luego nos aseguraremos de que esto no sea retorno hasta que hayan pasado 3000 milisegundos o tres segundos . Ahorremos pero estando después de tres segundos. Pero, uh, uh, boom resolvió los datos prometidos. Enfriar. Ahora hagamos una distinción. ¿ Y si agregó cónsul dot log a después de consumo de promesa después de la declaración entonces real ? ¿ Qué esperas que aparezcan primero, el consumo después de la promesa o nuestra promesa? Bueno, medida que ahorramos, vemos después de la concepción de la promesa y luego tres segundos después nos resuelven los datos de la promesa. Bueno, este comportamiento imita lo que podríamos esperar de las promesas que interactúan con los ojos AP para las redes, la promesa puede tardar tiempo en completarse, pero aún así llegamos a correr el abrigo fuera de la función de promesa ya que es corriendo en segundo plano. En última instancia promete, permite y maneja con precisión procesos asíncronos en segundo plano mientras ejecutamos otro abrigo. Genial. Acabamos de cubrir los fundamentos de la creación de promesas en Essex. Sigamos explorando las promesas con un ejemplo más práctico y en profundidad para ilustrar su verdadera utilidad y poder. 21. Presentar métodos de tratamiento de HTTP y fetch: y ustedes seis. Tenemos los inicios de una nueva A P que llamé Fetch, que nos permite interactuar con Internet Resource es a través de programas Js para sentar una base sólida para este tipo de programación. Cubramos otro concepto fundacional en el desarrollo web y la World Wide Web. En general, http. O protocolo de transferencia de hipertexto define una base para la forma en que los datos se comunican a través de Internet. Por ejemplo, observe que en un navegador al principio de una u. l. Siempre verá las letras Http. Bueno, este Http está especificando un esquema para el sitio web para un mensaje de solicitud específica para enviar a un servidor. El servidor proporciona luego Recurso se basa en la solicitud http, como archivos HTML y otro contenido como imágenes para el navegador a Sirte. Podemos utilizar varios tipos de métodos de solicitud http con el fin de especificar exactamente qué acciones entonces realizar En primer lugar, la más común el método get representa la solicitud http que solo recupera datos y no tiene efecto secundario. Por lo general el método get. Convertiremos html como recurso u otros datos como un objeto Jason JavaScript. Como resultado, no, no, que Jason es un formato de archivo alternativo para JavaScript que esencialmente hospeda objetos de script de trabajo grandes como un archivo grande. A continuación, el método de publicación realmente envía datos a un servidor con el fin de que éste agregue un recurso es o actualice los existentes. Esto va desde cualquier cosa por lo que destruir un correo electrónico dentro de una lista o actualizar comentarios en un tablero de mensajes o agregar nuevos valores a las bases de datos. Otros ejemplos de métodos http incluyen el head, que a partir de la metainformación como el título de un recurso, el método delete, que elimina un recurso especificado. Y el método de parche, que sólo modifica parcialmente el recurso que más a menudo ves conseguir y publicar en acción. No obstante, al tratar con nuestras propias bases de datos y servidores, así como al interactuar con una P s. De acuerdo, preparémonos para retumbar y codificar con ojos AP y buscar 22. APIs y fetch de ES6: en JavaScript. Contamos con una nueva tecnología llamada Fetch, que brinda acceso al uso de métodos de solicitud http para usar fetch. Pasamos por el método fetch, la ruta del recurso. Queremos datos de, incluyendo cualquier especificación. Entonces esta función retornos son promesa conteniendo los resultados de esa llamada. Se trata de fondos pueden o bien devolver un aire rechazado o un éxito de resultado como se vio anteriormente en la exploración de promesas. El consumirá promesa entonces contiene todos los datos relevantes que queremos del recurso. En una nota rápida, el Fetch a p I sigue siendo considerado actualmente en tecnología experimental y no soporta todas las versiones del navegador. Y si estás usando versiones más nuevas de chrome, Firefox o safari, sin embargo, deberías estar bien. Está bien. Para realizar un fetch necesitará un recurso de primera toma datos de Had to Jason marcador punto tipo un código dot com Aquí mismo. Aquí tenemos una herramienta que simula un A P I para propósitos de prueba y creación de prototipos. Es totalmente funcional y nos permitirá visitar Resource is y agarrar pseudo datos como forma aprender. Esto ilustrará perfectamente la capacidad del método fetch porque no es necesario comprar ningún té de autenticación para esto, un p I o incluso registrarse como usuario para comenzar a interactuar con él. Ahora es completamente gratis. Una vez que escuches, desplázate un poco hacia abajo y encontrarás una lista de recursos y rutas disponibles. Haga clic en la carretera que dice post slash uno. Esto te llevará a una página donde encontrarás algún retorno Jason Data que contiene cosas no consecuenciales como un usuario i d. un título y un componente de cuerpo. Para ir por nosotros será usar un fetch a p I para ver este objeto Jason dentro de nuestro programa. Muy bien, entonces Paso uno, vamos a copiar la U. R L en un signo de constante llamada ruta dentro de nuestra función. Establecido a que eres así es Jason marcador de posición punto tepco dot com slash posts slash uno. Por lo que const raíz es igual a que fuiste l en una fuerza. Ahora usemos el método fetch. Toma nuestra ruta para el primer parámetro, y luego podemos especificar cualquier especificación con un objeto como su segundo parámetro. Y nuestras especificaciones específicamente para este será un método que es el método http get en todos los caps. Muy bien ahora, igual que una función. Consumimos el resultado con una declaración de entonces porque es una promesa. Entonces punto luego respuesta. Y vamos a seguir adelante y consejo no registre esa respuesta por ahora. Voy a ir a hacer un escabullo. Vamos a ahorrar. ¡ Vuelve a nuestra aplicación y boom! Obtenemos una respuesta cuyo estatus es de 200 en última instancia. De acuerdo, echemos un vistazo a la llave pro Doe dentro de aquí. Observe que tenemos un montón de métodos útiles dentro del prototipo de objeto para la respuesta . El que se interesó principalmente es el Método Jason. Vuelve la función Jason a su vez. Otra promesa que regresará son puro Jason Data. Ahora, medida que regresemos, esto introducirá el concepto de encadenar promesas, cada respuesta de retorno que Jason pudiéramos manejar. El regreso Jason de esta promesa con otra declaración que no. Entonces modifique y así así, en lugar de registro de puntos de consejo, la respuesta devolverá punto de respuesta Jason y ahora dentro de otra declaración entonces con esta promesa de cadena podemos manejar el Jason que encontramos y simplemente consejo. No registremos eso a medida que guardamos boom, encontramos ese objeto completo que vimos anteriormente en línea. Nos dieron el cuerpo del I D el título y el usuario me d Muy cool. Por lo que fetch nos permite usar Resource está en línea justo dentro de nuestro programa. Imagínese si usamos otro A p I que publicara datos meteorológicos o reportes de ciudad. Por ejemplo. Podríamos usar estos ojos AP realmente complejos para construir aplicaciones realmente intrincadas, y podemos trabajar con ellos muy fácilmente usando el Fetch A P I y las promesas. Usemos un AP más dinámico ahora y sigamos explorando fetch con otro ejemplo Utilizamos otro raro AP gratuito que realmente hospedado por Google para devolver Jason Data sobre libros. Ahora detente conmigo como tecleamos esta u R l Pero valdrá la pena. Confía en mí. Por lo que la tu URL es http como qué días para seguro w w dot google 80 IES dot com Vamos a encontrar el recurso de libros. Estamos viendo la versión uno del FBI, por lo que v uno encontrar volúmenes. Empezamos la consulta con un signo de interrogación. Decimos Q es igual a spn. Y luego finalmente obtenemos un montón de números para representar nuestro hielo. BNC 0747532699 Muy bien, Así que esta es toda la cuerda. Puedes pausar el video y tomarte un momento para mirarlo para asegurarte de que lo tienes todo mecanografiado . Pero voy a seguir adelante y ahorrar, y mientras lo hacemos encontramos nuevos datos de Jason dentro de nuestro cónsul. Genial. Entonces podemos mirar los artículos, encontrar el objeto dentro de aquí confinamos la información de volumen y ver un montón de información sobre este libro, que es Harry Potter y la Piedra de Hechicero. Muy cool. Por lo que hemos explorado las peticiones http el JavaScript buscar un p I y encadenar promesas en acción todos juntos, trabajar con unos ojos P y manejarlas con promesas nos dará el poder de construir verdaderamente significativos es seis proyectos. Muy bien, pasemos a más temas en E s. Seis 23. Presentar ES7 y más en EcmaScript: Bienvenido a Acma Script 2016. La siguiente versión del guión Atma después de es seis. Esta versión se llama E s siete. Si bien muy pequeña actualización en el lenguaje, todavía es necesario repasar las nuevas características que incluye la actualización también explorarán algunas muy bien desarrollar propuestas de características en javascript que tienen una gran oportunidad de aparecer y comer. S ocho. En primer lugar Tiene siete tiene un nuevo operador para exponencialmente ation reemplazando el pensamiento matemático Pau Helper. Este operador de explicación hace que sea mucho más sencillo lidiar con el aumento de números por una potencia. A continuación se presentan siete apoyos de lanzamiento para un nuevo método dentro de una carrera. Este método dot includes hace que sea mucho más fácil comprobar si un elemento ya existe dentro una estructura tras la exploración de las nuevas siete características. Repasemos algunas nuevas posibilidades que puedes hacer tus apuestas por ver un E S A y la publicación de Atma Script 2017 una etapa muy alta s. Una propuesta incluye un mejor apoyo para acceder a los elementos de objetos. Los mapas hash y el script de trabajo incluyen métodos para acceder a los valores, claves y entrada. Específicamente, sin embargo, solo actualmente solo tendré soporte para el método de claves de punto de objeto. Entonces esperemos que eso s a despierta. Hace manipulación de objetos con un método de valores de punto y entradas de punto. A continuación, aquí viene una enorme propuesta que casi se abrió paso en E s seis y S siete, respectivamente. Un fregadero funciona un fregadero funciona aún más, soporta programación asíncrona en javascript. Manejan y devuelven bien las promesas, dejando que el código se ejecute en segundo plano sin bloquear que alguna vez le suceda al programa. Ya que verás un fregadero funciones introducidas. Aún mejor flujo de control más allá de las promesas cuando se trata de programación asíncrona. Por lo que explorar el propuesto un fregadero y esperar palabra clave será divertido y valioso. Muy bien, vamos a aprender todo sobre nosotros siete y más allá. 24. ES7: nuevas características: para comenzar a explorar S siete, necesitamos hacer un par de cambios en nuestra configuración de compilación. No es nada demasiado drástico. Tan solo un NPM en sal y otra cuerda en nuestro paquete dot Jason Fox. Por lo que en tu terminal, encuentra tu proyecto y ejecuta NPM install babble preset es 2016. Salvar la muerte. Una vez que terminé, vuelve a empaquetar punto Jason en tu proyecto. Encontremos paquete dot Jason y asegurémonos de que es 2016 se especifique como uno de los presets , bien, con el proyecto y figurado. Exploremos las nuevas características de S siete u ocho como 2016. En primer lugar. Para poder trabajar con exponentes, tradicionalmente hacemos una llamada a la biblioteca de matemáticas y utilizamos una función de poder así. Deja subir una metanfetamina igual. Cómo 25 Y como cancelamos Log A. Vemos 32 que es de dos al quinto poder. No obstante, en sus siete, tenemos un tiempo mucho más fácil logrando este comportamiento con la operadora X Mujeres ella asiática. Inspirado en otros lenguajes como Ruby, los exponentes tiene un nuevo operador simplemente parece multiplicarse. Señales interrumpen, así que cambia en ese pensamiento, amigo. Llama a veces cinco ya que registramos confidante A. Notamos que todavía recibimos 32. Exploremos la próxima nueva característica de ES siete de la que quizá estés al tanto. El DOT incluye método soportado por encoges en JavaScript, creado al igual que deja ser igual contracción. Maravilloso punto incluye maravilla como nosotros registro constante ser, deberíamos ver un valor verdadero. Entonces nos hacemos realidad. Vamos a probar si incluye mantequilla, para que guardes. No, no incluye mantequilla. Muy bien, por lo que la cadena incluye Método simplemente comprueba. Si lo que discutimos con él incluye se incluye dentro del encogimiento real. Sí, siete extiende este tipo de funcionalidad a una carrera apoyada por su propio punto Incluye cambio de método . Ser a una matriz y consejo no registre si incluye un cierto valor. Entonces hagámoslo también. 345 y seis. Vamos a comprobar si esta tarifa incluye para como ahorramos. Sí, nuestra matriz incluye cuatro. ¿ Qué tal siete? Entonces salvamos caídas? No Are Ray no incluye siete. Está bien. Después de cubrir el operador exponentes, cualquier array dot incluye método. En realidad hemos terminado de explorar todas las nuevas características. India siete. Ahora se necesita mucho incluir una nueva característica en una actualización a JavaScript. Y sólo porque sí siete fuera una relativamente pequeña no significa que no haya muchas ideas sobre cómo mejorar el lenguaje. De hecho, hubo un montón de propuestas a la lengua para S siete. No obstante, aún no hay plenamente desarrollado y existen en ciertas etapas de experimentación e implementación. Muchos de ellos, sin embargo, lo admiten cerca de convertirse en parte de un lanzamiento y muy bien podrían convertirlo en el siguiente . Simplemente lleva tiempo. Bueno, vamos a explorar algunas de las propuestas de etapa más tardía, sin embargo, y echa un vistazo a estas características. De esa manera, nos prepararemos para S A y el futuro de JavaScript. 25. Propuesta de ES8: manipulación de más objetos: nuestro primer s. Una propuesta hace mucho más simple una manipulación de objetos. Para poder trabajar con estas nuevas características, sin embargo, necesitamos insultar otro preset que puede manejar este nuevo abrigo. Vuelve a la terminal y ejecuta NPM. Instalar preestablecido balbucear sí, 2017 Guardar muerte. Y luego tendremos que hacer el cambio necesario para empaquetar dot Jason, pero agregando el preset ES 27 a nuestra lista de presets, así que asegúrate en paquetes fuera Jason, lo tienes así. Sí, 2017 en tu lista de presets. Genial. Con eso, repasemos una función que ya tiene un apoyo generalizado dentro del objeto. Teclas de punto prototipo, que gira todas las claves para un método para encontrar un objeto llamado OBS y le dará algunos datos rápidos solo para tener algunas claves y valores. Que AJ iguale a que es uno ser, que es a y viendo cuál será tres. Entonces definamos una variable llamada claves y la asignemos al resultado de llamar a los prototipos del objeto . Las teclas funcionan sobre nuestro objeto objeto como si fuera igual objeto las teclas de punto arriba, y como usted asesoró a las claves forajidas Presto, tenemos una matriz de todas nuestras claves, ABC Fantastic. Ahora, antes de esta propuesta de actualización para ensayo, sólo teníamos acceso a este método de claves de puntos Para el prototipo de objeto. No obstante, esto parece un poco incompleto. ¿ Y si sólo quiero mirar bien los valores, Por suerte, Por suerte, esto propuso él s una característica nos proporciona un método de valores de punto el cual solo vende, modifica el código a lo siguiente. Deja que los valores igualen los valores de objeto arriba en OBS y luego vamos a confidante registrar nuestros valores. Y voila! Tenemos una matriz de nuestros valores 12 y tres. Por último, junto con la función de claves y valores, tenemos otro método llamado entradas, que nos da pares de claves y valores. En Honore. Examinémoslo. Deje que las entradas igualen las entradas de objetos, dueño arriba y consejo dot log lesiones como guardamos boom array a cada una es un par de nuestro valor y clave. Entonces aquí hay un valor y clave clave y valor. Genial. Ahora tal vez te preguntes, ¿por qué es útil esto? Después de todo, tenemos los métodos de claves y valores, lo que nos da paso matrices más limitadas en las partes específicas del objeto que queremos. Consideraremos Iterar a través de la matriz para imprimir claves y valores. cumplieron estas entradas que lo hace más directo y haciéndolo con el método de claves DOT o valores de punto. Añadamos un bucle simple los bucles a hacer elevan en las entradas con el fin de imprimir. Nuestro objeto usará y mejorará for loop en este caso, por lo que para dejar entrada de entradas, entonces simplemente llamaremos a Sadat. Registrar el anillo de temperatura, que es nuestra clave es la entrada actual. Accederemos al primer elemento con una entrada. Entonces vamos a guardar el valor es el segundo elemento con una entrada por lo que uno vamos a ahorrar y boom ta valor. Una clave sea valor a en clave ver valor tres EU gracias a esta propuesta ES ocho tendrá un tiempo más fácil manipular objetos en JavaScript en el futuro con los valores DOT y, uh,el uh, método de entradas más allá de solo claves de puntos. Ahora hay una alta probabilidad de que estos métodos aparezcan en la próxima versión del guión Atma, por lo que es agradable saber de ellos incluso antes de sus características oficiales. Exploremos otro s una propuesta siguiente 26. Propuesta de ES8: Async: a continuación, pasaremos por una enorme propuesta de ensayo algo que en realidad casi se abrió paso a ES seis y siete y tiene enorme posibilidad de aparecer en la próxima versión del guión ECMO. Esto en realidad continuará nuestra discusión de promesas y programación asíncrona así Explora funciones enfrentadas en este s una propuesta. Las funciones de un sumidero tienen un propósito subyacente para simplificar aún más una programación de circo para el trabajo, desarrollador de guiones y programador. En primer lugar, podría recordar esta tensión entre una programación sincrónica o concurrente y programación sincrónica o secuencial. En un caso, el primero, tenemos la posibilidad de ejecutar múltiples procesos a la vez con el fin de acelerar la capa en programación secuencial. No obstante, tenemos un modelo de arriba a abajo. El debe ejecutar cada paso de método ignorantemente, aunque eso signifique que ciertas funciones tardarán mucho tiempo. Esto significa operaciones que podrían tardar poco tiempo para el usuario, terminan consiguiendo el tardío esperando el secreto, este programa para terminar por lo tanto un secreto. Son programas resuelven este tema enviando esa función de retardo a segundo plano y terminando el resto de las declaraciones. Una nueva propuesta de C implementa este tipo de programación con nuevas funciones que utilizan una nueva palabra de especialidad. Un fregadero, que es corto para que lo adivinó un sincrónico. Está bien. Con esa discusión, vamos a crear nuestra primera función básica llamada uno de fregadero, que simplemente devolverá una cadena. ¿ Qué tan una función de fregadero? Un fregadero uno. ¿ Cuál regresa? ¿ Ahora qué? Igual que una promesa. Consumimos los datos de retorno de esta función de enfrentamiento con una declaración then, así que ve y escribe un fregadero. Uno. Llama al punto de función Entonces encontraremos la respuesta y la deuda cónsul. Registra esa respuesta y boom! Obtenemos uno en nuestro retorno cónsul de función asíncrona. Genial. No examinemos la función de enfrentamiento que rechaza datos esta vez definirá y un sumidero al que sólo arroja un error. Es una función de fregadero, un fregadero para lanzará un nuevo objeto de aire que dice cuestión con un fregadero. Oh, no. Y al igual que antes con promesas, atrapamos cualquier error con una declaración catch, un fregadero para llamar a la función. Seguiremos adelante y atraparemos cualquier error y asesorados. Registra cómo se ve ese aire mientras salvamos a quien obtenemos tema de aire con un fregadero y obtenemos un bonito rastro de pila para ver donde realmente sucedió de Great. Exploremos el último estado de una promesa pendiente además, resuelta y rechazada y examinemos cómo manejar actualmente las funciones de procesamiento con la palabra clave await. En primer lugar, vamos a modificar. ¿ Las carreras para funcionar toe realmente resuelven algunos datos? Vamos a seguir adelante y volver a ahora. ¿ Y si quisiera combinar nuestro A fregadero uno y frente a dos funciones? Bueno, podríamos hacerlo con otra función a sink que espera el valor de ambos Con await, la palabra clave await pone una pausa en la función racing. No permite que continúe hasta que la promesa tenga algunos datos de retorno. Es muy útil para introducir el flujo controlado de nuevo en la función, especialmente si no quieres que el código se ejecute hasta que tengas el resultado de tu promesa. Exploremos esta nueva capacidad de despierto en una función llamada fregadero tres. Se va a quitar esta llamada y decir, una función de fregadero un fregadero tres. En primer lugar declaramos una primera constante de uno dicho para esperar palabra clave al llamar a un fregadero uno que sea confidante. Registra cómo se ve uno, y para const a vamos a hacer lo mismo pero esperaremos la llamada de un fregadero a y luego vamos a ir adelante y consejo dot log a. Y por último, agreguemos una llamada de su función asíncrona un Sink tres mientras guardamos. Y acabo de tener un pequeño error ortográfico. Entonces ve y arregla eso. Si cometiste el mismo error, aunque probablemente me viste hacer eso y como Oh, no , correcto, piensan que es Nick. Entonces ahí vamos. Nos dieron uno a en nuestro cónsul. Por lo tanto, note los dos usos de la palabra clave await. En primera instancia, la variable one se establece al resultado de la promesa de resultado, esperando su valor. No importa cuánto tiempo pueda tardar esta promesa en resolverse, lo mismo va para nuestro a constante. Espera a que las carreras funcionen para completarse, aunque eso signifique tomarse un tiempo para hacerlo. Es casi como hacer una pasarela dentro de nuestro programa asincrónico. Se asegura de que otro código más allá de la promesa esperada no se encuentre con los retornos prometidos de valor. De esta manera, realidad podemos escribir código que depende del resultado de la promesa. Después de todo, tenemos la palabra clave await para asegurarnos de que nuestras variables estén establecidas en una promesa que no será indefinida. Ahora, esta lógica extensas funciones que interactúan con un A p i o servidor. A menudo no queremos que la lógica continúe hasta que encontremos datos relevantes en nuestras funciones. Por lo tanto, la palabra clave U A asegura que no manipulamos datos que en realidad no son válidos, lo cual resulta muy útil para los ojos AP que solo pueden devolver datos después de que haya pasado algún tiempo . Aún así, uso de múltiples palabras clave await de esta manera especie de introduce un flujo sincrónico y secuencial de lógica Volver a nuestras funciones de sumidero A. ¿ Cuál es el propósito del as en palabra clave? ¿ Entonces? Si esto no va a introducir ningún acelerador con todas estas llamadas enfrentadas y esperar causa y por lo tanto negar la oportunidad de concurrencia, esa es una gran pregunta. Y la respuesta es, es importante usarte la palabra clave Esperar a tu discreción no agregues demasiados porque realmente saca la grandeza de la programación asíncrona en primer lugar. Para poner tiempo tomando funciones en segundo plano todavía esperan. En general viene muy a mano cuando queremos escribir código que de nuevo depende del resultado de una promesa. Exploremos una última característica dentro de esta propuesta básica. La función básica también se envía con una característica de punto de promesa todo, que maneja múltiples llamadas a funciones asíncronas de manera paralela. Declaremos nuestra cuarta y última una disfunción secreta un fregadero función un fregadero para. Usaremos la asignación estructurante para fijar tanto a uno detenido como a arresto en variable a la vez. Lo pondremos igual a la espera en Prometido en absoluto, que podemos usar para pasar una matriz de funciones asíncronas que prometen que todos llamarán concurrentemente civil a uno enfermo primero y luego un hundido a y luego finalmente pondrá raise uno y rojos a dentro de un confidente. Me encanta echar un vistazo a las constantes. Y luego finalmente, vamos a un fregadero. Cuatro. Llama al fondo de nuestro programa y echa un vistazo y ¡boom! Te conseguimos uno como se esperaba, porque prometen que todo corre ambos de estos al mismo tiempo. Impresionante. Esta característica propuesta de un fregadero y un peso ha existido desde hace un tiempo, y casi se abrió paso en Essex, pero los ingenieros detrás de un fregadero querían hacerlo perfecto por lo que simplemente no ha encontrado del todo su lugar en un lanzamiento aún. Definitivamente Seymour de la A se hunde y espera funcionalidades en el futuro de JavaScript , aunque afortunadamente, estarás preparado para usar estas funciones y comenzar a aprovecharlas con el fin de hacer que tu trabajo más fácil con métodos asíncronos como desarrollador y programador JavaScript. Por suerte, estarás a la vanguardia, conociendo todo sobre un fregadero y un peso incluso antes de que se libere oficialmente. 27. Ver previa de la aplicación de React: Bienvenido a Explorador de libros. Crearemos esta aplicación juntos demasiado rápido, introduciremos, reaccionaremos y reuniremos muchos de los conceptos que revisamos y Essex para ver cómo podría funcionar a la escala de una aplicación empresarial. Funciona así como así. Acude al campo de búsqueda y encuentra un título de libro para lo que quieras. Por ejemplo, busquemos a Harry Potter. A continuación viene una galería de títulos de libros con su imagen es relevante para la consulta que buscamos con Awesome. Cada título que cuenta con un componente clicable el cual nos navegará a su página principal, donde podremos encontrar más información para que vayamos. Encontramos su página principal en Google, cual obtuvimos de la aplicación dinámicamente. Al construir esta aplicación, aprenderemos todo sobre las ideas de reacción de JSX y Mawr Essential en esta sección y trabajaremos con los Google Books, un P I con el fin de agarrar nuestros datos. Esperemos que te diviertas mucho mientras aprendes reaccionas y reuniendo muchos de los seis conceptos de ES que aprendimos en este curso. Vamos a conseguir recubrimiento 28. Configuración y JSX: Empecemos a construir libro explora Para empezar. Tenemos que insultar algunos nuevos paquetes de NPM dentro de nuestro proyecto. Vuelve a tu terminal y carpeta del proyecto y ejecuta NPM Install que presintonizará reaccionar, reaccionar, reaccionar tonto, reaccionar, bootstrap y luego hacer una muerte salvada. Está bien. Esto instalará los presets que le dicen a nuestro archivo de configuración de paquetes Web que transpire. Reacciona Fox. Se insultará reaccionará en sí mismo y el reaccionar, Um, que maneja la representación reaccionar componentes en la interfaz de usuario del navegador. Y también nos dará el paquete React Bush, que facilita la venta en proyectos de reacción. En primer lugar, asegurémonos de que nuestro Pakistan Jason esté completamente configurado correctamente. Vuelve al paquete dot Jason y asegúrate de incluir reaccionar dentro de tus presets. Al igual que ahora vuelve a indexar tales es y empecemos a trabajar con reaccionar. Primero importar, reaccionar desde la biblioteca React, y luego vamos a importar el reaccionar tonto de reaccionar volcado y notar que estos son módulos por defecto Me. Ahora vamos a conseguir rápidamente algo renderizado en la pantalla con reaccionar. En primer lugar, sin embargo, vamos a necesitar dirigirnos a indexar punto html y hacer un cambio muy pequeño, así que ve a construir index dot html Necesitamos en un nuevo div justo encima del script que simplemente dice el i d es ruta. Ahora pondremos esta idea en ruta, y este día en realidad será utilizado por reaccionar para renderizar todo nuestro componente y aplicación . Genial. Ahora en realidad podemos usar esta etiqueta para renderizar componentes de reacción y para renderizar componentes reaccionamos utilizamos de paquete reaccionar abajo en Index Ducy s. vamos a renderizar un div rápido que solo dice reaccionar aplicación. Utilizaremos un método de render de brazos de reacción que toma dos parámetros el componente rojo que queremos renderizar y dónde renderizarlo en el HTML. Entonces diremos reaccionar tonto, no renderices bien aditivo que solo dice reaccionar aplicación Y luego para el segundo parámetro, especificamos de dónde vamos a conseguir que i d así documento dot get element, Pero yo d accederé al uno de raíz muy fácilmente. Ahora, también notan que parece que estamos usando HTML en nuestro fop de JavaScript. No obstante, esto en realidad no es html. Se llama J s ex JSX en Essex en XML like o html like sintaxis markup a JavaScript con el fin de Mary componentes de una pantalla. JSX es una estructura que usamos dentro de reaccionar para crear nuestros componentes ya que guardamos aviso de que nuestra aplicación de reaccionar def aparece en el zoom en el índice real R. J s haga clic aquí y boom, Ahí vamos. Reaccionar aplicación. Muy bien, Siguiente arriba. Vamos a exportar esta lógica a otro módulo obtendrá reaccionar para aparecer desde fuera de este archivo de punto índice Js desde un componente externo. 29. Hacer un componente global: Vamos a crear un componente externo El host de JSX para aplicación primero, crear una nueva carpeta de componentes y dentro de eso, crear un archivo llamado Global Daja. Sí, así que dentro de la aplicación, crea una nueva carpeta, componentes y luego dentro de los componentes creará un nuevo archivo llamado global dot Js. Ahora, dentro de Global Ducado s creará un componente de reacción. Componentes y reaccionan referidos a piezas de código independientes reutilizables que o bien lograron una función específica o representan parte de la interfaz de usuario. En este caso, nuestro componente global servirá como componente para toda nuestra aplicación de reaccionar. Por lo que dentro de Global Ducado s en la parte superior Adaline que las importaciones reaccionan como era característica componente de reaccionar genial ahora configuraría una clase y la convertiría en un componente reaccionar. Por lo que clase global extiende componente y nuestro bloque de llaves. Ahora, antes de que nos olvidemos, asegurémonos de exportar este componente global como componente predeterminado para este módulo que otros archivos puedan trabajar fácilmente con él. Por lo que exportar default, global impresionante. Ampliar esta clase como componente reaccionar ahora nos da un montón de métodos útiles que reaccionan proporciona con el fin de manejar los componentes de renderizado en la interfaz. Nuestra primera función especial de reaccionar será el método render que devolvió algunos Js x Nuestro JSX devolverá un did que dice el componente APP por ahora. Entonces agrega un método render devolvió algún JSX Un error común es omitir la palabra clave return y solo tener el JSX dentro del método render. Así que asegúrate de tener ese retorno y aditivo que dice el componente de aplicación global. Genial. Entonces eso es todo por configurar nuestro componente global dot Js Ahora con un punto índice Sí, importemos ese componente global que acabamos de crear. Entonces yendo importar global desde el directorio actual, encontrar componentes, luego encontrar global. Ahora necesitamos reemplazar un JSX de pie por nuestro componente global y entonces será una etiqueta auto envolvente porque no tiene ningún Children, ni los atributos irán a ahorrar y a boom. Nos encontramos con el componente de aplicación global Genial. Ahora que vemos el componente de aplicación global bajo pantalla, podríamos seguir desarrollando este componente de aplicación global y construir las características de book explore 30. Crear un componente de entrada: para comenzar a extenderse sobre este componente global creará un campo de entrada para esta aplicación que nos permita buscar libros para renderizar nuestro campo de búsqueda aprovechará ejes de reaccionar boo. Campos de entrada realmente agradables en la parte superior del archivo. Importar algunos componentes útiles de reaccionar. Bootstrap. Por lo que bajo importante componente reactivo de React and Import. El Grupo de Forma para Grupo de Entrada de Control y componentes de pecana glib de React. Bootstrap. Genial. Ahora actualicemos el campo render. Deshacernos de nuestro texto permanente y darle un tipo. Aprovecharemos la edad para encabezar a etiqueta Element y el título. Simplemente ser libro, huevo explorar. Digamos eso y bang, ahora tenemos un gran título. Reservar explorar. Déjame ver cantidad a su tamaño normal y nunca ir. Nuestro encabezado a se ve realmente bonito. Ahora seguiremos adelante y configuraremos nuestro componente de entrada. Ayudado por reaccionar. Bootstrap en la parte superior creará un grupo de formularios, pero conchas estilo bootstrapped. Esta sección como un formulario luego dentro del grupo de cuatro agregará un grupo de entrada, lo que hace un estilo en línea entre un control inter formulario, que maneja la entrada del usuario y un grupo de entrada add on, lo que hace un clic de un botón para manejar la presentación del formulario. Entonces vamos a agregar un boom de grupo de formularios dentro del formulario Grupo tendrá una ruta de entrada de grupo, y luego tendremos nuestro componente de control de formularios. Tendremos el formulario real donde el usuario puede escribir su información desde el campo por lo que este tipo será texto. Y entonces podríamos darle un Marcador de posición para que nosotros, el usuario, sepa qué escribir. Busca un libro. Y ahora este control de formulario en realidad no tendrá ningún Niños, así que podríamos convertirlo en un auto en etiqueta de cierre solo haciendo slash y la etiqueta de cierre. Y luego dentro de este grupo de entrada, vamos a añadir y añadir en para grupo punto. Añade y este será nuestro pequeño botón, que será un icono de glitch, pecan o acantilado que es buenos atributos serán de búsqueda. Está bien, vamos a guardar todo este nuevo JSX. Y luego obtenemos un bonito nuevo componente de campo de entrada, que dice, Busca un libro para que podamos hacer Harry Potter. Y mientras cocinamos el botón, aún no pasa nada. Entonces, a pesar de que esto se ve realmente bonito, necesitamos agregar alguna funcionalidad a esta entrada. Crearemos nuevo método de ayudante dentro de una clase de reacción llamada Search said Hazlo justo antes del método render. Añadamos una búsqueda. Seamos. Colóquelo arriba justo aquí y luego dentro de la búsqueda. Solo busquemos registro constante por ahora. A continuación añadiremos en el manejador de clic al punto de grupo de entrada Agregar en, y luego el manejador toma una función anónima, que apunta al método de ayuda al que queremos llamar, que será la búsqueda. Entonces en un click de grupo de entrada, vamos a tener una función de aire, que apunta a esta búsqueda de puntos. No, cuando ahorremos, asegúrate de que así se diga. Agregar en. Y a medida que guardamos, hagamos clic en buscar un par de veces y boom, nos están buscando apareciendo en nuestro cónsul Now. Este método de búsqueda, aunque funciona, necesita un poco más a él sería limpio si pudieras decir qué más fácil mecanografiado en el campo de entrada. Por supuesto, para hacerlo, necesitaremos contar con datos más dinámicos para nuestro componente de reacción que represente lo que el usuario escribe en los cuatro para encontrar una solución y espera. Agregar datos dinámicos. Pasemos al tema de estado dentro de las aplicaciones de reaccionar 31. Presentación de estado: vamos a dirigir el estado a este componente con el fin de que nuestra función de búsqueda reconozca con los tipos de usuario en el componente de control de formularios. Recuerda, Estado simplemente se refiere a esta idea. Esos datos son particulares de un componente de reacción. A medida que el usuario interactúa con su componente, el estado se actualiza y muestra los cambios de componentes relevantes basados en ese estado de actualización y los datos entrantes. Está bien, es en componente de tour marítimo. Necesitamos usar este constructor de clases dentro del constructor. Pasamos una props, palabra clave y hacemos una llamada a super props con el fin de reconocer cualquier dato entrante para este componente. Entonces, después de llamar a Super Props Week inicializar estado con de esta palabra clave de la clase y crear un objeto de estado, dijo el muy superior, vamos a llamar constructor, vamos a pasar props llamados Super Props. Entonces dije que podríamos inicializar un objeto de estado sobre esto dentro del objeto de estado. Vamos a tener una clave por ahora, qué cubas del valor de una fuerza de parpadeo para que simplemente sea una clave de consulta, que los mapas se adaptan a una fuerza de parpadeo impresionante. Ahora bajo campo de control de formularios, podemos agregar alguna lógica que graba actualizar este estado a lo que sea que el usuario escriba por lo que agregar en controlador de cambios al componente de control de formularios, que toma un evento que apunta a una función específica, son específicos. Función será reaccionar este método de estado de conjunto de puntos con el fin de actualizar nuestro estado al valor relevante que estamos obteniendo de la variable de evento. Entonces llamemos a este pensamiento. Estado bien, pasando un nuevo objeto. Echemos un vistazo a nuestra consulta original, y luego lo mapearemos al valor objetivo de punto de evento, que será una cadena que representa lo que el usuario escribe dentro del componente de control de formulario. Ahorremos como lo hacemos. Entonces vamos a escribir algunos datos nuevos. Entonces Harry Potter y parece que está funcionando. Simplemente no tenemos forma de comprobar si realmente funcionó por ahora. Entonces vamos a actualizar el consejo dot iniciar sesión buscar dedo del pie. Además, no registre esta consulta de punto de estado de punto. Ahorremos porque lo hacemos necesitamos retirar a Harry Potter. Pero una vez que hacemos y re click boom de búsqueda, obtenemos búsqueda. Harry Potter en nuestro cónsul grandes están actualizando característica de estado trabajado con este estado de conjunto de puntos y un control informado manejador sin cambios. Muy bien, Antes de seguir adelante, agreguemos otro controlador de eventos al campo de entrada. Eso hace que sea más fácil para el usuario interactuar en la aplicación simplemente presionando la palabra clave de retorno. este manejador se le llamará pulsando tecla y luego la pulsación de botón real registra una tecla de punto de evento y todo lo que tenemos que hacer es comprobar el evento. Daki es igual dedo del pie entrar. Así que lee después en cambio. Vamos a añadir de nuevo la prensa T. Vamos a ver el evento, pero esta vez vamos a revisar. Si evento dot Key es igual a entrar, y luego, si es así, vamos a seguir adelante y llamar a esta búsqueda de puntos. Ahorremos una vez más. ¿ Cómo sería esta vez? Busquemos Señor de los Anillos y notemos. No voy a hacer clic en el botón de búsqueda, pero presiona enter y boom! Tenemos una búsqueda de Señor de los Anillos. Está bien, ahora eso está funcionando. Pasará a algún estilo y en realidad haciendo que las funciones de búsqueda sean más inteligentes conectando un A p I y obteniendo algunos datos para toda esta aplicación 32. Styling con CSS: hagamos que esta aplicación se vea bien por hacer, así que vamos a añadir algo de estilo CSS al sí, volver al punto índice HTM. Ah, y antes que nada, agregaremos boot shop, una biblioteca CSS muy popular para que cualquiera lo use, lo que dará un montón de mejoras estilísticas desde el principio. Necesitamos un enlace del tipo de hoja de estilo, que apuntará al CSS en línea presentado para bootstrap. Así que navega a ti iniciando en bootstrap dot com. Así que consigue bush f dot com tal empezar y encuentras un enlace a lo último en línea compilado en hombres. Si CSS fop bueno, copia ese enlace y simplemente pasa el ritmo a la cabeza de tu componente html punto índice. Entonces saca este comentario. Asegúrese de que esta es una línea correctamente. Entonces, medida que guardamos, deberías ver tus navegaciones actualizadas en la aplicación. Danos ese fondo alternativo, que es muy agradable para nosotros. Enfriar. Por lo que usar este enlace bootstrap hará que nuestra interfaz de usuario luzca mucho más limpia debido a los estilos bootstrap que aún queremos en sus propios estilos personalizados. Encima de esto, así que crea otra solución, Klink y señaló un archivo CSS de punto índice dentro del directorio actual. Súbito Nuevo Enlace ¿Quién es el estilo rela? Ella en la h ref estará en el directorio actual encontrando índice punto CSS. Ahora tenemos que hacer que el archivo de índice punto CSS que archivo índice punto CSS dentro de nuestra carpeta de compilación en el primer estilo va a ser general, Globalstar dice dot global bien alineado todo al centro para el texto. También le daremos algo de relleno. Entonces de esa manera no está tocando los bordes. Ahora dentro de Duquesa global, necesitamos agregar una cláusula nombres que en general div y establecerlo en Global. Así que regresa a global dodgy s Eso le dará a nuestro div general el nombre de clase igual a global. Y a medida que guardamos boom como recarga note que las cosas ya no están tocando los bordes. Y nuestro título ahora está en el medio aviso de que no usamos una palabra clave de clase como todos los archivos HTML porque las clases ya reservadas palabra clave en JavaScript. Por lo que reaccionar nos permite especificar clases sin interferencia con la palabra clave class de javascript mediante el uso de los atributos class y name. Muy bien, sigamos enganchando esta aplicación agregando los libros de Google un P I a nuestro método de búsqueda y en realidad recuperando algunos datos 33. Encontrar libros: para libro Explorer aprovechará el libro gratuito de Google A P I, que fue una enorme colección de libros e información de libros a la que podemos acceder con simples consultas de búsqueda. Aquí está la A P I que vamos a utilizar y su documentación estaban interesados en esa característica que nos permite realizar búsquedas de texto completo y recuperar información de libros. A continuación, Aquí hay un ejemplo del endpoint real al que vamos a estar golpeando. Devuelve un gran formato Jason archivado con el tipo de libro que investiga los ítems que estaban consiguiendo en un montón de descripciones basadas en cada libro. Agradable. Está bien. Ahora vamos realmente a llegar a la cabeza de código de vuelta a la función de ayudante de investigación. Y primero, vamos a despejar una nueva constante, que será nuestra base. Tú estabas fuera. Diga, const base eres l igual a una cadena vacía. Por ahora, empecemos a listo el enlace. Entonces primero es un recurso http, Http, en uno seguro. Así s Golin slash slash Vamos a obtener el sitio web real, que es Google ap eyes. Encontraremos el recurso de libros. Estamos usando el primer número de versión. Estamos viendo volúmenes. El signo de interrogación comienza una consulta y Q igual nos permite especificar una consulta. Entonces una vez más es https. Google FBI dot com slash books slash b one slash volúmenes Muy bien, ahora necesitamos buscar los datos de una búsqueda específica en esta base. Estaban fuera y notaron que yo uso la palabra fetch. Supongo que se usaron A fetch a p Voy a buscar en el anillo de temperatura que combina base aérea aquí. L y la consulta que los tipos de usuario agregan un fetch en la cadena de plantilla con nuestra base, te earl agregando este estado actual de consulta Ahora necesitamos simplemente especificar que esto va a ser un método get http. Entonces diremos que su método es ponerse impresionante. Recuerda, consumimos la promesa con una declaración de entonces. Entonces respuesta. Devolveremos la respuesta que Jason, porque nos interesa la respuesta que Jason y luego vamos a consumir esa promesa con otra. Entonces, Jason y por ahora, pero simplemente confidante log cómo luce ese Jason. Sigamos adelante y guardemos nuestras actualizaciones de aplicaciones. Demos una búsqueda de Harry Potter y veamos si conseguimos algo de Jason un Awesome Tenemos un objeto enorme . Y esto es exactamente lo que nuestro ejemplo actual que vimos antes parecía este enorme objeto. Ahora lo tenemos dentro de nuestro cónsul. Fantástico. Ahora usemos estos ítems de libro que estamos consiguiendo en nuestro programa toe realmente actualicemos nuestra interfaz de usuario. 34. Agregar un componente de galería e presentación de accesorios: con el fin de representar nuestra lista de ítems de libro, vamos a crear un componente de galería que albergará todos nuestros ítems de libro recuperados. En primer lugar, igual que cómo el usuario actualiza un estado de consulta con la entrada. Vamos a actualizar algunos digamos, para reflejar nuevos datos dentro de nuestra aplicación en la clave de un elemento para el objeto de estado y establecerlo en una matriz vacía. Bueno, digamos ítems, es una matriz vacía dividida a continuación dentro del Jason Handler. Vamos a agarrar la clave de artículos de este Jason y asignaciones incluso artículos variable. Observe que vamos a utilizar la asignación estructurante sobre objetos para asignar la variable ítems directamente a la clave de ítems dentro de Jason. Después usamos nuevamente la asignación de estructuración para establecer el estado de su matriz de ítems a este ítem. Variable. Vamos a crear un bloque de código. Bueno, que los artículos dentro de las asignaciones estructurantes igualen a Jason. Entonces usamos es una asignación estructurante de taquigrafía sobre objetos en impuestos para establecer artículos, artículos del dedo del pie dentro de nuestro estado. Muy bien, ahora que nos hemos encargado de actualizar el estado a nuestros elementos extraídos, agreguemos un componente de galería a nuestra aplicación que maneja el renderizado de estos ítems crear un nuevo archivo dentro de la carpeta Components llamada galería dot Sí, sus componentes nueva galería de archivos dot jess ahora dentro de Gallery Ducy s lo configurará para ser un componente reaccionar. Por lo que importar reaccionar componente de reaccionar especificado en esta galería de clases extiende el componente para agarrar todas esas cosas de reaccionar para renderizar que renderizará y devolverá un básico diferir . Ahora eso simplemente dice componente de galería. Por lo que componente de galería. No olvides exportar por defecto. El galeria Genial. Ahora es importante galería dentro de nuestro componente global y conseguir que aparezca justo al lado nuestro campo de búsqueda. Por lo que importa Galería de Galería en Global Dodges, notando que esto debería ser Galería Dodge como así Vamos a seguir adelante y leer Nombre que toca galería. Ustedes probablemente captaron ese error. Voy a mover eso aquí para conseguir la carpeta. Está bien, Ahora que te has encargado eso parece que funcionan las galerías. Entraremos al componente de galería ahora junto a nuestro campo de búsqueda. Por lo que justo después de la búsqueda en una simple llamada a galería nunca ir. Vemos un componente básico de galería por ahora. Está bien. Ahora, nuestro componente de galería necesita saber acerca de estos objetos de búsqueda de libros Sin embargo, no queremos tener que agregar nuestra función de búsqueda a la galería también. Entonces, ¿cómo conseguimos que este componente infantil de nuestro global reconozca su estado y artículos retenidos? Bueno, aquí es donde entran los apoyos. En reaccionar. Props es muy similar al estado pero se refiere al estado de los padres más que al estado local de la aplicación Componentes recibidos apoyos de componentes de pares, pasándolos por atributos para que podamos especificar que pasará sobre el prop de un artículo a nuestro componente de galería con el valor de este punto artículos de punto estado. Entonces en galería, digamos que no tiene ítems atributos iguales a este que ST dot items Ahora dentro de la galería, podemos reconocer que yo era una tasa y configurar alguna lógica de renderizado con el fin de manejar la aparición de nuevos libros, ya que los estamos consiguiendo a través de nuestros apoyos. Entonces vuelve a la función de render. Añadamos alguna lógica que maneja el mapeo debajo de Ray para que solo podamos crear el número relevante de componentes JSX. No importa cuántos recibamos, mapearemos sobre cada artículo. Dentro de esta parada atesora artículos de un artículo a la vez. Está justo aquí. Añadamos un nuevo stand, un pequeño bloque de código. Vamos a ponerlo en estas líneas para que formatee bien. Entonces diremos este punto apoyos que los artículos puntan neto un elemento a la vez. Te das cuenta de que en una llamada de búsqueda cada objeto de libro dentro de los ítems tendrá un volumen en Foky. El volumen info contiene un montón de datos útiles, pero queremos el título en particular. Por ahora, usaremos la asignación de estructuración para agarrar el título del volumen Info. Por lo que deja título igual artículo punto volumen info, y esto agarrará nuestro título. Entonces lo devolveremos si eso solo muestra el título de cada uno de estos libros. Entonces devolvamos un div que diga Título y asegurémonos de no olvidar esa palabra clave devuelta. Se acerca un error olvidar esto, lo que introducirá errores en su aplicación. Si lo omitimos Genial. Sigamos adelante y guardemos y llevemos a cabo una nueva búsqueda. Entonces es como un par. Tú Potter podrías mirar hacia arriba lo que quieras, sin embargo, Y boom, ahí vamos. Obtenemos una lista de artículos. Ahora echa un vistazo a nuestro cónsul advirtiendo de que cada elemento en nuestra tarifa necesita una propiedad de mantener distinta en reaccionar. Esto es para distinguir los componentes de los hermanos entre sí. Por suerte, la función de mapa viene con un segundo parámetro opcional que realiza un seguimiento del índice de cada niño dentro de la función de mapa. Entonces reformarlos esa función para incluir ese segundo parámetro, y lo llamaremos Index y especificaremos que cada uno de estos dips el título tiene un atributos clave establecidos a ese índice. Por lo que una vez más, en un segundo parámetro de índice, la clave para este div será el índice. A medida que ahorremos, tendremos que realizar otra búsqueda. ¿ Qué tal El Señor de los Anillos y el Boom? advertencia desaparece ahora que cada sí tiene una propiedad de índice clave. Muy bien, tenemos una lista realmente genial, pero hagamos que se vea mucho mejor e interactiva aprovechando Mawr de los datos dentro de la información de volumen para construir ítems de galería aún más detallados. 35. Detalles de la galería: Hagamos que nuestro componente de galería luzca mejor mediante el uso de más datos de la propiedad de información de volumen . En primer lugar, aprovecharemos los enlaces de imagen que nos proporciona la información de volumen, y más adelante, pasaremos este dip a un componente clicable que nos envía a la página principal de cada libro. Vamos a establecer enlaces de imagen y enlaces de info toe item dot volume info junto con title asi vamos a agarrar o imágenes enlaces y nuestro link info de item dot volume info. Está bien. Ahora vamos a modificar nuestro dip para incluir la imagen en miniatura de cada libro, y la miniatura es una clave dentro de los enlaces de imagen dentro del DIV. Agrega una imagen de derecha por encima del texto y especificará que fuente es enlaces de imagen punto miniatura por encima del título en una imagen con un auto en etiqueta de cierre cuya fuente será enlaces de imagen punto de la cárcel. Entonces démosle todas las propiedades que necesitan todas las imágenes, y sólo diremos imagen de libro. Ahora necesitamos hacer un pequeño cheque y enlaces de imagen Algunos libros en el AP de Google Books. Todavía no tengo imágenes ni miniaturas, por lo que los enlaces de imagen se devolverán como indefinidos. Tenemos que comprobar eso porque si intentamos renderizar una imagen indefinida, nuestra aplicación no establecerá la matriz de ítems y actualizará nuestra búsqueda. Lo que podemos hacer, sin embargo, es pasar por alto cualquier imagen indefinida como a la Ault. Entonces de esa manera sólo muestra un libro. Entonces agreguemos eternamente expresión, que es básicamente una declaración abreviada if else para asegurarnos de que renderizamos algo para imagen como así que digamos que su imagen enlaza indefinida. Y solo formateemos esto correctamente primero, por lo que sus enlaces de imagen no son iguales a indefinidos. Y si no está definido, seguiremos adelante y renderizaremos la miniatura. Pero si es indefinido, renderizará una fuerza vacía. Por lo que primero comprueba este padecimiento. Si se evalúa como Verdadero, vamos a la primera condición. De no ser así, vamos a la segunda condición especificada después del colon. Ahora, medida que ahorremos, sigamos adelante y echemos un vistazo a esto. Adelante y busquemos Señor de los Anillos y de hecho, obtenemos un montón de imágenes. Simplemente no son formato y muy bien aún, así que veamos juego de Tronos porque sé que uno de los libros para ellos ciertamente no tiene imagen todavía y ha visto que obtenemos imagen de libro cuando la imagen es unr ingresada. Ahora, en lugar de esta propiedad de imagen de libro, podemos especificar una imagen alterna. Ve y busca una foto que falta foto o icono que te gustaría. Entonces nos metemos en un render métodos especificamos de variable. Eso dice Alternate equivale a la imagen que has alojado en línea. Vamos a especificar la alternativa en lugar de una cadena en blanco. De esa manera, siempre mostramos una foto sin importar el estado actual de los Google Books, un P I para esa imagen. Entonces una vez más, si hago juego de Tronos ahora, boom, obtenemos una enorme foto alterna. Está bien. Ahora bien, si hacemos una búsqueda, sin duda obtenemos imágenes. Pero definitivamente queremos agregar un poco de estilo para que esto se vea bonito. En primer lugar, agreguemos un nombre de clase al relativo sobre, la Imagen y el título. Componentes de Dave. Entonces llamemos a la clase de libro Div en general Nombre es Libro. El componente título será un div que ahora dice texto de libro. Es un nombre de clase es texto de libro y entonces nuestra imagen tendrá un nombre de clase de imagen de libro. El nombre de la clase es Book Dash. SOY G e impresionante. Ahora necesitamos sumergirnos en los estilos para estos componentes, y hay bastante de ellos. Con CSS. Podría tomar más de un par de cambios para que tu interfaz luzca bien. Pero todo vale la pena al final, en un nuevo componente de estilos de galería para decirnos que estamos cambiando, la galería vende. Vamos a vender el libro, libro, imagen y título del libro, así cabezas indexan punto CSS. Especificaremos que vamos a estar cambiando algunos estilos de galería solo para que nuestro CSS esté bien separado. En primer lugar para nuestro libro, vamos a añadir una pantalla para hacerlo en bloque de línea, pero para hacerlos de lado a lado, pero no encima uno del otro. Le daremos un con de 220 píxeles, que es lo suficientemente grande para ser visto, pero no lo suficientemente pequeño donde no se pueda ver. Yo le daría un margen de 10 píxeles, para que así no se estén tocando entre sí. Le daremos una línea textil de izquierda. Haremos el puntero del cursor. Entonces de esa manera, cuando lo pasaste por encima, parece que se puede hacer clic. Posición será entonces relativa a los otros libros justo al lado. Ahora dentro de la imagen del libro, se verá similar. Tendremos un con de 220 píxeles así como una altura de 220 píxeles. Le daremos un borde ahora de cuatro píxeles sólido 000 que será negro, un radio de borde de cuatro píxeles para redondear los bordes y las esquinas objeto fit de cubierta. Asegúrate de que las imágenes se vean bien como imágenes de fondo. Le daremos una posición de absoluto, para que así se renderice justo encima de nuestro componente de libro. Muy bien, último texto de libro. Ahora eso es lo que se ve bastante guay. Vamos a darle un color de fondo de negro, lo que le daría un campo de superposición. Le daremos un color blanco F F F. Es opacidad será de 7.5, por lo que de esa manera se desvanece un poco sobre la imagen con la que está serán 214 píxeles, y justo después de eso le daremos un margen a la izquierda de tres píxeles. Para que así no pase por la frontera. Daremos el texto en línea del centro, justo en el medio de la imagen. Su posición también será absoluta nos aseguraremos de que la línea textil se deletree correctamente. Nada de los editores es que cuando cometes un error con errores tipográficos, generalmente te dice de inmediato el fondo será paso cero camino va todo el camino hasta la parte inferior de nuestro componente de imagen. Su relleno será de 10 píxeles. Muy bien, entonces recarga. Intentemos revisar los cambios. Busca Harry Potter o cualquier cosa que te guste y boom, obtenemos muy agradable Dave's. El punto aún no aparece porque en realidad tengo que decir Pointer. Entonces vamos a guardar la recarga una vez más. Búsqueda de Harry Potter otra vez. ¡ Boom! Obtenemos un bonito puntero de cursor, y ahora mismo no está haciendo clic en nada todavía. Entonces ahora que tenemos todas estas luciendo bonitas, sumemos el último bit de funcionalidad que nos lleva a la página principal de cada uno de estos libros. Así que volver a la galería dot Js cambiará el div general a una etiqueta de ancla para cambiar esto a una así que lo que podemos hacer ahora es con esta etiqueta de ancla, configurar una propiedad de borrador establecida al enlace Info que podríamos darle un blanco de blanco así que de esa manera y navega a una nueva página en lugar de sacarnos de nuestra aplicación. Vamos a guardar ¿se recarga? Busca una vez más a Harry Potter. Sea lo que sea que busques último y Boom, nos llevará a Nueva Página, que será nuestra página principal para el libro real. I Don't awesome recreé una completa aplicación de reaccionar y obtuve una probada de Essex, en efecto en el nivel de la industria. Excelente trabajo. Ojalá se divirtiera construyendo esta aplicación. Hay una parte de desafío en la descripción general de la sección en caso de que quieras extender sobre esto y seguir explorando. Reacciona. Además, vale la pena mencionar que no tengo todo el curso dedicado a reaccionar. Sí, así como Redux. Si quieres agregar este marco a tu conjunto de habilidades y entenderlo más profundamente, realmente está en demanda de habilidad. Por lo que recomiendo encarecidamente ese curso. Tengo un enlace de descuento para cualquiera en este curso, y puedes encontrar que en la sección resumen con eso que se dice de nuevo, gran trabajo y sigamos revestiendo