En una aplicación con perfiles privados, es fundamental crear una sección en la que el usuario pueda acceder a su perfil y, por ende, a la aplicación. A esta página se le conoce como login. Dentro de esta página, se manejan estados y formularios que le permiten al usuario dar sus datos para acceder. Cuando este accede, la aplicación cambia.
En este post, te enseñaremos cómo controlar el estado login en React para determinar el look de tu aplicación cuando el usuario tenga acceso a su perfil.
¿Qué es un estado login en React?
Un estado login en React, como cualquier otro estado en esta librería JavaScript, es un dato que cambia con el tiempo. En nuestro post sobre ejecutar un login en React, te enseñamos que el hecho de que un usuario vea una aplicación a la que inicialmente no tiene acceso y que luego sí tiene es un dato que cambia.
Para conocer más sobre este elemento, te invitamos a leer el post sobre el estado del componente en reactjs.org.
Por ello, podemos guardar el dato login en un estado. Podemos definir que el dato login es inicialmente igual al valor false, pero, después de conseguir el acceso, es igual al valor true.
Este estado no solo funciona para saber si las credenciales del usuario son correctas o no, también sirve para generar cambios en nuestra aplicación. Entonces podemos definir que, por ejemplo, el botón que decía log in pase a ser log out cuando el usuario tenga acceso. Es decir, cuando el estado login sea igual a true.
Este estado login:true también podría darnos acceso a otras páginas. Por ejemplo, si tenemos una página que nos permite crear un nuevo post, podemos hacer que el usuario solo tenga acceso a ella cuando haya iniciado sesión. Esta lógica requiere un proyecto grande, como lo sería una aplicación como Twitter. Tomando esta aplicación como ejemplo, en este post, te enseñaremos cómo controlar el estado login en React con un cambio muy mínimo: renderizar la página de login vs renderizar la página de listado de tuits.
¿Cómo controlar el estado login en React?
Para controlar el estado login en React, debemos definir qué variables se definirán con este estado. En el caso de nuestro proyecto, vamos a decir que, cuando el estado sea login: true, se renderice el componente tweetsPage que hemos creado en nuestro post sobre crear una página listado en React. En cambio, cuando el estado sea login:false, se renderizará la misma página de inicio, creada en nuestro post sobre crear una página de login en React.
Entonces, lo primero que deberemos hacer es crear el estado, inicializado a false. Te recomendamos crear este estado en el componente más alto de tu aplicación. En nuestro caso, como hemos creado nuestra aplicación con create-react-app, este será el archivo App.js.
const [isLogged, setIsLogged] = useState (false)
Ahora, para renderizar uno u otro componente, podemos usar la sintaxis condicional de JavaScript. Para ello, debemos abrir una ventana a JavaScript en React usando las llaves { }:
{isLogged ? <TweetsPage/> : <LoginPage/>
En este momento, si arrancamos nuestra aplicación, veremos la página LoginPage. ¿Por qué? Pues porque el estado isLogged es falso. Ahora, si cambiamos el valor con el que inicializamos este estado a true, veríamos la página TweetsPage.
Una vez tenemos definido nuestro elemento, para controlar el estado login en React, debemos definir cuándo este estado pasa de ser true a false. Recuerda que este cambio lo ejecutamos con la función setIsLogged.
Entonces, para ejecutar esta acción, deberemos insertar esta función dentro de la página de login, un componente menor a App. Aquí nos encontramos con un problema de comunicación, pues debemos pasar una función definida en un padre a un hijo. ¿Cómo logramos esta comunicación? Pues con el elemento prop. Para conocer más sobre este proceso, te invitamos a leer nuestro post sobre comunicar padres a hijos en React.
¿Qué sigue?
Ahora que sabes cómo controlar el estado login en React, ¡es momento de crear tu propia aplicación con página de inicio! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a crear todo tipo de proyectos de programación para la web con lenguajes como JSX, JavaScript, HTML y CSS. De este modo, te convertirás en un experto del desarrollo web en pocos meses. ¿A qué esperas para matricularte? ¡Hazlo ya y triunfa!
