Una página de login es una de las páginas más comunes al desarrollar una aplicación. Sea cual sea el lenguaje de programación que estemos usando, en esta página se crea un formulario para que el usuario pueda insertar sus datos de inicio y acceder a un contenido. En este post, te enseñaremos cómo crear una página de login en React para que los usuarios puedan acceder a tu aplicación.
¿Cómo crear una página de login en React?
Para crear una página de login en React, lo primero que debemos hacer es crear un nuevo archivo que contenga el código de esta sección. Nosotros estamos trabajando con una aplicación creada en create-react-app. Para conocer cómo están ordenadas las carpetas y archivos base en esta aplicación, te recomendamos leer nuestro post sobre el código de una aplicación creada con create-react-app.
Entonces, ¿dónde crearemos nuestro archivo? Nosotros hemos creado dentro de la carpeta src base una carpeta llamada components. En esta carpeta vamos metiendo todos los componentes que darán forma a nuestra aplicación. Es aquí donde crearemos nuestra carpeta LoginPage, que manejará todos los archivos de código que tengan que ver con el sistema de login react. Dentro de esta carpeta, vamos a crear un nuevo componente en un archivo que llamaremos LoginPage.js.
Para crear una página de login en React, debemos crear nuestro componente react signin con una función. En esta función haremos un return de un elemento div. Recuerda que podemos acceder a estos elementos HTML gracias a la lógica de react login, que une el poder de JavaScript con el de HTML. Entonces, dentro de nuestro elemento div meteremos un elemento h1, cada uno con sus respectivos nombres de clase.
Asumiendo que estamos intentando crear una página de login en React que se parezca a Twitter, las líneas de código siguientes reflejan esta estructura inicial:
// form login react
function LoginPage () {
return (
<div className = “loginPage”>
<h1 className = “loginPage-title”>Log in to Twitter</h1>
</div>
);
}
Ahora, para crear una página de login en React, debemos darle la posibilidad de tomar datos y procesarlos. Como puedes leer en nuestro post sobre los formularios en React, para ello debemos crear un formulario. Para crear este elemento, insertamos la etiqueta form y le metemos el número de input que necesitemos. Normalmente, una página de login en react native necesitará un input de usuario y uno de contraseña. Crearemos el input de usuario con un input de tipo text al que le agregamos una propiedad name “username”. Para crear el input de contraseña, creamos un input de tipo password con una propiedad name “password”.
A continuación, verás cómo los hemos insertado dentro de nuestra función:
function LoginPage () {
return (
<div className = “loginPage”>
<h1 className = “loginPage-title”>Log in to Twitter</h1>
<form>
<input type = “text” name= “username”></input>
<input type= “password” name= “password”/>
</form>
</div>
);
}
Como último paso para crear una página login en React, le añadiremos un botón. Este botón será el que permita al usuario acceder a la siguiente página una vez las credenciales sean aprobadas. En nuestro caso, solo basta con insertar la etiqueta button, pues ya hemos creado un elemento con propiedades de estilo. Si quieres saber más sobre cómo crear este tipo de elemento, te invitamos a leer nuestro post sobre estilizar botones con styled components.
Para definir nuestro botón, le damos una propiedad type=“submit” y una propiedad variant=“primary”. La propiedad variant la puedes definir cuando estés estilizando tus botones para tener un tipo de plantilla que puedes pasar a varios elementos. Esto es posible gracias a que la librería styled components une el poder de CSS con el de JavaScript. Es decir, dentro de un código que simula ser CSS podemos insertar lógica de tipo JavaScript.
Entonces, nuestro archivo login.js final quedaría de la siguiente manera:
import Button from ‘../../common/Button’;
function LoginPage ( ) {
return (
<div className= “LoginPage”>
<h1 className = “loginPage-title”>Log in to Twitter</h1>
<form>
<input type = “text” name= “username”></input>
<input type= “password” name= “password”/>
<Button type=“submit” variant=“primary”>
Login
<Button/>
</form>
</div>
);
}
Ahora, lo único que quedaría para testar tu página login google reactjs es renderizarla. Si has creado una aplicación usando create-react-app, puedes renderizarla en el documento App.js que viene con esta herramienta.
Después de leer este post, no solo sabes exactamente cómo crear una página de login en React, sino que también estás más cerca de dominar esta increíble herramienta de programación. Ahora, para dominar por completo tanto React como otros lenguajes de programación para la web, como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva aprenderás todo lo necesario para convertirte en un experto del desarrollo web en muy pocos meses. ¿A qué esperas para dar el siguiente paso? ¡Matricúlate ahora y dale un giro a tu vida profesional!
