Container: Register

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?

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;

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

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

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.

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

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

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

Muy bueno!

Práctica:

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

Excelente

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

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

NotFound:

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:

• Undraw
• DrawKit
• Isometric

Espero les guste!

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

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

Ya que estamos agregando nuestros componentes, vamos a usar un nuevo elemento de parte de React Router Dom donde va a manejar un switch que va a empujar la seccion que necesitamos. Esto haciendo solo RENDER con la primera RUTA que haga match que le indiquemos con esta validacion.

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

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

export default App;

La diferencia de usar “Switch” y no usarlo radica en que si no lo usamos y tenemos varioss componentes con el mismo nombre de ‘path’, estos se renderizaran una detras de otro segun el orden en que hayan sido declaradas. Mientras que al usar Switch teniendo varios componentes con el mismo nombre de ‘path’, solo te mostrará el primer container coincidente que haya sido declarado.

A partir de la versión 6 de react router el componente <Switch> no existe más, en su lugar se usa el componente <Routes> para encapsular las rutas.

Siendo hoy 27-Enero-2023, este codigo esta actualizado, por la version de React router dom, y quedaria asi la implementacion:

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

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

export default App;```

scss de stylus …

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

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

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

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;

a