Register

Clase 21 de 29 • Curso de React Router 5 y Redux

Clase anteriorSiguiente clase

Alejandro González Reyes

student•

Aprovechando al máximo mis últimos meses en Platzi

Wilson Marino Pablo Mendez

student•

Y yo mis últimos días

Daniel Hernández

student•

y yo mi ultimo sueldo jaja

Salvador Galliano

student•

Esteban Casallas

student•

q gran aporte es info muy buena !

Andrés Felipe Eslava Zuluaga

student•

Hace falta camino! Gracias por el aporte :D

Jorge Ossa

student•

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ó.

Platzi Team

student•

Igualmente compañero, me paso lo mismo, gracias por tu aporte

Henry Caicedo Velasco

student•

BUen, punto.

Gerardo Nava Pereda

student•

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

Alexander Nova Arevalo

student•

No sabia que existia esto, buen aporte

Victor Leon

student•

efectivamente,. las validaciones y manejo de formulario en formik es muy superior a redux form y que react availiaty

Migrant Cyborg

student•

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.

César Palma

student•

muy cierto, es un decorado que solo deberia enseñarse en extras. causa mas confusion cuando se está aprendien algo nuevo

Jose Colmenares

student•

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)

Elvis Saavedra

student•

propuesta para el handleInput

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

Guillermo Vara De Gante

student•

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

Ginnio Sarabia

student•

yo uso eslint fix en consola

Ivan Andres Diaz Lopez

student•

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.

Khevin Efraín

student•

que buen tip

Nicolas Esteban Manograsso

student•

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

Jhonatan David Ibarra Lavado

student•

estupendo, repasando la clase :D

Wilmar Yoan Malaver Malaver

student•

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

Asis Melgarejo Lopez

student•

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...

Vicente Daniel Zurita Salas

student•

A que te refieres con "Traer" ?

Joel Bello

student•

Te refieres al import que está en el Home de useInitialState? ya se puede eliminar.

Enmanuel Castillo

student•

event.preventDefault()

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

Laura Camila Pregonero

student•

Good Job! ......... ..........

Christian Perez

student•

Son buenas practicas el uso de redux y hooks en el mismo proyecto?

Favio Sauto

student•

Todo depende, si es una aplicación grande, como por ejemplo: Platzi sí es buena práctica usar ambos, piensa en redux como el contenedor y manejador global del estado de todos los estados que tu aplicación debe compartir, y React Hooks para aquellos componentes que tienen estados que ningún otro componente necesita.

Luis Lira

student•

¡Hola! :D

Claro que se puede sin problemas, de hecho, no debemos cargar tampoco todo hacia Redux, sólo debemos agregar ahí los datos que necesitamos de manera global en la aplicación. Si tu componente necesita información que sólo usará ese componente en específico, lo mejor sería que uses un estado local con el hook de useState para esa situación.

¡Nunca pares de aprender! 💚

Maria Elizabeth Minero Alvarenga

student•

super waooo

Erick Fariñas

student•

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

Miguel Angel Reyes Moreno

student•

Vamos a usar hooks para los inputs.

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'>
        <h3>Regístrate</h3>
        <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;

Beto Martinez

student•

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

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

Alexander Nova Arevalo

student•

Esta funcion rellena el objeto form con cada input que tenga la funcion handleInput, El name de cada input,es el nombre que queda en el objeto. El ngModel asocia un objeto ya creado

Register

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto