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

Рет қаралды 85,803

Күн бұрын

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

Пікірлер: 120

@anabiatahir3772 Жыл бұрын

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

@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 ❤💕

@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!

@alexandrodisla6285 Жыл бұрын

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

@thedigitalceo Жыл бұрын

One of the best teachers on KZfaq. Love your videos!

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

@hazaka97 9 ай бұрын

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

@yassiribrahim7521 Жыл бұрын

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

@ahmednassar2536 Жыл бұрын

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

@taiwooladosu3784 Жыл бұрын

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

@learnmakeit9315 Жыл бұрын

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

@antonioaquino5234 12 күн бұрын

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

@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!

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

@WeAreByteableGames Жыл бұрын

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

@user-ke9jo8dk2s Жыл бұрын

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

@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! 🙏😊

@user-sj8mw6wp3v Жыл бұрын

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

@testme4495 Жыл бұрын

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

@vinaypatil8009 Жыл бұрын

Awesome content as always Appreciate your hard work 💪👍

@gillesa290 Жыл бұрын

Very useful and easy to understand. Thanks a lot.

@keshavkattel Жыл бұрын

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

@myytkn8526 4 ай бұрын

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

@amankushwaha8180 Жыл бұрын

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

@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 ;)

@FAIZAN1421 Жыл бұрын

i am learning again. thanks 😜

@slebnation2035 Жыл бұрын

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

@k303k Жыл бұрын

Done. Thank you Pedro!

@kingMintz Жыл бұрын

You are amazing Pedro. Gracias

@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!

@alexdefaro Жыл бұрын

Awesome video feed 👊

@TheFogSellers Жыл бұрын

API for excercise is down.

@shakthinaarayananr7639 Жыл бұрын

Nice video to revise

@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?

@sonamohialdin3376 Жыл бұрын

Awesome tutorial thank you

@PedroTechnologies Жыл бұрын

You’re welcome 😊

@macropus142 6 ай бұрын

hey its quite good love from india ❤❤

@gameshark0703 Жыл бұрын

Great tutorials, what vscode theme do you use?

@mikidai3575 Жыл бұрын

so nice and helpful

@commandmo5173 19 күн бұрын

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?

@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🙏🙏🙏

@GideonKNgetich 11 ай бұрын

You're the best Pedro❤❤❤❤❤

@oussamabouallati Жыл бұрын

Thank you man!

@mrluckyuncle 7 ай бұрын

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

@itsir3211 Жыл бұрын

Wonderful bro😘

@wathsalaheenkende5563 Жыл бұрын

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

@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

@AkashAkash-mi1eb Жыл бұрын

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

@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 :)

@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?

@GratuityMedia Жыл бұрын

Will you do a version of this for react native?

@naveenchander7053 Жыл бұрын

a good teacher

@thirumalr333 7 ай бұрын

great video

@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

@yacineelhafidy5710 9 ай бұрын

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

@Naveenkarolla 5 ай бұрын

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

@abhayhonparkhe.7440 Жыл бұрын

nice exercise

@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

@josecarlosparada3171 Жыл бұрын

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

@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!!

@keithbacalso9433 9 ай бұрын

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

@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 ?

@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

@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?

@khebrela Жыл бұрын

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

@38911bytefree 11 ай бұрын

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

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

@H7forReal Жыл бұрын

great tutorial but excuser api is dead ma homie

@user-pc1jl8dj1w 4 ай бұрын

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

@fernandoguimaraes4415 10 күн бұрын

Brabooooo

@eivis75 Жыл бұрын

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

@mehboobali9202 Жыл бұрын

I really like your teaching style Pedro. Keep it up

@PedroTechnologies Жыл бұрын

Thanks! 😃

@nothingless1 Ай бұрын

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

@JoaoVitor-fn7vt 7 ай бұрын

valeu meu fi

@City__Walker Жыл бұрын

use fetch (axios from old times)

@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!!

@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

@dudamneerajdattu1459 6 ай бұрын

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

@anilvarma7930 5 ай бұрын

Because here we have to pass the parameters

@samduss4193 Ай бұрын

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

@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. 👍

@ronnykn2108 Жыл бұрын

cool

@poojakamble3643 Жыл бұрын

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

@augischadiegils.5109 Жыл бұрын

❤️❤️❤️

@Kretzzz Жыл бұрын

Sad. Herokuapp doesn't offer free hosting anymore.

@dipthamuhudugama9320 Жыл бұрын

❤❤❤❤

@richardleungwoogabriel9317 Жыл бұрын

Make me GREAT!!!!!!

@Viktorres1 8 ай бұрын

Cool! But Excuses api is no longer working(

@MindOverMatter-kr4 7 ай бұрын

try this one

@hamzapaskingakhtar Жыл бұрын

15:40 Or they could be using Random. hahahaha

@munirhoque7067 Жыл бұрын

Use …. import axios from 'axios’; And… axios(‘URL’) Thanks me later

@Noadict 4 ай бұрын

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

@Pareshbpatel Жыл бұрын

{2022-11-12}

@manhlinhnguyen.51 Жыл бұрын

Soon

@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