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!

No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
3H
38M
22S
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 29

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Muchas veces he leido que un codigo legible es mejor que un codigo 鈥渞esumido鈥, 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

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

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

Mi solucion con poco mas moderna con React Hook Form
Documentacion del hook

import React from 'react'
import { useForm } from 'react-hook-form'

export function FormLogin ({ activateAuth }) {
  const { register, handleSubmit, formState: { errors } } = useForm()
  const onSubmit = data => {
    console.log(data)
    activateAuth()
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' placeholder='User' {...register('email', { required: true })} />
      <input type='password' placeholder='Password' {...register('password', { required: true })} />
      {errors.emailRequired && <span>This filed is required</span>}
      <input type='submit' />
    </form>
  )
}

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
        });
    };

Yo aqu铆 no creo que sea conveniente hacer un input controlado (un input donde cada que cambie el input, el estado cambie), ya que eso es 煤til en search bars, pero en formularios solo es importante ver el input cuando se va a hacer un submit, de otra forma solo estamos re-renderizando un component por cada vez que el usuario escribe

super util el hook para forms!!!

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

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/

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

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

Excelenteee 馃槂