隆Bienvenida! Este es un curso especial de React Hooks

1

驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?

2

驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?

Introducci贸n a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusi贸n de React Hooks y React Context

6

useReducer: como useState, pero m谩s escalable

7

驴Qu茅 es memoization? Programaci贸n funcional en JavaScript

8

useMemo: evita c谩lculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita c谩lculos innecesarios en funciones

11

Optimizaci贸n de componentes en React con React.memo

12

Custom hooks: abstracci贸n en la l贸gica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: an谩lisis y retos de Platzi Conf Store

15

Instalaci贸n de Webpack y Babel: presets, plugins y loaders

16

Configuraci贸n de Webpack 5 y webpack-dev-server

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creaci贸n de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetaci贸n y estilos del home

23

Maquetaci贸n y estilos de la lista de productos

24

Maquetaci贸n y estilos del formulario de checkout

25

Maquetaci贸n y estilos de la informaci贸n del usuario

26

Maquetaci贸n y estilos del flujo de pago

27

Integraci贸n de 铆conos y conexi贸n con React Router

Integraci贸n de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la p谩gina de checkout

31

useRef en la p谩gina de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicaci贸n con la API de PayPal

34

Integraci贸n de pagos con la API de PayPal

35

Completando la integraci贸n de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

37

Integraci贸n de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimizaci贸n de aplicaciones web con React

41

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

42

An谩lisis de performance con Google Lighthouse

43

Convierte tu aplicaci贸n de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y cons煤mela con React.js

驴Qu茅 sigue en tu carrera profesional?

45

Pr贸ximos pasos para especializarte en frontend

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

useRef: manejo profesional de inputs y formularios

9/45
Recursos

Aportes 29

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Creo que el profesor deberia explicar mejor como funciona useRef. Solo explica como usarlo pero no como funciona y creo que eso es muy importante.

Apuntes

  • Manejo profesional de inputs y formularios

Creaci贸n de la referencia

const refContainer = useRef(initialValue);

Uso de la referencia

<input
  type="text"
  value={search}
  ref={searchInput}
  onChange={handleSearch}
/>
<h3>Ideas/conceptos claves</h3>

useRef.- devuelve un objeto ref mutable cuya propiedad .current se inicializa con el argumento pasado (initialValue). El objeto devuelto se mantendr谩 persistente durante la vida completa del componente

Referencias

https://es.reactjs.org/docs/hooks-reference.html#useref

RESUMEN: use ref nos sirve para obtener un elemento del DOM construido por React de tal forma que podamos acceder a sus atributos de una forma imperativa

Bueno, lo que comprendo de la clase es, ahora usa useRef para acceder al valor del input. He investigado y parece ser que con useRef puedes obtener elementos del dom y modificarlos (sin tanto problemas de bugs). Es por eso que el profesor hizo el ref={searchInput} para que react supiera que ahora searchInput equival铆a al input(un nodo del dom). Sabiendo esto, por eso a la funci贸n handleSearch le cambia el valor al searchInput porque ahora es el elemento del dom y como sabemos el input tiene un value que cambia :V y por eso no da errores XD

fuente:

https://medium.com/trabe/react-useref-hook-b6c9d39e2022

Para el manejo de formularios les recomiendo usar Formik https://www.npmjs.com/package/formik

Gran explicaci贸n, estoy trabajando en una aplicaci贸n web, y gestionaba mediante el evento del manejador, pero estaba intentando utilizar componentes agnosticos, y no daba con la manera de obtener los valores, ahora ya entiendo porque. Muchas gracias.

Para el manejo de formularios les recomiendo bastante React Hook Form https://react-hook-form.com/
Simplifica mucho el proceso de obtenci贸n de datos y validaci贸n de los campos.

El ejemplo se me qued贸 un poco corto, no le veo mucha ventaja y siento que el componente no queda tan agn贸stico, para forms uso event.target.name y el event.target.value para crear un objeto (clave, valor) y este sea el estado de todo el componente. Igual se me hace interesante usar ref

Creo que me salt茅 esta clase y usaba React-Hook-Forms de una. Shame

Si usan Material UI
solo deben cambiar ref por inputRef

<TextField
id="outlined-basic" 
label="Search" 
variant="outlined" 
value={search}
onChange={handleSearch}
inputRef={searchInput}
/>

useRef en alguna ocaciones tambien se puede manejar ocmo useState con la diferencia que la actualizaci贸n de esta ref (que puede ser un valor cualquiera) no renderiza como el componente de nuevo, Adjunto un video por si quieren revisar mucho mas este hook y de paso en ingles:
https://www.youtube.com/watch?v=t2ypzz6gJm0

En Platzi hace poco actualizaron el curso pr谩ctico de React y hay clase donde se explica mejor el useRef con un formulario con varios inputs (el curso tambi茅n lo da Oscar y es muy bueno): https://platzi.com/clases/2484-react-practico/42084-useref-y-formularios/

En este video explican un poco m谩s聽de c贸mo funciona, por si les interesa.
.

useRef funciona como el document.getElementById o el querySelector. Lo que hacemos es asignarle una referencia a un elemento del DOM, normalmente a los inputs, ya que queremos obtener valores de estos inputs, aunque se les puede agregar referencias a cualquier elemento. Funciona de la siguiente manera:

// primero creamos la referencia
const inputRef = useRef(null)

// asignamos la referencia al elemento
<input 
  ref={inputRef} 
  onChange={handleChange}
/>

// usamos esa referencia cuando queramos
const handleChange = () => {
  console.log(inputRef.current.value)
}

El current viene en todas las referencias que creamos, funciona de manera similar al target鈥

En los ultimos formularios en los que he trabajado me he dado cuenta que usando useRef te ahorras el estado, y el onChange de cada input por lo que si tienes muchos inputs en un mismo formulario es mejor para el rendimiento usar refs en vez de escuchar cada input con onChange y estados

Entonces useRef te permite hacer una customizacion asi en vez de poner event.target.value que es muy general, puedes poner el referente tuyo?

useRef - doc react

Formularios No controlados - doc react

  • El useRef accede directamente al nodo del DOM para mutar su valor.

[Formularios controlados - doc react]
(https://reactjs.org/docs/forms.html#controlled-components)

"Un elemento de formulario de entrada cuyo valor es controlado por React se denomina 鈥渃omponente controlado鈥.

  • No usariamos el useRef, sino que el estado del formulario lo controlariamos con un useState, as铆 al mutar el input lo cambiarimos con un onChange={(e) => setState(e.target.value)},

No sirve solo para el caso de los inputs o formularios, su uso puede ser aplicado a statefull components de igual manera en los que podemos ejecutar m茅todos internos de dichos components, al igual que podemos ejecutar algunos metodos del input en el caso que el da de ejemplo, es una manera m谩s clara y f谩cil de acceder a los valores de los inputs.

para esos locos que lo est谩n haciendo con ts

const handleSearch = () => {
        searchInput.current && setSearch(searchInput.current.value)
    }

Este Video ayuda a comprender un poco mejor el useRef. Dura 5 minutos. Directo al punto, bien explicado.

Me parecio una manera muy sencilla de usar useRef, creo que si tengo asignaciones de hacer busquedas utilizare useRef para hacerlo

Miren el minuto 7; me ayud贸 https://www.youtube.com/watch?v=4RGObDegoXw

Otro uso que se le puede dar a UseRef es el de mantener la referencia a un objeto mutable a lo largo de las distintas renderizaciones del componente. Tengan en cuenta que al usar hooks como useState y useReducer, con cada modificacion del estado generados por estos, el componente se vuelve a renderizar con un nuevo estado inmutable, es decir, cada variable, funcion, etc, definida dentro del cuerpo de la funcion del componente es DISTINTA a la de la renderizacion anterior, por que pertenece a otra 鈥渋nstancia鈥 del componente.

En esta guia hecha por Dan hay un buen ejemplo de esto:
https://overreacted.io/a-complete-guide-to-useeffect/#swimming-against-the-tide

Por cierto, lean el post entero que Dan lo explica mucho mejor que yo.

La mejor forma de trabajar con los formularios e inputs en React es con 鈥渦seRef鈥.

Encontr茅 una nota que me parece super util conocerla, este texto es tomado de la documentaci贸n de React;

Ten en cuenta que useRef no notifica cuando su contenido cambia. Mutar la propiedad .current no causa otro renderizado. Si quieres correr alg煤n c贸digo cuando React agregue o quite una referencia de un nodo del DOM, puede que quieras utilizar en su lugar una referencia mediante callback.

useRef

No entend铆 las ventajas frente a utilizar useState para manejar el estado en los Inputs, 驴alguien me podr铆a explicar? Gracias!

tenia entendido que reactjs recomienda la primera forma en vez de sobreexplotar los refs.

Pueden encontrar aqu铆 mas informaci贸n sobre useRef

Hola, estoy siguiendo este proyecto en Nextjs. Les dejo mi repositorio:

https://github.com/danyel117/platzi-conf-store

a