Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 7D : 1H : 9M : 8S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de React Router y Redux

Curso de React Router y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Container: Register

5/29

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

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.

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.

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

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

}

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

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

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.

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

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;```

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

Aqui un poco de documentacion para Switch de react-router-dom :
reactrouter.com/core/api/Switch

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

Muy bueno!

Práctica:
3.PNG

la etiqueta de button me marca un error, lo soluciones agregandole la propiedad type=‘button’

<button type='button' className='button'>Registrarme</button>

My Code!!








scss de stylus …

Que cool, antes había visto switch pero nunca entendí su uso, gracias!

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

Excelente

Les comparto mi componente NotFound junto a unos recursos en los cuales podrán encontrar ilustraciones open source super geniales:

NotFound:
Imagen

NotFound.jsx:

import React from 'react';
import NotFoundImage from '../assets/static/hiker-man-colour.svg';
import '../assets/styles/components/NotFound.scss';

const NotFound = () => (
  <>
    <div className='notfound__container'>
      <div className='notfound__heading font__config'>
        <h1 className='notfound__heading--title'>It looks like you are lost</h1>
      </div>
      <div>
        <img className='notfound__image' src={NotFoundImage} alt='Not found' />
      </div>
      <div>
        <button type='button' className='notfound__button font__config'>Go to home</button>
      </div>
    </div>
  </>

);

export default NotFound;

NotFound.scss:

@import '../Vars.scss';

.font__config{
    font-family: $notFound-font;
    color: white;
}

.notfound__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.notfound__heading:hover{
    font-weight: 900;
}

.notfound__image {
    width: 20rem;
    height: 20rem;
}

.notfound__button{
    border-radius: 2rem;
    width: 20rem;
    height: 3rem;
    border: none;
    color: black;
    font-size: 1.4rem;
}

.notfound__button:hover{
    color: white;
    background-color: black;
    transition: backgrund-color 2s ease-in-out 3s ;
}

Recursos de ilustraciones open source gratuitas:

Espero les guste!

Me llama la atención ese osito que aparece en el navegador de Oscar jajaja.

Apuntes:
Con <Switch></Switch> nos aseguraremos que cuando encuentre solamente la primera ruta, esa es la única que se va a renderizar.

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

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

export default App;

en mi caso los estilos eran los mismos que del logan, importe el mismo archivo . gg well played.

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

Así va mi App.js


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

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

export default App;

a

Mas comodo y para los que vienen de SPA con Vanilla Javascript se puede:
import {BrowserRouter as Router, Switch, Route} from ‘react-router-dom’

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.

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.

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

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

}

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

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

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.

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

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;```

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

Aqui un poco de documentacion para Switch de react-router-dom :
reactrouter.com/core/api/Switch

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

Muy bueno!

Práctica:
3.PNG

la etiqueta de button me marca un error, lo soluciones agregandole la propiedad type=‘button’

<button type='button' className='button'>Registrarme</button>

My Code!!








scss de stylus …

Que cool, antes había visto switch pero nunca entendí su uso, gracias!

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

Excelente

Les comparto mi componente NotFound junto a unos recursos en los cuales podrán encontrar ilustraciones open source super geniales:

NotFound:
Imagen

NotFound.jsx:

import React from 'react';
import NotFoundImage from '../assets/static/hiker-man-colour.svg';
import '../assets/styles/components/NotFound.scss';

const NotFound = () => (
  <>
    <div className='notfound__container'>
      <div className='notfound__heading font__config'>
        <h1 className='notfound__heading--title'>It looks like you are lost</h1>
      </div>
      <div>
        <img className='notfound__image' src={NotFoundImage} alt='Not found' />
      </div>
      <div>
        <button type='button' className='notfound__button font__config'>Go to home</button>
      </div>
    </div>
  </>

);

export default NotFound;

NotFound.scss:

@import '../Vars.scss';

.font__config{
    font-family: $notFound-font;
    color: white;
}

.notfound__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.notfound__heading:hover{
    font-weight: 900;
}

.notfound__image {
    width: 20rem;
    height: 20rem;
}

.notfound__button{
    border-radius: 2rem;
    width: 20rem;
    height: 3rem;
    border: none;
    color: black;
    font-size: 1.4rem;
}

.notfound__button:hover{
    color: white;
    background-color: black;
    transition: backgrund-color 2s ease-in-out 3s ;
}

Recursos de ilustraciones open source gratuitas:

Espero les guste!

Me llama la atención ese osito que aparece en el navegador de Oscar jajaja.

Apuntes:
Con <Switch></Switch> nos aseguraremos que cuando encuentre solamente la primera ruta, esa es la única que se va a renderizar.

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

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

export default App;

en mi caso los estilos eran los mismos que del logan, importe el mismo archivo . gg well played.

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

Así va mi App.js


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

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

export default App;

a

Mas comodo y para los que vienen de SPA con Vanilla Javascript se puede:
import {BrowserRouter as Router, Switch, Route} from ‘react-router-dom’