En esta clase vamos a aprender sobre promesas y el mΓ©todo .map() en React JS. Las promesas son objetos que representan la eventual terminaciΓ³n o falla de una operaciΓ³n asincrΓ³nica, y son una parte fundamental del manejo de operaciones asΓncronas en JavaScript.
El mΓ©todo .map() en JavaScript se utiliza para iterar sobre cada elemento de un array y devolver un nuevo array con los valores que resultan de aplicar una funciΓ³n a cada elemento del array. Es una forma eficiente y concisa de transformar y manipular arrays en JavaScript.
Vamos a comenzar por entender el concepto de promesas en JavaScript. Una promesa puede estar en uno de tres estados: pendiente, cumplida o rechazada. Cuando una promesa se resuelve exitosamente, se llama "resuelta" y si ocurre un error durante la resoluciΓ³n de la promesa, esta se llama "rechazada".
Para crear una promesa en JavaScript, utilizamos la clase Promise. Por ejemplo:
const miPromesa = new Promise((resolve, reject) => {
// Realizamos alguna operaciΓ³n asincrΓ³nica, como una llamada a una API
const exito = true;
if(exito) {
resolve("OperaciΓ³n exitosa");
} else {
reject("OcurriΓ³ un error");
}
});
miPromesa.then((respuesta) => {
console.log(respuesta);
}).catch((error) => {
console.error(error);
});
En el ejemplo anterior, creamos una promesa que resuelve si la operaciΓ³n es exitosa, y rechaza si ocurre un error. Luego manejamos la promesa con los mΓ©todos .then() y .catch() para manejar la respuesta exitosa y los errores respectivamente.
Ahora, vamos a ver cΓ³mo podemos utilizar promesas y el mΓ©todo .map() en React JS. Supongamos que tenemos un array de nΓΊmeros y queremos realizar una operaciΓ³n asincrΓ³nica sobre cada uno de ellos. Podemos hacer lo siguiente:
const numeros = [1, 2, 3, 4, 5];
const operacionAsincronica = (numero) => {
return new Promise((resolve, reject) => {
// OperaciΓ³n asincrΓ³nica
setTimeout(() => {
resolve(numero * 2);
}, 1000);
});
};
const promesas = numeros.map((numero) => {
return operacionAsincronica(numero);
});
Promise.all(promesas)
.then((resultados) => {
console.log(resultados); // [2, 4, 6, 8, 10]
})
.catch((error) => {
console.error(error);
});
En este ejemplo, creamos un array de nΓΊmeros y una funciΓ³n que realiza una operaciΓ³n asincrΓ³nica sobre cada nΓΊmero. Utilizamos el mΓ©todo .map() para crear un array de promesas, donde cada promesa representa el resultado de la operaciΓ³n asincrΓ³nica sobre cada nΓΊmero. Luego usamos Promise.all() para esperar a que todas las promesas se resuelvan o alguna sea rechazada.
Finalmente, manejamos las respuestas exitosas o los errores con los mΓ©todos .then() y .catch() respectivamente.
Espero que esta explicaciΓ³n te haya ayudado a comprender cΓ³mo trabajar con promesas y el mΓ©todo .map() en React JS. Β‘Sigue practicando y experimentando con estos conceptos para mejorar tus habilidades en el desarrollo de aplicaciones con React JS! π¨π½βπ»
GRANDE CARPIIIIIIIIII!
Hola carpΓ, disculpe que te haga esta pregunta, es que estoy en la cursada de react y me gustarΓa aprender lo que mΓ‘s pueda, en el minuto 17:00, hiciste un cambio, ΒΏporque cambiaste de una exportaciΓ³n nombrada a una exportaciΓ³n por defecto? quede con esa duda, muchas gracias.
Gracias carpi sos un genio
siento que aprendo a toda velocidad con tus videos, explicas muy bien genio !
Le entendΓ mucho mΓ‘s a ti Carpi y actualmente estoy en el curso de ReactJS en CodeHouse, muchas gracias por crear este contenido, Γ©xito π«Άπ»πππͺπ»πͺπ»
Excelente te felicito
Gracias por el video.
En mi opiniΓ³n segmentar tanto el cΓ³digo hace que se pierda una visiΓ³n total del flujo de datos. EstΓ‘ tan segmentado y con nombres de variables tan idΓ©nticas que uno se pierde porque nada se diferencia.
genioo carpiiiππ. tus videos son los mejores. aprendo mucho de ellos!
te quiero carpi
Gracias Carpi por el video, muy bueno!
Hola Carpi. Gracias por compartir la info. Muy buena!! Tengo una consulta… No me muestra el primer tΓtulo en el DOM. ni ninguno. Tiene que ver el json??
te amo
Hola Carpi, gracias como siempre por los videos son de mucho ayuda! Consulta, tenes los repositorios subidos de estos temas en GitHub?
Excelente curso!!!
Sos un genio chabon, la verdad que sos con el que mas aprendo porque vas al grano directo jajaj, me encanta, a seguir asi. Estoy en un bootcamp de desarrollo Front end y la verdad que este curso que hiciste, me esta sirviendo un monton, gracias por todo!
Craaackk!!!!
BΓ‘rbaro Carpi. Excelente explicaciΓ³n y muy bien aplicado el ejemplo. Gracias.
Hola Carpi. Gracias por el video
allΓ esta mi comentario: muchas gracias por todo Carpi…
Gracias por el video, se me aclara todo π