¿Cómo hacer un login con React JS?
Al crear cualquier aplicación web con perfiles privados, es fundamental crear una página en la que los usuarios puedan acceder a sus cuentas. Una parte clave de este proceso de creación es otorgar acceso según las credenciales que inserte el usuario. En este post, te enseñaremos a ejecutar un login en React, una acción muy importante en la creación de una aplicación web.
¿Qué es ejecutar un login en React?
Cuando hablamos de ejecutar un login en React, nos referimos a definir la acción que sucederá cuando un usuario hace clic en el botón de log in en una aplicación. Entonces, si pensamos en una aplicación como Twitter, el botón de login permite al usuario acceder a su cuenta de Twitter y a todas las páginas de la aplicación. Para permitir este acceso, Twitter debió crear un formulario con dos input, uno para escribir nuestro usuario y otro para escribir nuestra contraseña.
En nuestro post sobre crear una página de login en React, te hemos guiado por el proceso de crear un formulario con estos dos input. Como puedes leer en el post sobre formularios en reactjs.org, un elemento de formulario form nos permite crear distintos espacios para insertar datos. A estos datos les llamamos input.
Entonces, una vez tenemos nuestro formulario login con nuestros input definidos y controlados, deberemos coger los datos que podemos capturar del formulario. Finalmente, un formulario es el punto de entrada por el que un usuario puede insertar datos a nuestra aplicación. Después de insertar sus datos, el usuario hace clic sobre el botón login para acceder a nuestra aplicación.
Para darle acceso al usuario, este clic debería llamar a nuestra API, que nos debe decir si las credenciales introducidas son correctas o no. En función de esto, la API nos devolverá una respuesta. Si quieres aprender cómo hacer esta parte del proceso, te recomendamos leer nuestro post sobre enviar datos a una API en React.
Luego, con la respuesta de la API, que normalmente es un token de acceso, podremos hacer que el usuario entre a nuestra aplicación. A todo este proceso le llamamos ejecutar un login en React.
¿Qué cambia al ejecutar un login en React?
Como puedes haber leído en nuestro post sobre estados en React, en esta librería JavaScript todo funciona como un estado. Un estado es uno de los tipos de datos que tenemos en React. Por un lado, tenemos las propiedades de un componente, conocidas como props. Estos son datos estáticos que podemos añadir a un componente, como que su color de fondo sea azul (backgroundColor: ‘blue’). Por el otro, tenemos un estado, un dato interno del componente que cambia con el tiempo.
Entonces, para pensar en ejecutar un login en React, podríamos partir de pensar en qué cambia cuando hacemos esta acción. Si pensamos en un cualquier red social, sabemos que al inicio no tenemos acceso, pero tras añadir nuestras credenciales, lo tenemos. Por ello, tener o no acceso a la aplicación es un dato que cambia con el tiempo. Y como es un dato que cambia con el tiempo, lo podemos tomar como un estado.
Entonces, al ejecutar un login en React, podemos pensar en un estado React login que empieza con un valor false y acaba con un valor true. Este dato puede hacer más que darnos acceso, pues con él podemos definir muchos detalles de nuestra aplicación. Una de las cosas que podemos definir, por ejemplo, es si el botón de arriba dice log in o log out según el estado actual. Si quieres aprender más sobre este proceso, te invitamos a leer nuestro post sobre controlar el estado login en React.
¿Cuál es el siguiente paso?
Ahora que sabes cómo ejecutar un login en React, ¡ha llegado el momento de crear tu propio formulario de React login en tus aplicaciones web! Si todavía no sabes cómo hacerlo, no te preocupes, ya que en KeepCoding nos gustaría acompañarte en el proceso. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a desarrollar con herramientas y lenguajes de programación para la web como React, JSX, Javascript, HTML y CSS. ¿A qué esperas para dar el siguiente paso en tu aprendizaje? ¡Matricúlate ya y cambia tu vida profesional!
