React: estados globales con Context API para autenticación

Descripción

Desarrolla un sistema global de autenticación en React usando Context API. Administra el estado de usuario con AuthContext y actualízalo mediante un proveedor.

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).

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Solución al ejercicio de programación en React

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el ejercicio de programación en React para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con ejercicios de programación en React

Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Asistente de IA

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a programar

Únete a miles de desarrolladores mejorando sus habilidades en React

⭐⭐⭐⭐⭐

4.9/5 valoración