Register

Aprovechando al máximo mis últimos meses en Platzi

En esta parte a mi no me funciono a la primera, revisando el código todo estaba como lo habia indicado el profesor pero hay un detalle que no se si solo es mi caso, pero el botón no tenia bien asignado el type, se lo cambie a `type="submit"` y me funcionó.

Como sugerencia, yo prefiero usar Formik con Yup para formularios, y ya si es necesario mando un formValues a redux …

El procedimiento que se muestra aquí es muy similar (sino idéntico) al que sehace en la sección de Login (Clase 17 de este mismo curso)

Definitivamente si hay algo a lo que no le encuentro sentido es a los return implícitos. Llamenme aburrido y hasta Calamardo, pero en definitiva es una “decoración” que no aporta en nada y me dà la sensaciòn que puede complicar màs a las personas novatas que venimos atrás que servir para algo. Se tenìa que decir y se dijo.

propuesta para el handleInput

const handleInput = (event) => {
  const { name, value } = event.target;
  setValues({
    ...formRegister,
    [name]: value,
  });
};

Para evitar estar formateando el código y que se siga viendo bien, pueden usar la extensión de VScode de ‘Prettier’ y ya les deja bien indentado y entendible el código

en Visual Studio Code, para que puede verse el codigo sin necesidad del scroll Horizontal. utilizas la tecla “ALT” y la tecla “Z” al tiempo, y se ajusta el las lineas de codigo largas a reglones.

Me llama la atencion que a mi no se me rompieron los estilos cuando pase todo a componentes 🤔

estupendo, repasando la clase 😄

a caray ya lo habíamos visto en una clase anterior verdad. esta simplemente genial este curso.

Nuestra aplicación ya tiene un estado inicial, y podemos extraer la información que queremos de este especie de base datos, sin embargo, para traer nuevo datos estamos utilizando los *react–hooks…

El

event.preventDefault()

Previene que el elemento sea usado de manera predeterminada en la funcionalidad de HTML

Good Job!
…
…

super waooo

Hasta el momento ha sido de los cursos que más me ha gustado, muy bien explicado, con lo aprendido con el login pude hacer el register sin ver las clases

Vamos a usar hooks para los inputs.

Register.jsx:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import '../assets/styles/components/Register.scss';

const Register = () => {
  const [form, setValues] = useState({
    email: '',
    name: '',
    password: '',
  });

  const handleInput = (event) => {
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(form);
  };

  return (
    <section className='register'>
      <section className='register__container'>
        <h2>Regístrate</h2>
        <form className='register__container--form' onSubmit={handleSubmit}>
          <input
            name='name'
            className='input'
            type='text'
            placeholder='Nombre'
            onChange={handleInput}
          />
          <input
            name='email'
            className='input'
            type='text'
            placeholder='Correo'
            onChange={handleInput}
          />
          <input
            name='password'
            className='input'
            type='password'
            placeholder='Contraseña'
            onChange={handleInput}
          />
          <button className='button' type='submit'>Registrarme</button>
        </form>
        <Link to='/login'>Iniciar sesión</Link>
      </section>
    </section>
  );
};

export default Register;

Esta funcion que hacemos aqui, es como si usaramos NgModel de Angular

 const handleInput = (event) => {
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };```

Muy buena clase, repasando los conceptos del Login

super

![](

super ingeresante

a

Vamos a agregarle todos los elementos que necesitamos en registro. Primero necesitamos ponerle un return explicito

Vamos a utilizar React Hooks para manejar lo que vamos a usar con nuestros INPUTS.

const [form, setValues] = useState({
    email: "",
    name: "",
    password: "",
  });

Ya que lo tenemos, vamos a crear las funciones que necesitamos para poder rellenar nuestro estado

const handleInput = (event) => {
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

y esta funcion la agregaremos a nuestros input en el evento onChange y ahora vamos a crear la funcion del submit

const handleSubtmit = (event) => {
    event.preventDefault();
    console.log(form);
  };

Y se la agregamos a la etiqueta y a el formulario en el evento onSubmit

El handleInput yo preferí desestructurar el target, creo que es más legible, no sé, me gusta más al menos hahaha