RECUERDA PONER A GRABAR LA CLASE
¿DUDAS DEL ON-BOARDING?
EVENTOS
Clase 09. REACT JS
OBJETIVOS DE LA CLASE
NavLink: es un link con un estilo, está siempre detectando la ruta actual, y si coincide con la suya nos activa la clase que le demos para que el user sepa qué ítem de la lista corresponde con la vista actual.
useParams: lo podemos utilizar para leer en js los parámetros de la ruta. En combinación con un useEffect, nos sirve para obtener actualizaciones sobre los parámetros.
GLOSARIO:
Clase 8
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 9
Eventos
Componentes basados en eventos
¿Qué son?
Tipos
DOM Event
Event listener
React y los eventos
Clase 9
Eventos
Clase 8
Routing y Navegación
Clase 10
Context
CRONOGRAMA DEL CURSO
EJEMPLOS EN VIVO
EJEMPLOS EN VIVO
EJEMPLOS EN VIVO
AGREGAR UN ROUTER A TU APP
CREA UNA MÁSCARA DE INPUT
SINCRONIZAR COUNTER
CREA TU CONTEXTO
CARTCONTEXT
PRIMERA ENTREGA DEL PROYECTO FINAL
EVENTOS
Si bien existen muy variados tipos de aplicaciones, es raro encontrar alguna que pueda tener sentido sin eventos.
¿QUÉ ES UN EVENTO EN NUESTRO CONTEXTO?
Es un estímulo programático, que puede ser provocado de manera automática, o ser el resultado de una interacción del usuario con la UI
TIPOS DE EVENTOS
Si estamos viendo Netflix por mucho tiempo sin tocar el control remoto, ocurre un evento automático por inactividad que nos pregunta...
EVENTOS AUTOMÁTICOS
Son todas las interacciones del usuario que producen algún tipo de respuesta o efecto secundario
EVENTOS MANUALES
DOM EVENTS
El DOM tiene una serie de eventos estándar, y se dividen en varias categorías:
El evento de UI más conocido es el click.
Aunque probablemente lo utilices casi tanto como el scroll vía un wheel event
EVENT LISTENER
EVENT LISTENER
Un Event Listener es un patrón de diseño que sirve, como su nombre lo indica, para escuchar cuando un algo ocurre en algún elemento, librería o API, y poder realizar una acción en consecuencia.
Tip: ¡hay otros lenguajes que también implementan eventos!
CONFIGURANDO
EVENT LISTENERS
AGREGANDO UN EVENT LISTENER
Nombre de evento que quiero escuchar
Referencia de la función a registrar
Nota: ¡guardar referencia para poder removerlo después!
REMOVIENDO UN EVENT LISTENER
Nota: invocar el removeEventListener en la función de limpieza de nuestros hooks en donde los hayamos registrado.
REMOVIENDO EVENTOS
REACT Y LOS EVENTOS
Los distintos browsers suelen tener algunas variaciones en el contenido de los eventos.
Esto haría difícil utilizarlos de manera uniforme en cada plataforma. React es consciente de esto, y nos ayuda proveyendo esta abstracción.
SYNTHETIC EVENTS
SYNTHETIC EVENTS
VAMOS AL CÓDIGO
DECLARANDO UN EVENTO
DECLARANDO UN EVENTO
Si necesito almacenar el valor del evento puedo guardarlo en un estado.
Algunos eventos como onKeyDown son cancelables, por ejemplo:
evt.preventDefault()
CANCELANDO EL COMPORTAMIENTO DEFAULT
Los eventos por default se ejecutan en el elemento, y en cada uno de sus ancestros. Si esto puede traer algún efecto secundario podemos cancelar la propagación (bubbling):
evt.stopPropagation()
EVITANDO LA PROPAGACIÓN
VAMOS AL CÓDIGO
CREA UNA MÁSCARA DE INPUT
Crea un input de texto que no permita el ingreso de vocales.
¡A PRACTICAR!
En stackblitz crea un input de texto que no permita el ingreso de vocales, cancelando su evento onKeyDown en los keys adecuados.
Pista: el synthetic event de keydown tiene varias propiedades, encuentra cuál te puede dar la información de la tecla ;)
Cuentas con 15 minutos para realizar la actividad.
☕
BREAK
¡5/10 MINUTOS Y VOLVEMOS!
COMPONENTES BASADOS EN EVENTOS
UNIDIRECTIONAL SYMMETRY
Ilustradora: Maggie Appleton @ Woman of React 2020
Bajan los datos
Suben los eventos
Acción
Reacción
INTERCAMBIABILIDAD/
AGNOSTIC BEHAVIOR
INTERCAMBIABILIDAD
Implementando componentes de manera eficiente, podremos generar intercambiabilidad, e intercambiar funcionalidades sin mucho esfuerzo.
INTERCAMBIABILIDAD
Podemos generar variaciones del mismo componente, con distinto layout y el mismo comportamiento.
ABSTRACCIÓN: CASO 1
Sirve como estrategia
para ocultar el comportamiento interno de rendering e implementación de change events
El consumer sigue sin cambiar la firma de consumo:
ABSTRACCIÓN: CASO 2
ORIENTACIÓN A EVENTOS
VAMOS AL CÓDIGO
Importa el ItemCount.js del desafío Nº 4 en el counter ItemDetail.js, y configura el evento de compra, siguiendo los detalles de manual.
SINCRONIZAR COUNTER
7
SINCRONIZAR COUNTER | ||
Formato: link al último commit de tu repositorio en Github | | |
�>> Consigna: Importa el ItemCount.js del desafío Nº 4 en el counter ItemDetail.js, y configura el evento de compra, siguiendo los detalles de manual. >>Aspectos a incluir en el entregable:
| ||
SINCRONIZAR COUNTER | ||
Formato: link al último commit de tu repositorio en Github | | |
�>> Ejemplo inicial: function ItemDetail({ item }) { onAdd(quantityToAdd) { // Hemos recibido un evento del ItemCount } return <> … <ItemCount > // Configura las props de ItemCount. Qué habría que mandarle?👀 </>; } | ||
SINCRONIZAR COUNTER | ||
�Ejemplo: | | |
| ||
¿PREGUNTAS?
Resumen de lo visto en clase hoy:
¡MUCHAS GRACIAS!
OPINA Y VALORA ESTA CLASE