Ejercicio de programación con React: Estado global con Context API

Código
Puntuación
0h 25m

React estado global: gestiona autenticación con Context API. Implementa un sistema efectivo en React para compartir el estado de usuario de forma eficiente.

Este ejercicio de programación en React te reta a implementar un sistema de estado global en una aplicación React utilizando Context API. 

A través de este ejercicio, aprenderás a gestionar y compartir el estado de autenticación de usuario entre varios componentes de una aplicación. El reto consiste en crear un contexto llamado AuthContext que mantenga información del usuario y su estado de autenticación. 

Además, se debe desarrollar un proveedor denominado AuthProvider que permita a los componentes suscritos actualizar y acceder a este estado. Uno de los componentes clave será un consumidor que haga uso del hook useContext para acceder a AuthContext. Este componente tendrá la funcionalidad de mostrar el nombre del usuario cuando esté autenticado y un botón para iniciar sesión en caso contrario. Al interactuar con el botón, se simulará un login que establecerá el estado del usuario y su autenticación en el sistema.

Instrucciones:

Crea un contexto de autenticación denominado AuthContext que gestione el estado de autenticación. Este estado debe contener dos propiedades: usuario (un objeto con nombre y email) y autenticado (un booleano que indica si el usuario está autenticado o no).

Implementa un proveedor llamado AuthProvider que envuelva a los componentes que necesitan acceder al estado de autenticación. Este proveedor debe tener una función login que actualice el estado de usuario y autenticado.

Crea un componente consumidor que utilice el hook useContext para acceder al contexto AuthContext. Este componente debe mostrar el nombre del usuario si está autenticado o un botón para iniciar sesión si no lo está. Al hacer clic en el botón, se debe simular un inicio de sesión estableciendo el estado de usuario y autenticado.

Empezar ejercicio de programación

Todos los ejercicios de programación de React

Evalúa tus conocimientos con ejercicios de programación en React de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de React

Supera todos los retos de React y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Tutorial para resolver este ejercicio de programación

React

React

Estado global con Context API

Servicios y gestión de estado

Otros tutoriales de programación con React