ReactJS Course [7] - How To Fetch Data From an API in React

Подписаться 202 тыс.

Просмотров 86 тыс.

50% 1

React Beginner to Advanced Course 2022! In this course I will be going over everything you need to know to go from a complete beginner in react, to being able to create big projects on your own.
Course Code/Exercises: github.com/machadop1407/React...
Course Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
► Buy Crypto on Coinbase: coinbase-consumer.sjv.io/PedroTech
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
EPISODE 7 TIMESTAMPS
00:00 | Intro
04:29 | fetch Function
07:07 | Axios Library
15:02 | Example 2
25:22 | API Exercise
27:08 | Solution to the Exercise
Tags:
- ReactJS Tutorial
- ReactJS Course
- React Course
#reactjs #course

Наука

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

@anabiatahir3772 Год назад

This is by far the most comprehensive yet easy React playlist I have seen on the internet. Thank you so much Pedro!!!

@lrabeno Год назад

As someone who learned React with class based components this whole series has been extremely helpful! I've been going through all the videos and am almost caught up. I'm with you the whole ride and suggesting this series to friends. Thanks for making these!

@aabhasjain96 Год назад

Hey Pedro, you know what, I know all of this, but sill I'm watching each and every video of this series without fail, coz this is kind of revision for me, but I love the way you teach. Also in this video, I got to know you are just 21 year old, and this much knowledge and way of teaching is Just Wow. I'm 26 years old, and I can say you are an inspiration for me. Keep doing this great thing and Lots of Love from INDIA ❤💕

@thedigitalceo Год назад

One of the best teachers on RU-vid. Love your videos!

@alexandrodisla6285 Год назад

10 minutes in! And you realize that it’s always good to relearn stuff that you didn’t master.

@genosthegreat7870 Год назад

I'm using React for my Final Project This is really a great help Thank u 😁

@LosConjuros-xx8ko 2 месяца назад

I've seen a lot of tutorials and this one by far the best, straight to the point.

@user-ke9jo8dk2s Год назад

Pedro, you are the best react js teacher for ever))

@ahmednassar2536 Год назад

Very easy explanation, and it's a great way to deliver the message. Keep going, Pedro's

@hazaka97 9 месяцев назад

Thanks Pedro, watched your tutorial, digested the knowledge you provided and tried all the two examples and the exercise myself. Much Love.

@learnmakeit9315 Год назад

Thank you! I look forward to good usage of useEffect in the next episode!

@yassiribrahim7521 Год назад

Thanks Pedro explaining the concepts or logic of cooding logic very well i have never seen before

@taiwooladosu3784 Год назад

The way and manner you teach is awesome, thank you, you're the best

@user-sj8mw6wp3v Год назад

That was awesome. I appreciate your videos very much. Bro, keep going

@WeAreByteableGames Год назад

this course is golden bro, best quality perfect thank you for your hard work

@oncoding4520 Год назад

I really like your work because if you keep doing this kind of videos we understand the logic behind and since the logic is being applicable whenever you are helping us a lot.

@garnica_hector Год назад

My solution to the challenge involved using three different functions for the buttons - each button would fetch the api according to what category it was. (The "party" button would fetch using the url with "party" and so on..). Then I saw your solution and how simple it was.. 😅 Still have a lot to learn, but I'm thankful you are sharing your knowledge with us! 🙏😊

@aiatiiazalieva2148 4 месяца назад

Awesome and amazing Teacher! Thank you Pedro so much for your lessons! I'm watching all your videos and try to practice. Really your lessons are very helpful!

@antonioaquino5234 11 дней назад

Pedro thank you so much, its like your classmate teaching in a most simpler perspective. Keep it up and don't stop :)

@gillesa290 Год назад

Very useful and easy to understand. Thanks a lot.

@vinaypatil8009 Год назад

Awesome content as always Appreciate your hard work 💪👍

@myytkn8526 4 месяца назад

Great, and thank you for this Video Content, Pedro!

@testme4495 Год назад

Bro, I really appreciate you for this wonderful video with easy explanation, and please keep sharing with us like this.

@TheFogSellers Год назад

API for excercise is down.

@stonecomstock Год назад

I haven't gotten to watch the whole video yet, but I know it's going to be good!! So here's a like and comment to for the algorithm ;)

@alexdefaro Год назад

Awesome video feed 👊

@amankushwaha8180 Год назад

after searching for long hours finally found your video ans its great

@k303k Год назад

Done. Thank you Pedro!

@keshavkattel Год назад

I loved the way you teach. Thank you so much for this amazing playlist. Love from Nepal brother❤️

@kingMintz Год назад

You are amazing Pedro. Gracias

@FAIZAN1421 Год назад

i am learning again. thanks 😜

@u.tassinari2916 Год назад

You are like an angel because really today I need to do a job test in react fetching data from an API... using swapi by the way

@PedroTechnologies Год назад

Glad I could help!

@slebnation2035 Год назад

Hey, the last api is down. But the first two examples are suuuper helpful

@Dr.Schwarz 8 месяцев назад

Great tutorial, thank you! But I'm curious, Isn't it better approach in last exercise to create array with names for future buttons and use .map to create them all + pass argument with name of button for api call?

@macropus142 6 месяцев назад

hey its quite good love from india ❤❤

@sonamohialdin3376 Год назад

Awesome tutorial thank you

@PedroTechnologies Год назад

You’re welcome 😊

@shakthinaarayananr7639 Год назад

Nice video to revise

@GideonKNgetich 11 месяцев назад

You're the best Pedro❤❤❤❤❤

@drawingdr9829 Год назад

hello pedro thank u bro for your tutorials we are benefit and learning lot of things. i have a question you deployed (react node mysaq) to heroku . can you do a video how can we deploying it in digital ocean thanks🙏🙏🙏

@mikidai3575 Год назад

so nice and helpful

@oussamabouallati Год назад

Thank you man!

@itsir3211 Год назад

Wonderful bro😘

@gameshark0703 Год назад

Great tutorials, what vscode theme do you use?

@thevasupodcast4561 Год назад

At 14:40 when we moved fetchdata to a new function for onClick handler, why did we still had to use useEffect, why did we not got rid of it completely? Why did we make a function call in it?

@fndfernandu Год назад

This video is awesome! Your channel is pure gold man! You should've put Enzo for a young man's name 🤣 Tamo junto

@vinaypatil8009 Год назад

If it's possible can you make a video on your whole journey For example How you came to know coding How you become good at programming How you practice to become good How you earned 1st income through coding How you get 1st job Means you know everything But everything should be real as crystal clear

@wathsalaheenkende5563 Год назад

Hi Pedro, could you please tell me why didn't you add useEffect in example 2?

@urdreamspace Год назад

hey am having this problem at the end of the second example Module parse failed: Unexpected token (55:28) You may need an appropriate loader to handle this file type. | columnNumber: 7 | } > }, "Name: ", predictedAge?.name), /*#__PURE__*/React.createElement("h1", { | __self: this, | __source: { kindly help , it shows right after i put a question mark so that the age name and count can be mounted

@commandmo5173 18 дней назад

Hi thanks for the video, what if you wanted to pass both the fact and the length, how would you change the setAdvert(res.data.fact) to bring an array of data?

@naveenchander7053 Год назад

a good teacher

@GratuityMedia Год назад

Will you do a version of this for react native?

@emamarcela354 Год назад

So isn't it necessary to add {name:"", age:"", count:"" } in the predictAge useState? I don't know if you remember but you did it this way in the pokeapi and weather app videos. Btw, thanks for this awesome course, Pedro!

@PedroTechnologies Год назад

You can do it both ways! By setting it null initially you can just use optiional chaining to fix it!

@emamarcela354 Год назад

@@PedroTechnologies cool then, that was my doubt. Thanks!!

@thirumalr333 7 месяцев назад

great video

@eivis75 Год назад

For last exercise I think that heroku API app is no longer accessible.

@gabrielstiffler1488 Год назад

Hello, sorry to bother but I wanted to ask. I've been using axios 0.27.0 and 0.27.1 and I was getting this error: ""./node_modules/axios/lib/adapters/http.js 13:12-28"" I did not know how to fix it, as it gave me more issues and i reverted to an older version. Is it fixed now in 0.27.2 ?

@mrluckyuncle 7 месяцев назад

Gosto muito os APIs -- cat facts e excuses. Escolhas boas 🙂

@akr3ch Год назад

@PedroTech Isn't this code is vulnerable to Server Side Request Forgery (SSRF)?

@PedroTechnologies Год назад

This is not how I would fetch data in a real advanced project, this is just how i would do as a beginner. Episode 8 I will teach react query which is the best way imo

@growwithdesign 10 месяцев назад

how to fetch data from your own localhost project js file? i created a api.js file to store my image url and ID for creating a image gallary component. How to read this file using axios?

@yacineelhafidy5710 8 месяцев назад

hello pedro i wanna to say thank you for your effort, well i wanna tell you that the Axios method doesn't wor for me, if you have any update relevant to it please give it to me and thank you so much

@AsifKhan-ee8ez Год назад

Thanks for such a great content but please make a dedicated video on usereducer hook with practice exercise

@PedroTechnologies Год назад

I will go over the UseReducer :)

@AkashAkash-mi1eb Год назад

14:36 we can remove useEffect, which works as same when it was

@Naveenkarolla 4 месяца назад

Hi Pedro, could u please give the codes for above exercises.. It will be helpul for us

@khaledmuhammed4225 10 месяцев назад

hello perdro thanks for thats wonder course, i have an issue of understand why you didn't used useEffect in the example2 and why not gaining an error an infinite loop like what happened in the prevous example

@user-hg4es2hc5p 8 месяцев назад

Because fetchData() function just be called when you click on the button

@38911bytefree 10 месяцев назад

At 14:34 ... function is going out from the useEffect again, so how it doesnt call itself infinite times due to the component update ?, I mean, to me looks mostly like the first example. Thank you so much for sharing your knowledge.

@user-hg4es2hc5p 8 месяцев назад

Simply, there is no a function call for that

@keithbacalso9433 9 месяцев назад

I think you missed one during fetc which is the loading before rendering the excuse

@nothingless1 Месяц назад

Excuser API is not available anymore. Pedro can you recommend another one?

@user-pc1jl8dj1w 4 месяца назад

Why didn't you use 'use effect' in the second example?

@abhayhonparkhe.7440 Год назад

nice exercise

@fernandoguimaraes4415 9 дней назад

Brabooooo

@mehboobali9202 Год назад

I really like your teaching style Pedro. Keep it up

@PedroTechnologies Год назад

Thanks! 😃

@josecarlosparada3171 Год назад

Pedro do as next a video about POST request with AXIOS please!

@khebrela Год назад

Adding 'fetch' exactly as you showed throws this err : "Uncaught (in promise) SyntaxError: Unexpected end of input"

@dudamneerajdattu1459 6 месяцев назад

in the last excersie why for onclick he kept an arrow function?

@anilvarma7930 5 месяцев назад

Because here we have to pass the parameters

@poojakamble3643 Год назад

i tried having three different functions and api call way too long solution but achieved same outcome

@fernandojrmontallana6555 Год назад

Please make a video, how to properly fetch data with StrictMode enable.

@PedroTechnologies Год назад

Im going to go over it when i talk about react query!

@fernandojrmontallana6555 Год назад

@@PedroTechnologies Thank you, I really like your way of teaching. I will watch this series until the end. I want to learn more React from this channel.

@JoaoVitor-fn7vt 7 месяцев назад

valeu meu fi

@cedriclabrador5353 Год назад

Are tou going to do redux tutorial?

@PedroTechnologies Год назад

Yes!

@somashekharb1846 Год назад

you just said $(dollar symbol) as money sign dude Thats on the go recording!!

@PedroTechnologies Год назад

I said dollar?! hahaha I always say money, maybe I am spending too much time in the US, need to go back!!

@samduss4193 Месяц назад

onrender update, functions inside the component are trigger... this one got my mind twisted a little

@City__Walker Год назад

use fetch (axios from old times)

@theali7890 Год назад

@pedroTech Love Your Content!!!... Please keep making such productive videos. (P.S: if you want a frontend helper i am available haha :P)

@johnnysummers9323 Год назад

I had to keep pausing all the time to read the facts lol, and some of those facts were totally insane like a 17-year-old cat had 420 children in the 50's O.o

@ronnykn2108 Год назад

cool

@user-xi7lg3em8i Год назад

The excuser api is dead 😢

@siddharthdwivedi7377 6 месяцев назад

Yeah Herokuapp api is ded but you can search for Excuser Api on google you'll get it. 👍

@augischadiegils.5109 Год назад

❤️❤️❤️

@Noadict 4 месяца назад

I tried to do exercise, but the excuser app is no longer valid! Just letting everyone know that to save their time.

@Kretzzz Год назад

Sad. Herokuapp doesn't offer free hosting anymore.

@dipthamuhudugama9320 Год назад

❤❤❤❤

@Viktorres1 8 месяцев назад

Cool! But Excuses api is no longer working(

@MindOverMatter-kr4 7 месяцев назад

try this one

@H7forReal Год назад

great tutorial but excuser api is dead ma homie

@oncoding4520 Год назад

Your IG dont work :)

@PedroTechnologies Год назад

I changed it hahaha its pedro.fmachado_

@oncoding4520 Год назад

@@PedroTechnologies Your are great really, like its 21pm am going to understand your context react video.. pls keep postiming >15min video single application like you are doing with forms and authentications it very helpful and from time to time a solo project because we follow your pattern of logic how you split the code. really love your work