React
React Hooks 1
Sesión 4
Esta foto de Autor Esta foto de Autor Esta foto de Autor desconocido está Esta foto de Autor desconocido está bajo
desconocido está bajo desconocido está bajo bajo licencia CC BY-SA-NC licencia CC BY
licencia CC BY licencia CC BY-SA-NC
00 Objetivo de la sesión
❑ Manteniendo nuestros componentes puros
❑ Eventos en React
❑ Estados - useState()
❑ Componentes controlados
❑ Laboratorio 4.
Esta foto de Autor desconocido está bajo licencia CC BY-SA-NC
01
Manteniendo
nuestros
componentes
puros
01 Manteniendo nuestros componentes puros
Hemos visto en JavaScript que algunas funciones son “puras”. Es
decir, que solo se ejecutan cálculos y nada más.
Para los componentes React, escribir nuestros componentes
como funciones “puras” hará que no tengamos bugs o algún
comportamiento no deseado.
01 Manteniendo nuestros componentes puros
Características de las funciones puras:
1. Solo se ocupa de su tema: No altera o modifica variables que
existen antes de que sean llamadas.
2. Teniendo los mismos inputs deberían retornar un mismo
resultado.
01 Manteniendo nuestros componentes puros
React está diseñado para seguir este concepto y asume que cada
componente creado es puro, es decir que cada componente que
recibe unos mismos props debería retornar un mismo JSX.
01 Manteniendo nuestros componentes puros
Nuestros componentes de React no deberían modificar objetos ni
variables que han sido declaradas fuera del renderizado. Aquí un
ejemplo de lo que no debería ocurrir:
02
Eventos en React
02 Eventos en React
Con React podemos agregar event handlers a nuestro JSX. Estas
funciones responden a los eventos por default de nuestro browser
como click, hover, focus, etc. Veamos un ejemplo:
02 Eventos en React
Hagamos que nuestro botón alerte
a nuestro usuario cuando se le
hace click. Para ello necesitamos:
1. Crear una función “handleClick”
dentro de nuestro componente.
2. Implementar la lógica de nuestra
función.
3. Agregar el evento onClick a
nuestro elemento <button> y
asignarle la función handleClick.
02 Eventos en React
Por convención, los nombres de los “event handlers” empiezan
con handle y luego el nombre del evento.
Los “event handlers” también pueden escribirse en línea:
02 Eventos en React
OJO: Nosotros debemos pasar la función, no llamarla. Si la
llamamos se ejecutará inmediatamente durante el renderizado.
02 Eventos en React
Los “event handlers” también pueden enviarse como props:
03
Estados -
useState()
03 Estados - useState()
Hasta ahora hemos estado trabajando con componentes
relativamente simples. No contenían nada que nos apoye a
mantener los cambios que se pudieran generar en ellos. Los
componentes necesitan “recordar” cosas (un input value, una
imagen, un shopping cart, etc.) A esta memoria específica de un
componente se le llama State.
03 Estados - useState()
Las variables típicas de javascript se reinicializan con cada render y
si se cambian de valor, estos no generan un re-render de nuestro
componente.
React necesita renderizar nuevamente el componente con la nueva
data, para ello necesitamos el State.
03 Estados - useState()
El hook useState nos entrega dos cosas:
1. Una variable de estado que mantenga la data entre renders.
2. Una función que setea el valor de la variable y que acciona el
renderizado del componente.
03 Estados - useState()
1. A continuación se muestra el ejemplo de un botón que cuenta
las veces que se hace click sobre él y lo muestra en el cuerpo
del botón.
04
Componentes
controlados
04 Componentes controlados
Controlando Inputs
Podemos controlar nuestros forms utilizando React:
04 Componentes controlados
Controlados vs. No Controlados
Cuando un componente de React maneja los inputs de un form
se le llama componente controlado. La diferencia es simple:
● Controlado: Cuando los valores son manejados por React
(usando states)
● No controlado: Cuando los valores son manejados por el
DOM.
04 Componentes controlados
Hemos visto el ejemplo de un input controlado, sin embargo es
un componente no-controlado ya que su value es manejado
por el DOM. Para considerar al componente como controlado
debemos también controlar su atributo “value”:
Laboratorio 4
Esta foto de Autor desconocido está bajo licencia CC BY-NC
Ponte en acción
Recuerda, las ideas principales de la sesión de hoy:
1. Para los componentes React, escribir nuestros componentes como
funciones “puras” hará que no tengamos bugs o algún
comportamiento no deseado.
2. Nuestros componentes de React no deberían modificar objetos ni
variables que han sido declaradas fuera del renderizado.
3. Por convención, los nombres de los “event handlers” empiezan con
handle y luego el nombre del evento.
4. OJO: Nosotros debemos pasar la función, no llamarla. Si la
llamamos se ejecutará inmediatamente durante el renderizado.
Imagen 11: Idea. Recuperado de
5. Las variables típicas de javascript se reinicializan con cada render https://pixabay.com/es/photos/bombilla-de-luz-idea-creatividad-
3104355/
y si se cambian de valor, estos no generan un re-render de nuestro
componente.
React necesita renderizar nuevamente el componente con la
nueva data, para ello necesitamos el State.
Bibliografía
• React Docs BETA. Recuperado de https://beta.reactjs.org/
• Presentando JSX, React. Recuperado de https://es.reactjs.org/docs/introducing-jsx.html
• CDN Links, React. Recuperado de https://reactjs.org/docs/cdn-links.html
• @babel/standalone. Recuperado de https://babeljs.io/docs/en/babel-standalone
¡Gracias!
