How To Make An API Request in ReactJS With Axios and Fetch - Tutorial [2020]
ฝัง
- เผยแพร่เมื่อ 14 ต.ค. 2024
- In this video I will teach you guys how to use Axios and Fetch to make API Requests. This can be used to fetch data from a public API or any backend you are building. I am teaching you how to to do this in ReactJS.
API LINK: official-joke-...
-
Please leave a comment on what topic you guys want me to cover next!
-
👕 Programming Merch: teespring.com/...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
Axios
Fetch
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
![ReactJS Course [7] - How To Fetch Data From an API in React](/img/tr.png)
Nice pacing dude, you weren't speed piling information on us and you weren't slowly stretching things out either. I understood it quite well.
Thank you! Glad you enjoyed it! I always get scared that I am going too fast or too slow hahaha
You are an absolute legent. I've spent the whole day trying to figure out how to do it and this has been the best explained and the most complete explanation I've seen for React based in fuctions and not classes
I have a further question. I have in one file called "fetchCall.js" a fetch call to an API, but I want in another file called "inputTextFilled.js", which is a form, I want to have some prefilled information for some of the parts of the form. How can I make it to be able to import the values from fetchCall.js to inputTextFilled.js?
Thank you so much for the positive comment! I am glad I could help!
You can make the api call from the fetchCall.js and return those by exporting them. Then just call the fetchCall inside the inputTextField and use the values returned.
@@PedroTechnologies So, to do that I should declare the variable outside the function with a "export const[name,setName] = useState("")" and then in the inputTextField I should do an import {name} from './fetchCall'
And then just to access the data what should I write? Does it work only writing "name"?
Nice explanation in under 10 minutes, thank you!
And your responses to the jokes had me cracking up, that could be its own youtube series ;)
lmaoo Glad you enjoyed it!
Oh god!!!!! after days of struggling for a single concept and getting to know that its this simple.
Thanks man for this
I watched few tutorials before . They are super fast and not explaining even in a simple details like you . Your videos is very clear . thhanks youuu
So nice of you!
Best video covering this that I have found. Thank you so much, most videos are overly complicated and 20 minutes long. This was so straight to the point and explained clearly
Was it just me or chatGPT kept switching up the file structure everytime i needed more details for this?
Exactly..well explained and straight to the point.
@@Shaojeemyit's not ChatGpt it's just he has an extension specifically for React installed in his IDE. All it does is give him hints and fix his React code when needed
I heard about this Axios from your previous video of ReactJS MySql tutorial. Really helpful for beginners like me on reactjs and axios. Thank you
I am glad you liked it! When I first tried to learn fetch I thought it was weird, when I saw axios it made so much more sense!
Great video. It was direct to the point with all the info needed none of the info we didn't want!
Good stuff man... Direct and to the point. Unlike those terrible random jokes! :) Also, what extension is displaying the the size of your imports?
Import cost! Thank u hahaha
Pedro, great job. I started to follow you some days ago and I am really enjoying your content! Congrats.
Finally a tutorial I could follow and not have to slow down playback speed. Do you have any flask + react authorization tutorials? Thanks a bunch!
Thank you! Happy to hear you liked it! I am not that experienced with flask unfortunately!
@@PedroTechnologies Unfortunate :( . Maybe its time to look into learning express or something, ill try and find some resources on your channel.
Thanks man, this cleared my concept. I'm now gonna watch all your videos
Thank you so much for this video. A great help for beginners.
European --> It sounds a bit like - You are peein' -
2 squared = 4 ---> "Too square" is slang for lame/uncool
Pretty terrible jokes but thanks for the video
Hahahaha I spent hours looking at the jokes from this API and i got like 30% of them
How can We display the data without having to press the button? I tried by
{name}
But its not showing anything. I just wanted to remove the button input to display the data and show the data as soon as page loads
I was just trying to translate an Axios request into fetch, now I know how. Thanks again, Pedro!
the best explanation i've found online so far
esse sotaque e nome nao me enganam, awesome video dude
Great and clear explanation with a few terrible jokes (which are totally my jam)! Thank you!
Hahaha Glad you like the video!
I think I might be becoming a fan. Thanks for the explanation
Glad to hear it!
thankyou, this tutorial was very helpful. the jokes were hilarious btw.
Crisp and clear...Too good...Thank u
Thank you!
Love the way you simply explain it. Greetings from Sri Lanka
It was really an amazing video. 🤩 It is having all points to get clear Ideas about axios and fetch. 😊
you are very good teacher. Short video with clear explanation. keep it up.
Thank you so much! I really apreciate the support!
@@PedroTechnologies you are welcome
That's exactly what I'm looking for.
Thank you and keep going!
after seeing this video my all confusion is clear. Thanks, man!
Glad to hear it!
I like your tutorials. It really helps. Keep up the god work.
Thanks bro , hey make sure to zoom in when you’re writing code , it was very tiny
I have not seen someone explaining the first joke so : If you're in the toilet, you are peeing (European)
Thank a million!! I like your video's. Could you make a vid showing how to setup a baseURL with a JWT header? those videos are hard to find
Yeah, I've been putting off making my third video of a small series I have on my channel teaching about authentication. The third video teaching JWT is coming probably this week!
The reaction to the jokes was hilarious 🤣🤣🤣🤣🤣
This video really come through, thank you!
Note : If you want to learn Axios don't skip this video.
This video helped me so much! Thanks pedro
THANK YOU! FOR THIS AMAZING STRAIGHT TO THE POINT TUTORIAL!!!!!
if u have little kids around those jokes would kill lol. great tutorial btw. I been using fetch but seems axios is a bit quicker.
Thx for video!=))) Where is the list of open api which you have mentioned in video?
Awesome no confusion now
:)
Thank you so much! Because of this video I accomplished what I needed to.
Hi i have a question, id i had a multiple jokes what should i do? store them in an Array??
Thanks!!!!
Yes! If the api returns a list you can set a state as an empty list!
Hey sir. Can not we use axios or fetch directly in a component or can i make react component async
This tutorial is super helpful!
Thank you so much!! You helped me a lot
Thanks for the vid, pretty clear. Btw, the API is down? I'm getting a 500 error. I can user another API though, but I wanted to get some jokes while I code. :(
Great tutorial, but maybe you could have the browser and vsCode open side by side, instead of jumping between both programms.
Thank you! I currently don't have 2 monitors, but im saving to buy another one! When I do I will keep vscode on one and the browser on another.
Hey I am curious to know your vs code theme please tell me the name of it
I believe that it was Palenight!
Is it possible to call getJoke without using a button? So when the page loads, the values are automatically shown in a label/textfield.
worth liking bro !
Nice video. I know how to use fetch and I find it easier than axios haha. I still do not understand why I should use axios instead of fetch and all te advantages that I can get using Axios.
Both do the same hahaha I think axios is easier to understand for beginners and it has a great support for changing methods/opts
I'm using react + node express, when I am sending post request using axios api request, it sends request to locahost:3000,
the localhost:3000 is my react server, and my node server is localhost:4000. I had set the "proxy":"locahost:3000"(in client/package.json) but it has no effect. pls help my.
Hey if your node server is on the localhost:4000 then you should make the request to the localhost:4000!
@@PedroTechnologies it is not working, I tried
Please, how do we make a "post" request? Any link on that? Thank you.
the european punch is read like "you're peein' "
youre welcome
can u pls make a vid how to use Axios and react on Node.js backed instead of other pre-made api's. make a small api and use it pls
On point again. ThankQ Bro
Hi! What's this extension that display the size of the packages?
Import cost :)
This is awesome, thank you :)
Thank you!! great tut
EXTREMELY USEFUL video, thank you KINDLY friend
your videos are amazing
How do you load the data on load no event? just when the page loads it displays the joke without a button?
You can use the useEffect hook for this, I have videos on useEffect if you are interested!
@@PedroTechnologies I managed to figure it out I used useState and then just assigned the current state to the jsx html or w.e but when you reload the page the data doesn't get added instantly wound how you would get around that. Also, will check out your video on useEffect thanks for letting me know
Thx dude, I owe you one!
There is axios.post and axios.get I am assuming fetch is axios.get. What would be axios.post? Post is sending a payload data to the API to be validated.
Great video btw. Thank you
bro i want a help with you to make travel guide application with axios
Great video. I am confused with setup?
Thank you! What about the setup?
@@PedroTechnologies response.data.setup. confused with setup word. where its come from
@@junnaid08 It's nothing technical actually. It refers to the joke setup. In this data the joke is divided into to parts in the object (setup and punchline) { setup: "Can February March?", punchline: "No, but Aprill May" } so you can present it better in the app or show the punchline after the click etc.
please ask your content consumers like me to drop a like after we consume your content. It helps with me considering you seriously
Amazing 🙌
can we do post and other request using fetch ??
yes!
@@PedroTechnologies have made any tutorial with post request using axios?
God bless you so much you will make heaven
Thanks PEDRO
This guy is good. He's speedy and efficient! Love it.
very helpful!
thx. in nextjs or mern and so on, i use only axios ^^
I love axios
Dont know if you had gotten it yet, but the 2 Square joke is math lol ... " why didnt the 4 get into the club"
the api link is not working
good explained bro
Best explanation
To the point 👍
Glad you liked it!
thank you ! ❤
nice explanation
the punch line is that "you are peeing"
Nice job Thanks!
Thank you! Glad I could help!
joke punchline explained. "European" as in "you're peeing" or shorthand "you're Peein" get it? lol but any who the video was amazing. thank you!!!
Hahaha i'm dumb, I don't know why i didn't understand it!
great video
I think I might have taken the "punch line" a bit too literally. Now, I need to buy a new monitor. /:
hahaha
Sorry about that, happens to everyone!
KING
Bruh, I really loved this video but I can't believe you didn't laugh at this jokes lol! European? lol
Thx so much
Thank you
I love you bro
lmaoo thanks broo
Just to explain the second joke, the word European is pronounced as "You are peeing" while in the bathroom.
Thank youy hahaha Its actually pretty dumb of my part that I didn't understand lmao
❤️❤️❤️
unfortunately that api is not working anymore..
Api Link not working. Please repair it, bro
The joke at the 1:45, read European as "eu r pean" or "you are peein(g)".
i cant sleep, thinking about the joke all the time.. its so confusing what is it all about
i didnt get any response
European = you’re-peein = you’re peeing
API link not working anymore...link is a joke now !
Hazlos en Español no seas mamón, te llamas pedro man seguro eres mexicano we, apoya al programador latino xd
Soy brasileño jajaja Yo hablo un poco de español.