Crear una página de login en React

Autor: | Última modificación: 12 de septiembre de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

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 nuestra página de login. 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 login 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, 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:

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 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 testear tu página login es renderizarla. Si has creado una aplicación usando create-react-app, puedes renderizarla en el documento App.js que viene con esta herramienta.

¿Cuál es el siguiente paso?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!