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

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 124

  • @anabiatahir3772
    @anabiatahir3772 2 года назад +54

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

  • @aabhasjain96
    @aabhasjain96 2 года назад +22

    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
    @lrabeno 2 года назад +6

    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
    @alexandrodisla6285 2 года назад +12

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

  • @thedigitalceo
    @thedigitalceo 2 года назад +11

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

  • @genosthegreat7870
    @genosthegreat7870 2 года назад +4

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

  • @LosConjuros-xx8ko
    @LosConjuros-xx8ko 8 месяцев назад

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

  • @garnica_hector
    @garnica_hector 2 года назад

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

  • @ИннаБогданова-к4щ
    @ИннаБогданова-к4щ 2 года назад +3

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

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

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

  • @u.tassinari2916
    @u.tassinari2916 2 года назад +1

    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

  • @stonecomstock
    @stonecomstock 2 года назад +1

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

  • @learnmakeit9315
    @learnmakeit9315 2 года назад +1

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

  • @yassiribrahim7521
    @yassiribrahim7521 2 года назад +1

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

  • @WeAreByteableGames
    @WeAreByteableGames 2 года назад

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

  • @hazaka97
    @hazaka97 Год назад

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

  • @TheFogSellers
    @TheFogSellers 2 года назад +8

    API for excercise is down.

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

  • @taiwooladosu3784
    @taiwooladosu3784 2 года назад

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

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

    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!

  • @amankushwaha8180
    @amankushwaha8180 Год назад

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

  • @ahmednassar2536
    @ahmednassar2536 Год назад

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

  • @vinaypatil8009
    @vinaypatil8009 2 года назад +1

    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

  • @testme4495
    @testme4495 2 года назад

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

  • @YevhenKolomytsev
    @YevhenKolomytsev Год назад

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

  • @slebnation2035
    @slebnation2035 Год назад +1

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

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

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

  • @macropus142
    @macropus142 Год назад +1

    hey its quite good love from india ❤❤

  • @keshavkattel
    @keshavkattel Год назад

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

  • @FAIZAN1421
    @FAIZAN1421 2 года назад +1

    i am learning again. thanks 😜

  • @gillesa290
    @gillesa290 2 года назад

    Very useful and easy to understand. Thanks a lot.

  • @LearnWithMuhammadAsif
    @LearnWithMuhammadAsif 4 месяца назад

    you make this topic really cool

  • @alexdefaro
    @alexdefaro 2 года назад +1

    Awesome video feed 👊

  • @eivis75
    @eivis75 Год назад +2

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

  • @vinaypatil8009
    @vinaypatil8009 2 года назад

    Awesome content as always
    Appreciate your hard work 💪👍

  • @anipetrosyan4255
    @anipetrosyan4255 4 месяца назад +1

    woow,thank you for this video👋

  • @k303k
    @k303k 2 года назад

    Done. Thank you Pedro!

  • @drawingdr9829
    @drawingdr9829 2 года назад +1

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

  • @fndfernandu
    @fndfernandu 2 года назад

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

  • @shakthinaarayananr7639
    @shakthinaarayananr7639 2 года назад +2

    Nice video to revise

  • @emamarcela354
    @emamarcela354 2 года назад +2

    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
      @PedroTechnologies  2 года назад +2

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

    • @emamarcela354
      @emamarcela354 2 года назад +1

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

  • @urdreamspace
    @urdreamspace Год назад +1

    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

  • @mehboobali9202
    @mehboobali9202 2 года назад +1

    I really like your teaching style Pedro. Keep it up

  • @kingMintz
    @kingMintz 2 года назад

    You are amazing Pedro. Gracias

  • @GideonKNgetich
    @GideonKNgetich Год назад

    You're the best Pedro❤❤❤❤❤

  • @AsifKhan-ee8ez
    @AsifKhan-ee8ez 2 года назад +1

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

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

    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?

  • @sonamohialdin3376
    @sonamohialdin3376 2 года назад +1

    Awesome tutorial thank you

  • @Dr.Schwarz
    @Dr.Schwarz Год назад

    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?

  • @naveenchander7053
    @naveenchander7053 Год назад

    a good teacher

  • @gameshark0703
    @gameshark0703 2 года назад

    Great tutorials, what vscode theme do you use?

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

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

  • @khebrela
    @khebrela 2 года назад

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

  • @growwithdesign
    @growwithdesign Год назад

    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?

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

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

  • @fernandojrmontallana6555
    @fernandojrmontallana6555 2 года назад +1

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

    • @PedroTechnologies
      @PedroTechnologies  2 года назад +1

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

    • @fernandojrmontallana6555
      @fernandojrmontallana6555 2 года назад

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

  • @akr3ch
    @akr3ch 2 года назад +1

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

    • @PedroTechnologies
      @PedroTechnologies  2 года назад +1

      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

  • @keithbacalso9433
    @keithbacalso9433 Год назад

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

  • @yacineelhafidy5710
    @yacineelhafidy5710 Год назад

    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

  • @thevasupodcast4561
    @thevasupodcast4561 2 года назад

    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?

  • @wathsalaheenkende5563
    @wathsalaheenkende5563 Год назад

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

  • @somashekharb1846
    @somashekharb1846 2 года назад

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

    • @PedroTechnologies
      @PedroTechnologies  2 года назад

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

  • @oussamabouallati
    @oussamabouallati 2 года назад

    Thank you man!

  • @mikidai3575
    @mikidai3575 Год назад

    so nice and helpful

  • @GratuityMedia
    @GratuityMedia 2 года назад

    Will you do a version of this for react native?

  • @pythonhacks8
    @pythonhacks8 2 месяца назад

    how to iterate all data frome api in dynamically plxz explain

  • @Sathishkumark-e8q
    @Sathishkumark-e8q 10 месяцев назад

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

  • @itsir3211
    @itsir3211 2 года назад

    Wonderful bro😘

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

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

  • @软件实验室
    @软件实验室 Год назад +6

    The excuser api is dead 😢

  • @khaledmuhammed4225
    @khaledmuhammed4225 Год назад

    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

    • @PhaNguyen-m3c
      @PhaNguyen-m3c Год назад

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

  • @cedriclabrador5353
    @cedriclabrador5353 2 года назад +2

    Are tou going to do redux tutorial?

  • @mrluckyuncle
    @mrluckyuncle Год назад

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

  • @H7forReal
    @H7forReal Год назад +4

    great tutorial but excuser api is dead ma homie

  • @thirumalr333
    @thirumalr333 Год назад

    great video

  • @johnnysummers9323
    @johnnysummers9323 2 года назад

    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

  • @josecarlosparada3171
    @josecarlosparada3171 2 года назад

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

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

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

  • @38911bytefree
    @38911bytefree Год назад

    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.

    • @PhaNguyen-m3c
      @PhaNguyen-m3c Год назад

      Simply, there is no a function call for that

  • @gabrielstiffler1488
    @gabrielstiffler1488 2 года назад

    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 ?

  • @poojakamble3643
    @poojakamble3643 Год назад

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

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

    nice exercise

  • @Kretzzz
    @Kretzzz Год назад +2

    Sad. Herokuapp doesn't offer free hosting anymore.

  • @munirhoque7067
    @munirhoque7067 Год назад +1

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

  • @City__Walker
    @City__Walker Год назад

    use fetch (axios from old times)

  • @dudamneerajdattu1459
    @dudamneerajdattu1459 Год назад

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

    • @anilvarma7930
      @anilvarma7930 11 месяцев назад +1

      Because here we have to pass the parameters

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

    Brabooooo

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

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

  • @Viktorres1
    @Viktorres1 Год назад

    Cool! But Excuses api is no longer working(

  • @theali7890
    @theali7890 2 года назад

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

  • @JoaoVitor-fn7vt
    @JoaoVitor-fn7vt Год назад

    valeu meu fi

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

    Is anyone else getting an Axios network error?

  • @ronnykn2108
    @ronnykn2108 Год назад

    cool

  • @augischadiegils.5109
    @augischadiegils.5109 2 года назад

    ❤️❤️❤️

  • @oncoding4520
    @oncoding4520 Год назад +1

    Your IG dont work :)

    • @PedroTechnologies
      @PedroTechnologies  Год назад

      I changed it hahaha its pedro.fmachado_

    • @oncoding4520
      @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

  • @dipthamuhudugama9320
    @dipthamuhudugama9320 2 года назад

    ❤❤❤❤

  • @richardleungwoogabriel9317
    @richardleungwoogabriel9317 2 года назад

    Make me GREAT!!!!!!

  • @Pareshbpatel
    @Pareshbpatel 2 года назад

    {2022-11-12}

  • @hamzapaskingakhtar
    @hamzapaskingakhtar Год назад

    15:40 Or they could be using Random. hahahaha

  • @hamdangames3220
    @hamdangames3220 2 года назад

    😘😀😘😀