Ejercicio de programación con React: Estado global con Context API
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
.
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.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado local con useState y useReducer
Estado global con Redux Toolkit
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
Componentes funcionales
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
Estado global con Context API
Servicios y gestión de estado