Introducción al curso avanzado de React

1

Qué necesitas para este curso y qué aprenderás sobre React.js

2

Proyecto y tecnologías que usaremos

Preparando el entorno de desarrollo

3

Clonando el repositorio e instalando Webpack

4

Instalación de React y Babel

5

Zeit es ahora Vercel

6

Linter, extensiones y deploy con Now

Creando la interfaz con styled-components

7

¿Qué es CSS-in-JS?

8

Creando nuestro primer componente: Category

9

Creando ListOfCategories y estilos globales

10

Usar información real de las categorías

11

Creando PhotoCard y usando react-icon

12

SVGR: de SVG a componente de ReactJS

13

Creando animaciones con keyframes

Hooks

14

¿Qué son los Hooks?

15

useEffect: limpiando eventos

16

useCategoriesData

17

Usando Intersection Observer

18

Uso de polyfill de Intersection Observer e imports dinámicos

19

Usando el localStorage para guardar los likes

20

Custom Hooks: useNearScreen y useLocalStorage

GraphQL y React Apollo

21

¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

22

Parámetros para un query con GraphQL

23

Usar render Props para recuperar una foto

24

Refactorizando y usando variables de loading y error

25

Usando las mutaciones con los likes

Reach Router

26

¿Qué es Reach Router? Creando la ruta Home

27

Usando Link para evitar recargar la página

28

Creando la página Detail

29

Agregando un NavBar a nuestra app

30

Estilando las páginas activas

31

Rutas protegidas

Gestión del usuario

32

Introducción a React.Context

33

Creación del componente UserForm; y Hook useInputValue

34

Estilando el formulario

35

Mutaciones para registro

36

Controlar estado de carga y error al registrar un usuario

37

Mutaciones para iniciar sesión

38

Persistiendo datos en Session Storage

39

Hacer like como usuario registrado

40

Mostrar favoritos y solucionar fetch policy

41

Cerrar sesión

Mejores prácticas, SEO y recomendaciones

42

Últimos retoques a las rutas de nuestra aplicación

43

React Helmet

44

Midiendo el performance de nuestra app y usando React.memo()

45

React.lazy() y componente Suspense

46

Usando PropTypes para validar las props

47

PWA: generando el manifest

48

PWA: soporte offline

49

Testing con Cypress

Conclusiones

50

¡Felicidades!

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de React Avanzado

Curso de React Avanzado

Miguel Ángel Durán

Miguel Ángel Durán

Creación del componente UserForm; y Hook useInputValue

33/50
Recursos

Aportes 26

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Muchas veces he leido que un codigo legible es mejor que un codigo “resumido”, creo que en este caso el cambio de “value={email.value} onChange={email.onChange}” a “{...email}” le quita legibilidad

Excelente clase, el trucazo de el useInputValue y pasar simplemente con rest operator esta genial, no lo esperaba.

use-input-value en npm
He creado una implementación un poco extendida del hook, para permitir manejar estados que permitan visualizar de mejor forma los errores y también manejar la validación de los campos.

Demo

Cree un hook mas apropiado por lo menos para mi en la carpeta hooks

import React, { useState } from 'react'

const useFormUser = initial => {
    
    const [ value , setValue ] = useState(initial)

    const onChange = e => setValue({
        ...value,
        [e.target.name] : e.target.value
    })

    return [
        value,
        onChange
    ]

}

export default useFormUser

y en el form quedo asi

import React, { useState } from 'react'
import useFormUser from '../../hooks/useFormUser'

export const UserForm = ({ onSubmit }) => {

    const initialState = {
        email: '',
        password: ''
    }

    const [ state , onChange ]  = useFormUser(initialState)

    const { email , password } = state

    return (
        <form onSubmit={onSubmit}>
            <input
                placeholder="Email" 
                name="email"
                value={email}
                onChange={onChange}
            />
            <input
                type="password"
                placeholder="Password" 
                name="password"
                value={password}
                onChange={onChange}
            />
            <button type="submit">Iniciar Sesión</button>
        </form>
    )
}

Cuando es un hook para los inputs, como se manejan las validaciones de los campos??

mmm interesante creo que tendre que verlo unas 2 veces para captarlo por completo que buen curso

Nunca me he divertido tanto en aprender un lenguaje de programación, haces que el curso de React Native sea juego de niños … consejo : cambien el curso de react native pero siendo tu el profesor , un abrazo y felicitaciones

Comparto mi solución al estado sin tener que crear un hook adicional:

const [formData, setFormData] = useState({ email: '', password: '' });

const handleChange = (event) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
};

<input ... onChange={handleChange} />

Creo que estamos pidiendole mucho al navegador con la forma que hace el profesor, una versión más actualizada sería…

import React, { useRef } from 'react'
export const UserForm = ({ aproveAuth }) => {
  const form = useRef(null)

  const handleSubmit = () => {
    const formData = new FormData(form.current)
    const formEntries = Object.fromEntries(formData)
    console.log(formEntries)
    aproveAuth()
  }
  return (
    <>

      <form ref={form}>

        <input type='text' name='email' placeholder='Email' />
        <input type='password' name='password' placeholder='Password' />

      </form>
      <button onClick={handleSubmit}>Sing in</button>

    </>
  )
}

Si al momento de llenar el formulario y presionar la tecla Enter y no sucede nada, solo hace falta añadir el siguiente botón dentro del form para habilitar esta funcionalidad:

<button type='submit'>Conectar</button>

😄

Buenos dias muy buena clase realice unas modificaciones a mi codigo asi lo eniendo mucho mejor sin embargo el curso va genial

 const [state, setState] = React.useState({
        email: "",
        password: ""
    });

    const handleOnCahnge = e => {
        const name = e.target.name;
        const value = e.target.value;
        setState({
            ...state,
            [name]: value
        });
    };

Mucha refactorización es una pega del curso, definitivamente

Me gusto bastante el hook useInputValue

Mi solucion con targe y name como parametros de input:

const UserForm = ({ onSubmit }) => {
    const [form, setForm] = useState({});

    const handleForm = e => {
        setForm({
            ...form,
            [e.target.name]: e.target.value,
        });
    }

    return (
     <form onSubmit={onSubmit}>
                <input placeholder="Email" name="email" value={form.email} onChange={handleForm} />
               <input placeholder="Password" name="password" type="password" value={form.password} onChange={handleForm} />
            <button>Iniciar Sesión</button>
        </form>        
    );
}

Una ternaria que puede resultar de ayuda.

  const onChange = (e) => setValue(e.target ? e.target.value : '')

¿Por que se inicializa useState con un string vacio, si usualmente se hace con un arreglo vacío?, o mas bien, como identificamos que tipo de dato esperamos para el useState

b

Ya un poco más claro como consumir hooks externos, con mejores prácticas

Qué sería más eficiente, reescribir el estado por cada cambio con un setEmail, setPassword o hacer un useRef y obtener los values cuando hagamos submit?

Un consejo para ayudar con la validación de si es un email:
campo en tipo email y required

<input
        type='email'
        placeholder='Ingresa tu email'
        {...email}
        required
      />

porque no tuviste que declarar el atributo name ?? yo lo he usado y la verdad que cuando no declaro el name no me reconoce el e.target.name

Brutal como se combina el rest operator junto con el custom hook

Para pensar: a mí y al profeosr ( y a ustedes, seguramente, también) se nos autocompletó el formulario a la primera que entramos a la ruta.

Muchos sitios pueden capturar esos datos (con fines potencialmente maliciosos) y otros más que tengamos en el autocompletado de Chrome, o el navegador que usemos.

Los invito a mirar esta página para ver y tomar consciencia de la cantidad de información que dejamos en nuestro paseo por la web: https://brax.me/geo/

Increible el hook para los inputs!, me voló la cabeza jejejeje

Hola, les dejo el avance de mi repositorio para este proyecto hecho en Next.js:

https://github.com/danyel117/petgram-platzi/tree/useinputvalue

Excelenteee 😃