Lo hice con axios, pero parece que no funciona con snakbar, vi tu otro video para los snakbars, pero no puedo hacerlos funcionar juntos este metodo con snackbars
Realmente está explicado para hacer un fetch como un pro. Es un gusto ver tus videos Carlos, seguí haciendo tu valioso aporte a la comunidad. Un gran saludo desde Argentina!
Podrías ocupar de base el hook del vídeo. La API de fetch te deja especificar que método HTTP tiene que utilizar, entonces puedes pasarlo como parámetro. Y luego pasarle un objeto para destructurarlo con la información que vayas a necesitar.
Explicas super bien , esta super bueno el video, la verdad es que aprendí un monton de cosas nuevas a la hora de hacer peticiones fetch , gracias , espero puedas subir mas contenido asi !
Muchas gracias, Carlos!! Es increible la cantidad de herramientas que existen en React/Javascript. Un camino sin fin, pero con esta clase de videos, sin dudas, se hacen más llevaderos. Saludos y gracias, nuevamente.
Gracias por el vídeo!!! Aunque creo que el último ejemplo aunque evitemos renderizados también dejamos al usuario un poco sin saber que está pasando en casos de cargas lentas.
Yo opino igual, aunque si es verdad que cuando hay un error en vez de enviar un throw, mejor enviar un error y así cuando se hace llamada me duele un data con un error o un response, podría controlar un error.
Lo que me costó a mí entender el array vacío del useeffect y era algo tan simple como "se renderiza una vez cuando se monte el componente" eres dios Carlos ♥️
Si lo analizas bien useEffect no es más que una función que recibe dos parámetros un callback y un array de dependencia, si está vacío el array solo llama al callback una vez de lo contrario llamará cada que las dependencias cambien
Consulta profe, algo que no entiendo es en que momento se vería lo del Loading... ya que la idea es que si los user tardan en cargar, estaría bien que aparezca un Loading... o un Cargando usuarios...
Gran material! Hubiese sido más interesante el ejemplo usando Typescript, para ver por ejemplo si se puede tipar el fetch o algo así. Saludos desde Santiago de Chile
Excelente video, he aprendido mucho 👍🏻. Solo tengo una consulta, en el segundo 14:02, no sería mejor usar un useRef en lugar de useState, para almacenar el AbortController? Ya que la función del useState no se está utilizando y solo se necesita acceder a la función abort de la instancia del AbortController. Solo pregunto, todos estamos aprendiendo 👍🏻
Hola genio, no soy experto pero creo que useRef se usa para otros enfoques, useRef obtiene una referencia única de un elemento del DOM, en cambio useState es para almacenar un estado. En este caso en vez de usar una variable let que va sobreescribiendo AbortController lo hace dentro de un useState, que es la magia de React. En la documentación dice que es preferible usar useState y evitar el useRef ya que es manejar el DOM de manera imperativa. El useRef usalo en casos que no quede otra, por ejemplo no lo uses para un input del form. Saludos , espero que sume el comentario
hola! gracias por el video! consulta, que extensiones usas para el autocompletado de codigo y el control de errores a medida que vas escribiendo codigo? gracias!
Buen video, sería bueno tener también contenido respecto al uso de los RSC, que creo se están intentando hacer para manejar el renderizado del lado del servidor sin pasar tampoco por API
Me has explicado todo lo que no en la escuela. Tengo una pregunta, cual seria la ventaja de Axios? porque se entrada, Fetch no parece generar mas código que Axios...
hola cuando hice lo del 6:36, me tiró el siguiente error: url is not defined. por lo visto ud tampoco definió URL pero si le funcionó, que pasa? (ya lo arreglé jaja, era un error mio)
Excelente aporte, solo me quedan dos dudas: La primera es como se podria controlar cuando el endpoint no da respuesta después de cierta cantida de segundos ? y la segunda es depronto porque así lo he trabajo en una plataforma de Ecommerce: porque se hace uso de Node JS para consumir los endpoint desde react ?
Aplicando el último método, el pro, ¿Cómo podría manejar los errores? Cuando fuerzo un error en la petición, el componente no se renderiza, queda la pantalla en blanco, me gustaría que se mostrara igualmente el título y colocar un mensaje de error o algo por el estilo. ¿Cómo se podría hacer? Gracias.
Hola Buenas Tardes. Estaba viendo tu video y me gustaria saber por qué en la versión que usas la función fetchData la ejecutas fuera del componente App y no dentro justo antes del read?
ese es el operador logico AND busca que 2 valores sean verdaderos, si ambos son verdaderos da true sino da false siempre por ejemplo: let hour = 12; let minute = 30; if (hour == 12 && minute == 30) { alert("La hora es 12:30"); } (en este caso daria true xq la hour es = 12 y los minute son = 30 basicamente con este operador comparas entre 2 valores, asi es mas facil de entender todavia a mi gusto
yo estoy teniendo un problema, cuando implemento el "AbortController" me deja de funcionar el "Loading", yo veo que se muestra como medio segundo y desaparece. Me di cuenta que cuando se renderiza el componente y se hace el fetch, el "AbortController" queda en "aborted" y siempre capturo en el catch un "AbortError" no se porque.
📘Mi nuevo libro "Aprendiendo React" ¡Ya a la venta!
amzn.to/3r83cjL
viendo este video aprendí lo que no habia aprendido en mucho tiempo de estudio. No siempre puedo ver tus videos pero son joyas
Muchisimas gracias!! 🤩
Nunca te quedas en lo básico. Siempre muestras ejemplos completos que aportan mucho valor.
Gracias.
Tienes el código visto en el vídeo, en el siguiente repositorio de GitHub
► github.com/carlosazaustre/react-fetch-pro
¡Crea tu perfil Freelance hoy en MOTIL. Utiliza el Código CARLOSJS para tener un descuento exclusivo!
► motil.page.link/Carolosjs
Lo hice con axios, pero parece que no funciona con snakbar, vi tu otro video para los snakbars, pero no puedo hacerlos funcionar juntos este metodo con snackbars
Excelente explicación lo de hacer el fetching de datos primero y luego renderizar, es lo que estaba buscando
Saludos carlos comenzare de nuevo tus videos de React jamas me rendire
Una maravilla saber cómo funcionan las cosas por debajo.
Muchas gracias por estas perlas.
Esta es una forma excelente de optimizar mis peticiones get,.¡Te agradezco mucho el esfuerzo y la dedicación a este video!
muy bien explicado y de una forma muy rapida , excelente tutorial
Realmente está explicado para hacer un fetch como un pro. Es un gusto ver tus videos Carlos, seguí haciendo tu valioso aporte a la comunidad. Un gran saludo desde Argentina!
Muchas gracias estoy inciando con react
me sirvió mucho
excelente forma de explicar y muy buena profundidad de contenido!!
Carlos Gracias Hermano, mantente así mente a na` usted es bueno, Dios te bendiga.
Gracias por compartir tus conocimientos Carlos!!
Gran material Carlos! Podras hacer en el futuro como hacer una request de POST, PUT y DELETE como un pro?
Podrías ocupar de base el hook del vídeo. La API de fetch te deja especificar que método HTTP tiene que utilizar, entonces puedes pasarlo como parámetro. Y luego pasarle un objeto para destructurarlo con la información que vayas a necesitar.
Explicas super bien , esta super bueno el video, la verdad es que aprendí un monton de cosas nuevas a la hora de hacer peticiones fetch , gracias , espero puedas subir mas contenido asi !
Muchas gracias, Carlos!! Es increible la cantidad de herramientas que existen en React/Javascript. Un camino sin fin, pero con esta clase de videos, sin dudas, se hacen más llevaderos. Saludos y gracias, nuevamente.
A ti Juan Pablo! La verdad es que si, es la Historia Interminable xD Me alegro que te de algo de luz entre tanta herramienta y librería :)
El unico video que explica el por que de todo y paso a paso
gran video con este aprendi de una vez como usar fetch con react
Gracias por el vídeo!!! Aunque creo que el último ejemplo aunque evitemos renderizados también dejamos al usuario un poco sin saber que está pasando en casos de cargas lentas.
Yo opino igual, aunque si es verdad que cuando hay un error en vez de enviar un throw, mejor enviar un error y así cuando se hace llamada me duele un data con un error o un response, podría controlar un error.
Que buen video , me gusta la temática de ir desde los más simple a lo más conplejo , gracias por todo nos ayudas mucho q todos 😊
Un placer :)
Pasé días buscando un buen vídeo, explicas súper bien, gracias!
Gracias a ti Mitts! Te lo agradezco mucho ;)
minimo este tipo de videos debería estar en tendencia, aprendi muchisimo grande crack
Lo mejor que he visto, Gracias, Saludos desde Caracas Venezuela
Gracias me ayudaste a resolver una problema que tenia desde hace 2 dias, esoy nuevo en REACT
Videazo, buenas practicas totalmente necesarias para poder hacer escalable el codigo!
Muchas gracias!
Que grande maestro!! También sería genial que hayas una versión para Post, Put, Patch y Delete
¡Explicas superbién, ojalá sigas subiendo material como este!
Muchas gracias, este video me sirvió para mejorar una app en la que trabajo ❤
Lo que me costó a mí entender el array vacío del useeffect y era algo tan simple como "se renderiza una vez cuando se monte el componente" eres dios Carlos ♥️
Si lo analizas bien useEffect no es más que una función que recibe dos parámetros un callback y un array de dependencia, si está vacío el array solo llama al callback una vez de lo contrario llamará cada que las dependencias cambien
@@angelcg635 gracias amigo
Excelente explicacion. aprendi varias cosas nuevas. Muy bueno!
Excelente explicación sobre todo la del. Abort no la sabía
no sabia que era tan fácil consumir apis xD gracias me ayudaste muchisimo :D
Interesante justamente estoy trabajando en una app sencilla y necesitaba saber como usar de manera más eficiente el fetching, gracias.
Gracias por tanto , tu libro de Javascript es mi Biblia 👏👏👏
Lo otro que te quería preguntar es que en cuanto a desempeño, cual es la diferencia entre el custom hook useFetch vs fetchData?
Genial, preciso estaba teniendo algunos problemas con la comunicación a las API. Gracias
Consulta profe, algo que no entiendo es en que momento se vería lo del Loading... ya que la idea es que si los user tardan en cargar, estaría bien que aparezca un Loading... o un Cargando usuarios...
Que buen video si que es fetching like a pro, a partir de ahora solo haré fetchings like you xD
Esto es oro puro.
Gran material! Hubiese sido más interesante el ejemplo usando Typescript, para ver por ejemplo si se puede tipar el fetch o algo así. Saludos desde Santiago de Chile
Muchas gracias @prodrigu75! Tengo en cuenta lo de TS, mi idea es crear contenido sobre TypeScript dentro de poco :)
Excelente video Carlos! Me sirvió mucho. 👌🙏🙌
excelente video!...me suscribi!!
Excelente video Carlos
espectacular vídeo, tal vez un apéndice a este puede ser el uso de SWR o React Query
Buena idea. Lo tenía pendiente, a ver si saco tiempo para prepararlo :)
Me encantó el manejo de promesas, imagino qué así se puede implementar en python u otro lenguaje que no tenga el async await. Me suscribo 👋
Estuve esperando este día 😂😂ajajja mas videos así 👌👌
Tienes de casualidad el como insertar datos de manera profesional consumiendo API con promise?, este video fue una maravilla, felicitaciones...
Super interesante nunca habia usado el suspnese para el rederizado que exlente contenido
Ahora que ya se va saliendo de Beta, será el principal uso :)
Muchas gracias por tus contenidos ❤
Gracias por el video, todo muy bien explicado. Nuevo subbbbb
Me encanta! Muchas gracias
Muchas gracias Gabriela!
pedazo de video, muchas gracias
Te amo ❤ jjj me gustaron cada auna de las estrategias...
Súper 🙏🙏🙏 gracias amigo. Saludos
Buah! Me has venido como caído del cielo. A probar el Suspender 🤓
Excelente video, he aprendido mucho 👍🏻. Solo tengo una consulta, en el segundo 14:02, no sería mejor usar un useRef en lugar de useState, para almacenar el AbortController? Ya que la función del useState no se está utilizando y solo se necesita acceder a la función abort de la instancia del AbortController.
Solo pregunto, todos estamos aprendiendo 👍🏻
Hola genio, no soy experto pero creo que useRef se usa para otros enfoques, useRef obtiene una referencia única de un elemento del DOM, en cambio useState es para almacenar un estado. En este caso en vez de usar una variable let que va sobreescribiendo AbortController lo hace dentro de un useState, que es la magia de React. En la documentación dice que es preferible usar useState y evitar el useRef ya que es manejar el DOM de manera imperativa. El useRef usalo en casos que no quede otra, por ejemplo no lo uses para un input del form. Saludos , espero que sume el comentario
muy bien video!! muchisimas gracias por el conocimiento 🔥 Me sumo a otros comentarios de hacer un proximo video con metodo post como un pro
Super Informativo!!
Maravilloso contenido, Gracias!!!
Me encantó el theme de tu visual studio code.
cual usas??
Menudo crack !!! Mis respetos :)
🤩🤩🤩
Hola Carlos,
Por fin he encontrado alguien que me explique bien y para inutiles e noobs como funciona. Eres un maquina!!😂😂😂😂😂😂😂😂😂
Me alegro que te haya gustado :)
👋 hey tremendo tips. Gracias por este valioso contenido.
maravilloso !, gracias carlos
Un placer 🫡
Pero que tuto mas pro men!
Muchas gracias Aníbal! Me alegro que te haya gustado ☺️
hola! gracias por el video! consulta, que extensiones usas para el autocompletado de codigo y el control de errores a medida que vas escribiendo codigo? gracias!
.
Buenos típs gracias por los vídeos compa
Buen video, sería bueno tener también contenido respecto al uso de los RSC, que creo se están intentando hacer para manejar el renderizado del lado del servidor sin pasar tampoco por API
Me has explicado todo lo que no en la escuela. Tengo una pregunta, cual seria la ventaja de Axios? porque se entrada, Fetch no parece generar mas código que Axios...
gran video, como la mayoría de los que haces!
Mil gracias Miguel! 🤩
hola
cuando hice lo del 6:36, me tiró el siguiente error: url is not defined.
por lo visto ud tampoco definió URL pero si le funcionó, que pasa?
(ya lo arreglé jaja, era un error mio)
Genial, super facil. Me gustaria saber ahora donde esta el repositorio con el codigo para seguir probando
Hola Santiago! Muchas gracias, se me olvidó subirlo, aquí lo tienes :)
► github.com/carlosazaustre/react-fetch-pro
@@CarlosAzaustre
Muchas gracias! Me ha sido muy util, tus videos siempre me ayudan! 🙌
@@CarlosAzaustre Muchas gracias a vos, me ha sido muy util el video. Consumo mucho tu contenido, gracias por eso tambien!
Excelente video.
Excelente aporte, solo me quedan dos dudas: La primera es como se podria controlar cuando el endpoint no da respuesta después de cierta cantida de segundos ? y la segunda es depronto porque así lo he trabajo en una plataforma de Ecommerce: porque se hace uso de Node JS para consumir los endpoint desde react ?
Excelente video Carlos, como gastaría mas apps con un poco mas de frontend, y aplicar esto en diferentes ambientes.
que extension utilizas para el autocompletado del código??
genial Carlos, buenos recursos. seria bueno algo que muestre como enviar peticiones POST PUT DELETE etc like a PRO
Gracias por el video
10:46 no sería mejor un useRef para evitar renderizados extra?
Que extension usas para autocompletar la sintaxis?
en caso de que la URL lleve query params, cuál sería la mejor forma de hacerlo?
Quien arrancando y a duras penas sabe qué es react?
Si aún estás en el tema, te recomiendo los API Rest en Js de JonMircha
Genial que buen video!!!
idolo!
el user que usas en el .map , es una palabra que puede ser cuaquier palabra? o usas ese termino por que en el array que devuelve la api dice user ?
Excelente!
a que se debe el uso de ?, antes del map? Gracias
Gran video 👌
Buenas Carlos, esto mismo se podria hacer directamente dentro de UseContext, como para tener el estado "data" en toda la app=?
como se llama la extension que usas para que al poner .then te cree todo el elemento? Gracias por el video
Aplicando el último método, el pro, ¿Cómo podría manejar los errores? Cuando fuerzo un error en la petición, el componente no se renderiza, queda la pantalla en blanco, me gustaría que se mostrara igualmente el título y colocar un mensaje de error o algo por el estilo. ¿Cómo se podría hacer?
Gracias.
Como puedo enviar los datos de un front-end en react (vitejs) a un backen en typescript usando formdata y fetch?
He estado el ultimo método con una tabla de NextUi pero no me deja mostrar los datos, me dice que no es compatible o algo al respecto
Cual extension en VSC te autocompleta el codigo?
Hola Buenas Tardes. Estaba viendo tu video y me gustaria saber por qué en la versión que usas la función fetchData la ejecutas fuera del componente App y no dentro justo antes del read?
Ahora mismo no tengo mucho tiempo, pero en cuanto pueda ya me estare viendo todos tus videos de React de nuevo que están geniales.
alguien se sabe algún video o alguna web, donde se explique la sintaxis esa de: loading && , data? osea el uso de &&, ?
Si loading es true entonces “que pase lo de aqui”
ese es el operador logico AND busca que 2 valores sean verdaderos, si ambos son verdaderos da true sino da false siempre por ejemplo:
let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) {
alert("La hora es 12:30");
} (en este caso daria true xq la hour es = 12 y los minute son = 30
basicamente con este operador comparas entre 2 valores, asi es mas facil de entender todavia a mi gusto
excelente video, como lo hacen para autocompletar textos?
yo estoy teniendo un problema, cuando implemento el "AbortController" me deja de funcionar el "Loading", yo veo que se muestra como medio segundo y desaparece. Me di cuenta que cuando se renderiza el componente y se hace el fetch, el "AbortController" queda en "aborted" y siempre capturo en el catch un "AbortError" no se porque.
que tema utilizas en el video Carlos???