Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
12H
32M
46S
Curso de React Router 5 y Redux

Curso de React Router 5 y Redux

Oscar Barajas Tavares

Oscar Barajas Tavares

Container: Login

4/29
Recursos

Vamos a descargar el proyecto del curso de Frontend de escuela de JavaScript para crear los componentes que necesitaremos, en caso de que vengas del curso de React no debes descargar nada.

Debemos modificar nuestra configuraci贸n del entorno de desarrollo local para que pueda funcionar con el uso de rutas, debemos ir al archivo webpack.config.js y a帽adir este fragmento de c贸digo antes de plugins:

module.exports = {
  {/*...*/}
  devServer: {  
    historyApiFallback: true,  
  },
  {/*...*/}
}

Aportes 68

Preguntas 17

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Aqui esta el codigo de section para quien lo necesite

<section className='login'>
		<section className='login__container'>
			<h2>Inicia sesi贸n</h2>
			<form className='login__container--form'>
				<input className='input' type='text' placeholder='Correo' />
				<input className='input' type='password' placeholder='Contrase帽a' />
				<button className='button'>Iniciar sesi贸n</button>
				<div className='login__container--remember-me'>
					<label>
						<input type='checkbox' id='cbox1' value='first_checkbox' />
						Recu茅rdame
					</label>
					<a href='/'>Olvid茅 mi contrase帽a</a>
				</div>
			</form>
			<section className='login__container--social-media'>
				<div>
					<img src='../assets/google-icon.png' /> Inicia sesi贸n con Google
				</div>
				<div>
					<img src='../assets/twitter-icon.png' /> Inicia sesi贸n con Twitter
				</div>
			</section>
			<p className='login__container--register'>
				No tienes ninguna cuenta <a href=''>Reg铆strate</a>
			</p>
		</section>
	</section>```

les comparto el css de este video + algunos detallitos faltantes.

.login {
  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) */
}

.login__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: 700px;
  padding: 60px 60px 40px;
  width: calc(100% / 2);
}

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

.login__container--form label {
  font-size: 14px;
}

.login__container--remember-me {
  color: white;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.login__container--remember-me a {
  color: white;
  font-size: 14px;
  text-decoration: none;
}

.login__container--remember-me a:hover {
  text-decoration: underline;
}

.login__container--social-media > div {
  align-items: center;
  display: flex;
  font-size: 14px;
  margin-bottom: 10px;
}

.login__container--social-media > div > img {
  margin-right: 10px;
  width: 30px;
}

.login__container--register {
  font-size: 14px;
}

.login__container--register a {
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

.login__container--register a:hover {
  text-decoration: underline;
}

.login__container--form > .input {
  background-color: transparent;
  border-bottom: 2px solid white;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  color: white;
  font-family: 'Muli', sans-serif;
  font-size: 16px;
  height: 50px;
  margin-bottom: 20px;
  outline: none;
  padding: 0px 20px;
  min-width: 100%;
}

::placeholder {
  color: white;
}

.button {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Muli', sans-serif;
  height: 50px;
  letter-spacing: 1px;
  margin: 10px 0px;
}



Para no tener que abrir otro tab u otra ventana de la terminal solo para levantar el 鈥渏son-server鈥, modifica los scripts de tu package.json de esta manera:

    "server": "json-server initialState.json",
    "start": "webpack-dev-server --open --mode development & npm 	 
    run server"

As铆, al ejecutar npm start se levantar谩 tanto el servidor de desarrollo como el json-server

Muy dinamicas tus clases. Y es admirable la facilidad para explicar las cosas sin mucho enredo.

Un poco de documentacion para entender un poco devServer: Click Aqui

Para abrir una sola terminal y correr el json-server y nuestro proyecto podemos instalar el paquete concurrently: npm install concurrently --save-dev
Y despu茅s agregamos estos scripts en el archivo package.json en la zona de scripts:
鈥渟erver鈥: 鈥渏son-server initialState.json鈥,
鈥渄ev鈥: 鈥渨ebpack-dev-server --open --mode development鈥,
鈥渟tart鈥: 鈥渃oncurrently 鈥渘pm run server鈥 鈥渘pm run dev鈥濃,
de este modo al dar npm run start se abren el json-server y nuestro proyecto desde una sola terminal.

Les comparto el c贸digo css convertido a sass:

Login.scss

.login {
	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);

  &__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: 700px;
    padding: 60px 68px 40px;
    width: 300px;

    &--form {
      display: flex;
      flex-direction: column;
      label {
        font-size: 14px;
      }
    }

    &--remember-me {
      color: white;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      a {
        color: white;
        font-size: 14px;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }

    &--social-media {
      >div {
        align-items: center;
        display: flex;
        font-size: 14px;
        margin-bottom: 10px;
        >img {
          margin-right: 10px;
          width: 30px;
        }
      }
    }

    &--register {
      font-size: 14px;
      a {
        color: white;
        font-weight: bold;
        font-size: 16px;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }

  }
}

Container: Login

Creamos el componente para el Login; lo hacemos en los contenedores como componente presentacional; usamos las im谩genes; creamos los estilos.

Importamos nuestro componentes a nuestro archivo de rutas; lo a帽adimos a una ruta.

<Rute exact path="/login" component={Login} />

Antes de plugins en el archivo de configuraci贸n de webpack debemos colocar lo siguiente para trabajar con rutas e historias en el navegador.

devServer: {
    historyApiFallback:true,
}

Hola Todos, este es mi c贸digo!!!







De esta forma carga autom谩ticamente la App despu茅s del npm run start.

  devServer: {
    open: true,
    hot: true,
    port: 8081,
    historyApiFallback: true,
  },
const app = () => (
    <BrowserRouter>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
    </BrowserRouter>
);

Muy buena clase.

Esa configuraci贸n de web pack solo aplica en desarrollo, 驴Pero en producci贸n ya no es necesario agregar algo mas?

Que tal, para aquellos que tengan errores con el archivo de eslint que se dio en el curso de React Practico, lo estuve revisando y solvente todos los errores, aqui les dejo el link del gist que hice: https://gist.github.com/matias4205/e623b25c1f3c3859a072d9a98d8c1b10

Come se relaciona esto con el back end. O ya utilizando estas herramientas estamos reemplazando el back end

Pregunta.
Me ha salido el siguiente error y no se como solucionarlo
Ya llevo dos d铆as y no puedo pasar de este tema, me he regresado y he visto el siguiente y sigo con el mismo error. alguien que me pueda ayudar por favor.

Adjunto mi repositorio : https://github.com/SoterRamirez/EducVideo/tree/feature/router-redux
Desde ya, muchas gracias por su ayuda.

Tengo la misma configuraci贸n de Eslint y me aparecen muchos 鈥渆rrores鈥 que al profe no le aparece, lo mismo me pasaba en el curso pasado ): M谩s all谩 del origen de lo que produce el error mi pregunta es porqu茅 a mi me aparecen y al profe no teniendo exactamente el mismo .eslintrc, mi node corre sobre WSL (Ubuntu), 煤ltimas versiones de todo

Yo estoy practicando, uso un archivo webpack.config.dev.js y esta solucion del profe no me funciono, lei la documentacion y encontre que escribiendo lo siguiente en el archivo webpack.config.dev.js funciona perfectamente.

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    stats: 'errors-only',
    open: true,
    port: 3006,
    compress: true,
    historyApiFallback: true,
  },

En Vscode existe una extensi贸n llamada.

html to jsx

Muy buena para estos casos en los que estas pasando contenido de HTML a JSX!!

Oscar hay que trabajar en pedagog铆a.

Se puede tener conocimiento de alg煤n tema y para saberlo transmitir hay que aplicar pedagog铆a y una buena estructura de planeaci贸n de lo que se va a ense帽ar,

Muchos cursos de Platzi fallan en este punto.

Mi dise帽o se estaba viendo as铆:
y lo resolv铆 solo eliminando una l铆nea de Css

.login__container{
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    // width: 300px; //Esta l铆nea
    min-height: 700px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

Como hacer para que salga el emoji a mi tambien??

Yo tengo poco menos de 2 a帽os con React y veo algunas cosas que no conoci en su momento, pero es buen entender algo de codigo legacy por eso de que toque trabajar y actualizar a versiones recientes.

Deberian actualizar este curso porque React Router ya cambio:

import React from 鈥渞eact鈥;
import { BrowserRouter, Route, Routes } from 鈥渞eact-router-dom鈥;
import Home from 鈥溾/containers/Home鈥;

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

export default App;

No me gusta que va copiando codigo, esa no es la idea de un curso.

Alguien sabe por que cuando corro la aplicacion, se renderizan las dos rutas en la misma pantalla

Otra soluci贸n para correr el servidor jason sin usar otra consola u otro tab es instalar la dependencia npm-run-all y modificar lo siguiente en tu archivo jason:

"client": "webpack-dev-server --open --mode development",
 "server": "json-server --port 3001 --watch initialState.json",
 "start": "npm-run-all -p client server",

Al agregar la configuraci贸n del devServer me sale el siguiente error

Muy buena clase.

Que buena explicaci贸n por parte de Oscar.

Debemos modificar nuestra configuraci贸n del entorno de desarrollo local para que pueda funcionar con el uso de rutas, debemos ir al archivo webpack.config.js y a帽adir este fragmento de c贸digo antes de plugins:

module.exports = {
{//}
devServer: {
historyApiFallback: true,
},
{//}
}

me surge una duda. 驴Hay algun problema si se deja el Archivo App con extension JSX?

Listo me to茅 con varios errores pero quedo todo bien hasta esta parte

hola鈥e aparece esta advertencia:

Advertencia internal-error (ESLint) Failed to load config 鈥減rettier鈥 to extend from.

驴Alguna idea de porqu茅 ser谩?

Buena clase.

He aqu铆 la documentaci贸n del api de DevServer historyApiFallback

Vengo del curso Practico de React, con mi proyecto de Platzi video sin errores ejecut谩ndose correctamente.
Tengo todo correcto en c贸digo fuente no hay errores sin embargo al ejecutar
npm run start

react.development.js:167 Warning: React.createElement: type is invalid 鈥 expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it鈥檚 defined in, or you might have mixed up default and named imports.
Check the render method of App.
in App

Aparece el error descrito arriba, ya revise todo estoy haciendo bien las exportaciones
Investigando aplique la soluci贸n que aparece en esta URL
https://platzi.com/clases/1079-react-2016/6326-actualizando-a-la-ultima-version-de-react-router/
luego ejecuto nuevamente npm run start y me pedia instalar react-router
npm install --save react-router
pero al final regresa al mismo error
Check the render method of App.
in App

que bueno es volver a ver el curso y en practica mucho mejor

Sigo sin poder hacer match con login

woooo, excelente clase 馃槃

Los primeros pasos con Router, buenisimo!

El historyApiFallback: true de React Router es un simil de mode: 鈥榟istory鈥, en Vuejs. ? o cumplen finalidades distintas

Me encanta la seguidilla de cursos pero todav铆a no entiendo para que dedicarle tanto tiempo a la configuraci贸n manual del webpack

Buenas, que debo hacer para solucionar el error con los archivos .json

Uncaught Error: Cannot find module './translationses.json'
    at webpackContextResolve (.json$:13)
    at webpackContext (.json$:8)
    at App (App.js:14)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)

gracias鈥

les comparto el codigo de esta clase
Login.jsx

import React from "react";
import "../assets/styles/components/Login.scss";
import googleIcon from "../assets/static/google-icon.png";
import twitterIcon from "../assets/static/twitter-icon.png";

const Login = () => {
	return (
		<section className="login">
			<section className="login__container">
				<h2>Inicia sesi贸n</h2>
				<form className="login__container--form">
					<input className="input" type="text" placeholder="Correo" />
					<input className="input" type="password" placeholder="Contrase帽a" />
					<button className="button">Iniciar sesi贸n</button>
					<div className="login__container--remember-me">
						<label>
							<input type="checkbox" id="cbox1" value="first_checkbox" />
							Recu茅rdame
						</label>
						<a href="/">Olvid茅 mi contrase帽a</a>
					</div>
				</form>
				<section className="login__container--social-media">
					<div>
						<img src={googleIcon} /> Inicia sesi贸n con Google
					</div>
					<div>
						<img src={twitterIcon} /> Inicia sesi贸n con Twitter
					</div>
				</section>
				<p className="login__container--register">
					No tienes ninguna cuenta <a href="">Reg铆strate</a>
				</p>
			</section>
		</section>
	);
};

export default Login;

Login.scss

.login {
	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) */
}

.login__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: 700px;
	padding: 60px 68px 40px;
	width: 300px;
}

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

.login__container--form label {
	font-size: 14px;
}

.login__container--remember-me {
	color: white;
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.login__container--remember-me a {
	color: white;
	font-size: 14px;
	text-decoration: none;
}

.login__container--remember-me a:hover {
	text-decoration: underline;
}

.login__container--social-media > div {
	align-items: center;
	display: flex;
	font-size: 14px;
	margin-bottom: 10px;
}

.login__container--social-media > div > img {
	margin-right: 10px;
	width: 30px;
}

.login__container--register {
	font-size: 14px;
}

.login__container--register a {
	color: white;
	font-weight: bold;
	font-size: 16px;
	text-decoration: none;
}

.login__container--register a:hover {
	text-decoration: underline;
}

routes/App.js

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "../containers/Home";
import Login from "../containers/Login";
const App = () => {
	return (
		<BrowserRouter>
			<Route exact path="/" component={Home} />
			<Route exact path="/login" component={Login} />
		</BrowserRouter>
	);
};

export default App;

webpack.config.js

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "bundle.js",
	},
	resolve: {
		extensions: [".js", ".jsx"],
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
				},
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: "html-loader",
					},
				],
			},
			{
				test: /\.(s*)css$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
					},
					"css-loader",
					"sass-loader",
				],
			},
			{
				test: /\.(png|gif|jpg)$/,
				use: [
					{
						loader: "file-loader",
						options: {
							name: "assets/[hash].[ext]",
						},
					},
				],
			},
		],
	},
	devServer: {
		historyApiFallback: true,
	},
	plugins: [
		new HtmlWebPackPlugin({
			template: "./public/index.html",
			filename: "./index.html",
		}),
		new MiniCssExtractPlugin({
			filename: "assets/[name].css",
		}),
	],
};

No encuentro ninguno de los cursos que mencionan desde el inicio de este curso, quer铆a entender mejor como se realizaron los proyectos, me est谩 mareando mucho.

en mi caso lo que hice fue crear un componente LoginForm donde estaba el formulario y y un componente presentacional para mostrarlo iigual que home.
la diferencia entre ambos es que en login no se muestra el div 鈥渕i perfil鈥 lo que hice fue agregar una condicional

{window.location.pathname !== 鈥/login鈥 && (
div menu perfil
)

y con esto ya se ve igual que en el html

Si notas que tu componente login.jsx no se renderiza es porque debes importar las rutas en tu archivo index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './routes/App';

ReactDOM.render(<App />, document.getElementById('app'));
`<section className='login'>
    <section className='login__container'>
      <h2>Inicia sesi贸n</h2>
      <form className='login__container--form'>
        <input className='input' type='text' placeholder='Correo' />
        <input className='input' type='password' placeholder='Contrase帽a' />
        <button className='button'>Iniciar sesi贸n</button>
        <div className='login__container--remember-me'>
          <label>
            <input type='checkbox' id='cbox1' value='first_checkbox' />
            Recu茅rdame
          </label>
          <a href='/'>Olvid茅 mi contrase帽a</a>
        </div>
      </form>
      <section className='login__container--social-media'>
        <div>
          <img src='../assets/google-icon.png' /> Inicia sesi贸n con Google
        </div>
        <div>
          <img src='../assets/twitter-icon.png' /> Inicia sesi贸n con Twitter
        </div>
      </section>
      <p className='login__container--register'>
        No tienes ninguna cuenta <a href=''>Reg铆strate</a>
      </p>
    </section>
  </section>e> 

Visual Studio Code tiene una terminal integrada pulsando Ctrl + 帽. Pueden abrirse varias Tabs.

Ya que estamos manejando diferentes rutas necesitamos preparar nuestro proyecto para poder manejarla. Ya que tengamos nuestro componente solo tenemos que agregarlo a las rutas, en caso de que nos marque error es porque no hemos configurado el webpack para manejo de rutas internas, esto solo despues de plugins le agregamos un:

devServer: {
        historyApiFallback: true,
    },

Y ya agregamos la nueva ruta como lo hicimos anteriomente:

<Route exact path="/login" component={Login} />

Cuando manejamos nuestro entorno de desarrollo local, debemos hacer que pueda manejar las rutas. Hacemos esto en el archivo de webpack.config.js

devServer: {
    historyApiFallback: true,
  }

import de las imagenes

import googleIcon from "../assets/static/google-icon.png"
import twitterIcon from "../assets/static/twitter-icon.png"

Pueden utilizar este convertidor de HTML a JSX si su editor les marca error

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
  <!-- Styles -->
  <link rel="stylesheet" href="./styles.css">
  <!-- Title -->
  <title>Inicia Sesi贸n</title>
</head>
<body>
  <header class="header">
    <img class="header__img" src="../assets/logo-platzi-video-BW2.png" alt="Platzi Video">
  </header>
  <section class="login">
    <section class="login__container">
      <h2>Inicia sesi贸n</h2>
      <form class="login__container--form">
        <input class="input" type="text" placeholder="Correo">
        <input class="input" type="password" placeholder="Contrase帽a">
        <button class="button">Iniciar sesi贸n</button>
        <div class="login__container--remember-me">
          <label>
            <input type="checkbox" id="cbox1" value="first_checkbox">Recu茅rdame
          </label>
          <a href="/">Olvid茅 mi contrase帽a</a>
        </div>
      </form>
      <section class="login__container--social-media">
        <div><img src="../assets/google-icon.png"> Inicia sesi贸n con Google</div>
        <div><img src="../assets/twitter-icon.png"> Inicia sesi贸n con Twitter</div>
      </section>
      <p class="login__container--register">No tienes ninguna cuenta <a href="">Reg铆strate</a></p>
    </section>
  </section>
  <footer class="footer">
    <a href="/">Terminos de uso</a>
    <a href="/">Declaraci贸n de privacidad</a>
    <a href="/">Centro de ayuda</a>
  </footer>
</body>
</html>```

Me estaba saliendo este error.

Luego de ver dos veces el video, me di cuenta que al definir la constante Login en Login.jsx todo es con par茅ntesis y yo lo hab铆a hecho con llaves lo que abarca la 鈥渟ection鈥. Ahora todo OK. 馃槈

As铆 es como tengo a Login.jsx

import React from 'react';
import googleIcon from '../assets/static/google-icon.png';
import twitterIcon from '../assets/static/twitter-icon.png';
import '../assets/styles/components/Login.scss';

const Login = () => (
<section className='login'>
    <section className='login__container'>
      <h2>Inicia sesi贸n</h2>
      <form className='login__container--form'>
        <input className='input' type='text' placeholder='Correo' />
        <input className='input' type='password' placeholder='Contrase帽a' />
        <button className='button'>Iniciar sesi贸n</button>
        <div className='login__container--remember-me'>
          <label>
            <input type='checkbox' id='cbox1' value='first_checkbox' />
            Recu茅rdame
          </label>
          <a href='/'>
            Olvid茅 mi contrase帽a
          </a>
        </div>
      </form>
      <section className='login__container--social-media'>
        <div><img src={googleIcon} /> Inicia sesi贸n con Google</div>
        <div><img src={twitterIcon} /> Inicia sesi贸n con Twitter</div>
      </section>
      <p className='login__container--register'>No tienes ninguna cuenta <a href=''>Reg铆strate</a></p>
    </section>
</section>
);
export default Login;

import React from "react";

const Login = () => {
  return (
    <section className="login">
      <section className="login__container">
        <h2>Inicia sesi贸n</h2>
        <form className="login__container--form">
          <input className="input" type="text" placeholder="Correo" />
          <input className="input" type="password" placeholder="Contrase帽a" />
          <button className="button">Iniciar sesi贸n</button>
          <div className="login__container--remember-me">
            <label>
              <input type="checkbox" id="cbox1" value="first_checkbox" />
              Recu茅rdame
            </label>
            <a href="/">Olvid茅 mi contrase帽a</a>
          </div>
        </form>
        <section className="login__container--social-media">
          <div>
            <img src="../assets/google-icon.png" /> Inicia sesi贸n con Google
          </div>
          <div>
            <img src="../assets/twitter-icon.png" /> Inicia sesi贸n con Twitter
          </div>
        </section>
        <p className="login__container--register">
          No tienes ninguna cuenta <a href="">Reg铆strate</a>
        </p>
      </section>
    </section>
  );
};
export default Login;

.

El componente es similar a un elemento ya que nos permite navegar dentro de la aplicaci贸n, pero sin necesidad de recargar la p谩gina. Para indicar el destino, simplemente pasamos el prop a = 鈥/ my-link鈥.

Primero importe el enlace desde react-router-dom. Agregue la etiqueta de enlace a la etiqueta de anclajes de la imagen del logotipo, tambi茅n con la cuenta y la secci贸n de cierre.

Adem谩s, necesitamos implementar el componente Link en nuestro contenedor de inicio de sesi贸n.

![](

Genial!

Para entender por qu茅 se coloca historyApiFallback en el webpack

Pr谩ctica: