Container: Register

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

Resumen

Para asegurar que nuestras rutas solamente se rendericen con la que haga match con la url debemos encapsular las rutas dentro del componente .

Jesús Miguel Quinto Teran

student•

Atributos para los Route Objectos:

path: la ruta en la que se renderizará el componente en forma de cadena de texto
exact: un booleano para definir si queremos que la ruta tiene o no que ser exacta para renderizar un componente. Eg: /index !== /index/all.
strict: un booleano para definir si queremos que el último slash sea tomado en cuenta para renderizar un componente. Eg: /index !== /index/.
sensitive: un booleano para definir si queremos distinguir entre minúsculas y mayúsculas, y tomar esto en cuenta para renderizar un componente. Eg: /index !== /Index
component: recibe un componente a renderizar. Crea un nuevo elemento de React cada vez. Esto causa que el componente se monte y desmonte cada vez (no actualiza).
render: recibe un método que retorna un componente. A diferencia de component no remonta el componente.

Bernardo Aguayo Ortega

student•

thanks bro!

David Santiago González Ramos

student•

Buen aporte! 👏

Arantxa Giovanna Rosas Del Valle

student•

La diferencia entre poner el switch y no ponerlo es que cuando tienes el mismo path para todos solamente toma el primero y lo renderiza.

Oscar Barajas Tavares

Team Platzi•

Exacto, este detalle marca la diferencia y el comportamiento de nuestra aplicación.

Bernardo Aguayo Ortega

student•

thanks!

Cristian Caballero

student•

<section className='register'>
		<section className='register__container'>
			<h2>Regístrate</h2>
			<form className='register__container--form'>
				<input className='input' type='text' placeholder='Nombre' />
				<input className='input' type='text' placeholder='Correo' />
				<input className='input' type='password' placeholder='Contraseña' />
				<button className='button'>Registrarme</button>
			</form>
			<a href=''>Iniciar sesión</a>
		</section>
	</section>```

Cristofher Jumbo Jimenez

student•

Buenardo !!

Cristhian Daza

student•

Regisyer.scss

.register {
  background-image: #181818;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0px 30px;
  min-height: calc(100vh - 200px);

  &__container {
    background-color: rgba(255,255,255,0.1);
    border: 2px solid white;
    border-radius: 40px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 600px;
    padding: 60px 68px 40px;
    width: 300px;

    a {
      color: white;
      font-size: 16px;
      text-align: center;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }

    }

    &--form {
      display: flex;
      flex-direction: column;
    }
  }

}

Cristofher Jumbo Jimenez

student•

Muchas gracias !

Tomas Goldenberg

student•

JAJAAJA porque siempre en login y register a oscar le aparece un osito?

Markoz Peña Mendez

student•

Debe de tener un gestor de contraseña como el el input es de email y password lo debe de estar detectando la herramienta

Tomas Goldenberg

student•

Ahhhh con razon gracias por el dato!

Tulio Junior Rangel Nuñez

student•

A día de hoy, 5 de enero de 2021, ya no se usa "Switch" para las rutas, se usa "Routes", quedando entonces nuestro código de la siguiente forma:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../containers/Home.jsx";
import Login from "../containers/Login.jsx";
import Register from "../containers/Register.jsx";

const App = () => {
    return (
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Home/>} />
                    <Route path="/login" element={<Login/>} />
                    <Route path="/register" element={<Register/>}/>
                </Routes>
            </BrowserRouter>
    )
};

export default App;

Edgar Andrés Angrino Lafaux

student•

Justo iba a comentar esto Gracias por el adelanto :D

Juan Carlos Tellez

student•

Gracias por el dato, solo para mejorar puedes eliminar el return y utilizar () en la función :)

rusbel bermúdez rivera

student•

Me queda la duda de como integrar routes con un backend en django. Se me hace interesante.

Oscar Barajas Tavares

Team Platzi•

Como lo hemos hecho es empujar en cada vista la sección solicitada.

Alejandro González Reyes

student•

Interesante lo del componente Switch. que a decir verdad, creo que es innecesario cuando el desarrollador esta atento a los paths.

Oscar Barajas Tavares

Team Platzi•

Lo mejor es preparar tu aplicación para escalar para tener una gran cantidad de rutas y de esta forma poder controlar hasta de forma dinámica esta parte.

Jhonatan David Ibarra Lavado

student•

bueno leyendo los comentarios, tenia la misma pregunta, pero igual dije y si tengo no se 30 enlaces que hago ajajaj, bueno gracias profe por aclararme la duda antes de preguntar :D :D

Jose Daniel Molina

student•

Es una buena practica utilizar el <Switch/>?

Luis Lira

student•

Hola!

Sí, el componente Switch ayuda a que sólo se renderice un componente en cada ruta. Además de evitar comportamientos extraños cuando las rutas coinciden en un parte de sus paths.

Jose Daniel Molina

student•

Muchas gracias

Javier Armando Vargas Vega

student•

Hola. Estoy siguiendo el curso y hasta el momento no he tenido problemas con el servidor de desarrollo, pues corre con npm run start sin ningún problema, pues siempre que hacía cambios en los archivos del proyecto automáticamente se podía ver en el navegador.

Sin embargo de un momento a otro dejó de hacer esos cambios de manera automática y cada vez que hago cambios y grabo no se actualiza automáticamente el servidor. Debo terminarlo y volver a iniciarlo con npm run start.

Por favor alguien que me pueda dar alguna ayuda sobre por qué está pasando esto.

Hace que sea muy lento seguir el curso, pues debo terminar el servidor a cada rato y volverlo a lanzar.

Gracias.

Jimmy Buriticá Londoño

student•

En el webpack.config.js la sección devServer debe quedar así:

  devServer: {
    open: true,
    hot: true,
    port: 8081,
    historyApiFallback: true,
  },

Wandy Rafael Santana Evangelista

student•

Switch al igual que la programacion habitutal nos permite, que al primer Match de nuestra ruta haga render de este y termine la busquedad de coincidencias, y volvera a buscar otra Match apenas haya un cambio en el Browser path

Andrés Felipe Eslava Zuluaga

student•

MUY BUEN APORTE!

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Les comparto el código de la clase:

assets/styles/components/Register.scss

.register {
	background-image: linear-gradient(#21c08b, #8f57fd);
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding: 0px 30px;
	min-height: calc(
		100vh - 200px
	); /* El ancho será igual al tamaño de todo el height menos 200px (100px del header + 100px del footer) */
}

.register__container {
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid white;
	border-radius: 40px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	min-height: 600px;
	padding: 60px 68px 40px;
	width: 300px;
}

.register__container--form {
	display: flex;
	flex-direction: column;
}

.register__container a {
	color: white;
	font-size: 16px;
	text-align: center;
	text-decoration: none;
}

.register__container a:hover {
	text-decoration: underline;
}```

containers/Register.jsx

import React from "react"; import "../assets/styles/components/Register.scss"; const Register = () => { return ( <section className="register"> <section className="register__container"> <h3>Regístrate</h3> <form className="register__container--form"> <input className="input" type="text" placeholder="Nombre" /> <input className="input" type="text" placeholder="Correo" /> <input className="input" type="password" placeholder="Contraseña" /> <button className="button">Registrarme</button> </form> <a href="">Iniciar sesión</a> </section> </section> ); };

export default Register;```

routes/App.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "../containers/Home";
import Login from "../containers/Login";
import Register from "../containers/Register";

const App = () => {
	return (
		<BrowserRouter>
			<Switch>
				<Route exact path="/" component={Home} />
				<Route exact path="/login" component={Login} />
				<Route exact path="/register" component={Register} />
			</Switch>
		</BrowserRouter>
	);
};

export default App;```

Jaime Puente

student•

A dia de Hoy (28 de Enero de 2023), la version mas reciente de React Router es la 6. Switch en este momento cambio su nombre a Routes. Y las rutas Route no debe especificarse el EXACT, asi como la propiedad COMPONENT pasa a llamarse ELEMENT, y dentro de esta propiedad, el componente a renderizar se pasa como un elemento HTML (element={<MyComponent />})

Cristian Florez

student•

Es mala practica tener el login y el register en componentes y llamarlos en el contenedor

Oscar Barajas Tavares

Team Platzi•

Realmente puedes establecer en containers, pages o components estos elementos, es mas como estas ordenando tus archivos.

Alejandro Betancur

student•

En mi caso manejo Login, Register y Home como Pages. A cada Page le agrego los componentes necesarios. Creo que es dependiendo a la estructura y organización que quieras darle a tu proyecto.

Maria Elizabeth Minero Alvarenga

student•

Muy bueno!

Karen Paola Diaz Duarte

student•

Práctica:

Pablo Nicolás Alonso

student•

¿Cómo se haría para que se haga una hoja de estilo por cada página/container que tenga? Porque al fin y al cabo las páginas/container no se tienen que distanciar mucho en apariencia, ya que se sobrescriben los estilos si es que se necesita que el body tenga un estilo u otro. Siempre comparten el mismo archivo .css al ser compilado

Marco Aurelio

student•

Buen día seguí todos los pasos, pero cuando llamo a mas componentes no me los quiere mostrar. Me podría ayudar? <BrowserRouter> <Layout>

<Route exact path="/" component={Header}/>
<Route exact path="/login" component={Iniciarsesion}/>
<Route exact path ='/register' component={Register}/>
<Route exact path='/contraseña' component={Contraseña}/>
<Route exact path='/alertacont' component={Alertacont}/>
<Route exact path='./repetir' component={Repetirc}/>
<Route exact path='./Voluntariado' component={Voluntariado1}/>


</Layout>

</BrowserRouter>

Repetirc y voluntariado solo me muestra layout no el contenido.

Jaime David Burbano Montoya

student•

Te falta usar el Switch

Marco Aurelio

student•

Buen dia, si Jaime agregue el Switch y sigue igual

Jose Gustavo Pacheco Sanchez

student•

Es necesario que todas las rutas lleven exact?

Rubén Padilla

student•

La propiedad exact hace que el match de las rutas sea estricto.

// sin exact
<Route path="/items" />

De este modo coincidiran las rutas: /items /items/2 /items/something/

// con exact
<Route exact path="/items" />

Asi haces que coincida de manera exacta:

/items

Esta clase te puede ayudar: Route

Jose Gustavo Pacheco Sanchez

student•

Muchas gracias, por la ayuda

Juan Burns

student•

Buenas!, no entendi para que es el <Switch>, quien puede explicarme detalladamente para que sirve?, muchas gracias y saludos!.

Erick Daniel Pérez Mata

student•

Puedes considerarlo así: todo lo que este dentro de <Switch> va a cambiar y todo lo que este fuera se mantendrá.

Axlin Miranda

student•

Saludos, lo que entendí fue el Switch se utiliza solo renderiza una vista con una ruta ingresada. En el caso que explico el profesor, si se tiene 3 rutas iguales se renderizan los componentes pero colocandole el Switch solo se va visualiza una, que sería la primera que coincida con la ruta. Espero haberte ayudado en aclarar la duda.

Container: 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