React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS in Hindi #55

Поділитися
Вставка
  • Опубліковано 20 жов 2024

КОМЕНТАРІ • 199

  • @ThapaTechnical
    @ThapaTechnical  4 роки тому +13

    I hope you like the video :) ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: ua-cam.com/play/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ.html
    I

    • @ajayshirote7619
      @ajayshirote7619 3 роки тому

      Your every video teaches lot of things and also entertain us thapa sir

    • @shivampali9033
      @shivampali9033 3 роки тому +2

      Vinod bhai Custom PC pr video banao ek

    • @denisshingala
      @denisshingala 2 роки тому

      Yes, ek custome pc par video banao "npm start" Fast work kaise karta hai?

  • @MaxProgramming
    @MaxProgramming 4 роки тому +33

    One of my friends asked me that he wants to learn Web development in Hindi. You are one of the best and I have shared your channel to him!

    • @ThapaTechnical
      @ThapaTechnical  4 роки тому +11

      Thank you so much ☺️

    • @AvinashKumar-jf9mx
      @AvinashKumar-jf9mx 3 роки тому +1

      Or koi channel h?

    • @MaxProgramming
      @MaxProgramming 3 роки тому +1

      @@AvinashKumar-jf9mx Bohot saare channels hain. But English is very important in the career of development.
      So we can start with Hindi, but we have to learn to speak and understand good English as a developer

    • @cthulhulalala7182
      @cthulhulalala7182 3 роки тому +1

      @@MaxProgramming Although ,its good to learn english but I don't think english is that necessary to do code just like maths.

    • @MaxProgramming
      @MaxProgramming 3 роки тому

      @@cthulhulalala7182 Yeah. English is good to learn but not necessary. But as the world uses English a lot, we should at least chat in English which makes our English better without a lot of hard work.

  • @yogeshvashist3980
    @yogeshvashist3980 3 роки тому +7

    Awesome, please make a video on CRUD operations through API, actually I am a .Net programmer and want to learn React. Your videos are very helpful and I am leaning it from your videos.

  • @asmereg
    @asmereg 4 роки тому +1

    You are the best, Bhai 🔥 TYSM! Bohot dinon se I was trying to learn how to use info from an API. Finally understood everything.

  • @noobCoder26
    @noobCoder26 3 роки тому +2

    Had a great fun in building this project ....😁😁Thanks Bhaiyaa

  • @ayushdedhia25
    @ayushdedhia25 4 роки тому +7

    Yes sir, please make a video on custom pc build 🥰

  • @KuldeepSingh-pl7rv
    @KuldeepSingh-pl7rv 2 роки тому +2

    I still don't get it every time on page rending useEffect run but without use effect i also get same thing with normal fetch or may another call back function

  • @simranbanwait
    @simranbanwait 2 роки тому +1

    number 1 card number pe bulbasaur hi hota tha , this is so nostalgic

  • @syedahasan_gillani3878
    @syedahasan_gillani3878 3 роки тому +2

    Mujy ya Error aa raha ha Failed to load resource: the server responded with a status of 404 ()

  • @listology-mostamazingtop1041
    @listology-mostamazingtop1041 4 роки тому +1

    Sir your video are very helpful for me you're video are great

  • @techkershubb
    @techkershubb 4 роки тому +1

    Thapa bhai very nicely you did explanations
    Thanks keep going

  • @shaheensiddiqui1952
    @shaheensiddiqui1952 2 роки тому

    yes sit it was really owsome
    the good thing is that we useed useEffect hook here
    sir due to you it become to much easy for us to learn react buttrlyyyyyyyyyyy
    bohot shukriya

  • @muheebpasha543
    @muheebpasha543 3 роки тому +2

    Vinod sir kindly make videos on backend as laravel framework with react js in front end

  • @nandkishor838
    @nandkishor838 3 роки тому

    Hi sir,
    I started reactjs by following your videos, and I stocked here,
    while I am making an API request by using axios my API is called multiple time as I uses const response variable to assign every value from response.
    what I need is , want to hold this response in a variable that I can fetch all the data from that variable without making multiple API call.
    please response ASAP

  • @ijazDeveloper786
    @ijazDeveloper786 3 роки тому +1

    sir jesy hum js me class ko toggle karty thy same wesy React me hum kese cls add i mean toggle kar skty ha

  • @souvikpal106
    @souvikpal106 2 роки тому +1

    Sir, I've one question if we use setState inside useEffect if will cause an infinite loop because as you told that useEffect becomes active after the page render and if we use setState it will render the page. So it will cause an infinite loop. Correct me if I'm wrong.

    • @DemonHeadYT
      @DemonHeadYT 10 місяців тому

      if dependencie diya rehga toh

  • @surajmishra432
    @surajmishra432 3 роки тому

    Bhai plz btaayein ki aapne custom pc build kaise kiya.. bahut se students ko ye problem aati hai ki unka development server start hone mai bahut time lagata hai or sath hi overall pc performance b achi nahi rehti .. plz share some tips about how did you solve this problem

  • @biswajeetpadhi5713
    @biswajeetpadhi5713 4 роки тому +1

    Yes sir make video on costume pc build

  • @ritiksahu5310
    @ritiksahu5310 3 роки тому +1

    Bhaya you doing great work
    keep it up
    #IndianGuyOnYT

  • @ashwinwaikar9015
    @ashwinwaikar9015 3 роки тому

    ye ek pikachu hai par wo ek array hai.... lol ...btw nice video

  • @rushikeshavachat4282
    @rushikeshavachat4282 3 роки тому

    Thapa meri bhai console mein api ka data mil nahi raha hai.Code is right.Issa kyon hoo raha hai.Reply my comment.

  • @demoforall4305
    @demoforall4305 4 роки тому +1

    @Thapa Technical Sir Series me 104 videos the to aaj morning me 54 kese ho gaye ??

  • @aanchalsonawane7749
    @aanchalsonawane7749 2 місяці тому

    Great Sir

  • @hasnainmalick8888
    @hasnainmalick8888 3 роки тому

    No one:
    Literally No One:
    Thapa: In every video aj ka video bohat awesome honay wala ha to chaliye juray rahe xD:hahahha.

  • @10yearsago84
    @10yearsago84 Рік тому +1

    If we don't have set an initial value for num in useState hook, it will call the pokemon API without any num value and it returns 404 error to me. Anyone else faced this same issue ??

    • @Shadab_Qazi
      @Shadab_Qazi 11 місяців тому

      yes I am having same problem.

  • @rathodmehul4081
    @rathodmehul4081 4 роки тому +1

    Hello
    Aapake search bar ke said me Jo icon he vo kese aate he . And use full shortcut icon kese download kare....♥️

  • @savitaraghuvanshi
    @savitaraghuvanshi 3 роки тому +3

    Sir please create tutorial on react native as well.

    • @kiyochi7705
      @kiyochi7705 3 роки тому

      thats app development not web dev. Its total different topic

  • @pushpamaywad8221
    @pushpamaywad8221 Рік тому

    Awesome👍👍

  • @mohsinbohra1174
    @mohsinbohra1174 4 роки тому +1

    Very Good Video. Can you make video on one more challenge on covid api with the help of React Axios.
    @Vinod ....With The help of Map function we can define name within moves..

  • @PROTECHRAHUL
    @PROTECHRAHUL 2 роки тому

    useEffect me function k andar function me axios kyo use kiya h directly useEffect k function me use kyo nii kiya h , anyone?

  • @creativeakshara8438
    @creativeakshara8438 4 роки тому

    Nice 👍👌
    Sir please snake game in JavaScript
    And please make canvas tutorials 🙏🙏🙏🙏🙏

  • @NeerajSingh-ru1cf
    @NeerajSingh-ru1cf 4 роки тому +18

    setMoves(res.data.moves[0].move.name);

    • @RITIKJAINBCE
      @RITIKJAINBCE 3 роки тому

      no it is giving error

    • @NeerajSingh-ru1cf
      @NeerajSingh-ru1cf 3 роки тому

      @@RITIKJAINBCE check your code again

    • @mathswithsirnoushad6261
      @mathswithsirnoushad6261 3 роки тому

      yes, it's working

    • @mohitsaud2071
      @mohitsaud2071 3 роки тому

      correct ✔✔✔✔✔

    • @biplabpaul3822
      @biplabpaul3822 3 роки тому

      @@RITIKJAINBCE Because there is actually no JSON data in the pokemon API for 0 index..try with any other index number it will work with the same code

  • @aviseksahoo1953
    @aviseksahoo1953 4 роки тому

    Cannot read property 'length' of undefined show kar raha hai

  • @baksh9595
    @baksh9595 2 роки тому

    Sir I have a question about useEffect() , I have created this project but I also want to add another select Option but when I change the select item it only also call useEffect method. so how can I call useEffect method on only one event.

    • @abhaysingh-os3qu
      @abhaysingh-os3qu Рік тому +1

      useEffect(()=>{ }[value]);
      just before the function ends use square bracket and write the variable which u want to change everytime it is selected/changed.
      hope this helps

  • @SonuSharma-lh1qq
    @SonuSharma-lh1qq 4 роки тому +1

    bro muje bhi ese fast process krna h to kya me SSD use kr skta hu .....

  • @manurajput8421
    @manurajput8421 4 роки тому +1

    Sir Your Teaching Way is best And You try to understand easy way for any topics So Hello Sir I am also a Programmer in CS Branch I have need to guide for you and please help me FOR Making Car Parking Website with Database and full Web development Please Help me and guide me Sir

  • @YourTechWhiz
    @YourTechWhiz 2 роки тому +2

    You should have use dependency list in the useEffect.

    • @InspireUShorts58
      @InspireUShorts58 2 роки тому

      Optional hai .. compulsory nhi

    • @YourTechWhiz
      @YourTechWhiz 2 роки тому +1

      @@InspireUShorts58 It isn't compulsory, but there is something called " good programming ".

    • @Kuku__Das344
      @Kuku__Das344 9 місяців тому

      Samajh nhi aya pr deekh kr acha lga

  • @amarchand1504
    @amarchand1504 3 роки тому +1

    res.data.moves[0].move.name
    sir aesy name ham get kar sakten hen...

  • @sidtiwari9258
    @sidtiwari9258 4 роки тому

    Need your support , can you make video that how can we just show moves name in another select's option . I tried and that works but browser get hangs after few mins..seems data rendering continuously .

  • @nicetomeetugaming7024
    @nicetomeetugaming7024 2 роки тому

    Thanks for this amazing video!

  • @introvertleader
    @introvertleader 4 роки тому +1

    1st view like comment & gm!

  • @VarshaSingh-hi2sb
    @VarshaSingh-hi2sb 4 роки тому +2

    From where to get that pikachu link... can someone plz tell..?

  • @InspireUShorts58
    @InspireUShorts58 2 роки тому +1

    And boom guys 💥😂

  • @officialbeingdeveloper
    @officialbeingdeveloper 4 роки тому

    hello bhai
    i want to disable right click on
    i am able to disable by using oncontextmenu and pointer event ;
    but this also disabled to scrolling feature on file
    as i have used pointer event none
    but without using both pointer-event : none and Oncontextmenu:return false :
    the allow to right click!!
    please tell me how can i disable right click on with enabled scrolling feature!!

  • @osamaayub405
    @osamaayub405 Рік тому

    sir can you make a video on crud operations using axios having issues in it.

  • @rajatsaraswat64
    @rajatsaraswat64 2 місяці тому

    Api k data kese aa rha h
    Y he pta nhi h sir
    Km s km es data ko kese nikalte h jo to bta dete

  • @Vishalvidyapeeth10th
    @Vishalvidyapeeth10th Рік тому

    Cors error in react how to solve it

  • @ridarachakula7865
    @ridarachakula7865 2 роки тому

    Amazing.. Thankyou..

  • @coderhh6515
    @coderhh6515 4 роки тому +1

    Cool video

  • @AkhileshYadav-lv3kh
    @AkhileshYadav-lv3kh Рік тому

    Thank you sir 👍👍

  • @KalyaniTalks
    @KalyaniTalks 3 роки тому

    Sir hm us moves ke array ko kaise fetch kr skte hai ?

  • @rashmiwankhade4097
    @rashmiwankhade4097 2 роки тому

    Hello,i like the vedio...can you please give me some clarity what is difference between fetch api and fetch interceptor,axios api and acios interceptor...

  • @satyajitdas6133
    @satyajitdas6133 2 роки тому +1

    how can you export the fetched data from axios to another react file?

    • @KuldeepSingh-pl7rv
      @KuldeepSingh-pl7rv 2 роки тому +1

      i guess you should try useContext()

    • @spacex3360
      @spacex3360 2 роки тому

      Context is best but redux is also best option for big project

  • @darshanadey4696
    @darshanadey4696 4 роки тому

    Awesome video

  • @Wishdomloom9462
    @Wishdomloom9462 Рік тому

    nice video brother

  • @ShubhamGupta-mx2hn
    @ShubhamGupta-mx2hn 3 роки тому +1

    Make video on DEEP LINKS IN REACT NATIVE EXPO

  • @listology-mostamazingtop1041
    @listology-mostamazingtop1041 4 роки тому +1

    First view , like , comment by me

  • @covidnineteen5249
    @covidnineteen5249 4 роки тому +1

    Thank you sir !!!

  • @DesiMatrixXD
    @DesiMatrixXD 3 роки тому +1

    Kya mujhe koi ye batayega, axios use karne ke liye useEffect ki kya zaroorat hai? Mai toh bina useEffect ke bhi data fetch kar sakta hu. toh useEffect ka actual use kaha hai?

    • @slmshady539
      @slmshady539 3 роки тому +1

      aap useEffect k andr api call karte hai taaki jaise hi page load ho maltb k jaise hi page pehli bar brower pe aega waise hi useEffect harkat me aega aur api call ho jaega... ek tareeka hua karta tha useEffect se pehle componentDidMount kark bas wahi kaam ab useEffect se karte hai

    • @DesiMatrixXD
      @DesiMatrixXD 3 роки тому +1

      @@slmshady539 mujhe 2 months pehle hi samjh gaya tha bhai, but still appreciate your effort brother ❤️

    • @slmshady539
      @slmshady539 3 роки тому +1

      @@DesiMatrixXD koi baat nahi bhai... Toh react developer ban gaye ya abhi college me ho aap

    • @DesiMatrixXD
      @DesiMatrixXD 3 роки тому

      @@slmshady539 college me hi hu fir bhi developer hu. Maine abhi jald hi ye project banaya hai react-blogging-app.herokuapp.com/
      Custom backend ke saath.

    • @slmshady539
      @slmshady539 3 роки тому +1

      @code fire I'm glad it helped 👍

  • @ujwalsingh2636
    @ujwalsingh2636 4 роки тому +5

    Sir 1 website bna do react m multipages wla

  • @abhijeetmokale5604
    @abhijeetmokale5604 3 роки тому

    Custom PC Video Lao Vinod Sir!!!
    please

  • @The_Guiders_Consultancy
    @The_Guiders_Consultancy 2 роки тому

    Thapa bhai I love you

  • @nevilpereira1988
    @nevilpereira1988 3 роки тому

    This is for get.. kindly make video for post api, Super and class

  • @khushboosharma9717
    @khushboosharma9717 3 роки тому

    How to implement this with lifecycle methods?

  • @atifaslam2965
    @atifaslam2965 3 роки тому +1

    if you want to use a particular move from the array. then just do this
    setMoves(res.data.moves[0].move.name);
    change 0 if you do not like

    • @prash0202
      @prash0202 3 роки тому

      Not working - Cannot read property '0' of undefined

    • @atifaslam2965
      @atifaslam2965 3 роки тому

      @@prash0202 console.log(res.data) first thn see what happens

    • @prash0202
      @prash0202 3 роки тому

      Thanks Atif... Please help me and let me know how can i show 2 values with only single useState([])

    • @spacex3360
      @spacex3360 2 роки тому +1

      @@prash0202 state ko as a object use karo

  • @rajbannasa7662
    @rajbannasa7662 3 роки тому

    thank you so much sir

  • @syedsabeehahmedfatmi1099
    @syedsabeehahmedfatmi1099 3 роки тому

    pawfect video

  • @raj.saurabhh
    @raj.saurabhh 3 роки тому

    Axios ka kya kaam?

  • @manishkhanna4054
    @manishkhanna4054 4 роки тому +1

    and boom

  • @yogeshsharma8966
    @yogeshsharma8966 3 роки тому

    sir ,axios ke or bhi methode, hai put,delete,push wo bhi btao please

  • @sumitpaul5839
    @sumitpaul5839 3 роки тому +4

    setMoves(response.data.moves[0].move.name);

  • @huzaifashaikh818
    @huzaifashaikh818 4 роки тому +1

    Acha smjha ta ho

  • @DEEPANSHU_NAG
    @DEEPANSHU_NAG 4 роки тому

    Great project 💯👏🏻✌🏻

    • @ThapaTechnical
      @ThapaTechnical  4 роки тому +1

      Glad you like it!

    • @DEEPANSHU_NAG
      @DEEPANSHU_NAG 4 роки тому

      @@ThapaTechnical 👍🏻

    • @demoforall4305
      @demoforall4305 4 роки тому

      @@ThapaTechnical Sir Series me 104 videos the to aaj morning me 54 kese ho gaye ??

    • @aviseksahoo1953
      @aviseksahoo1953 4 роки тому

      @@ThapaTechnical Cannot read property 'length' of undefined show kar raha hai

  • @swatisinha3141
    @swatisinha3141 3 роки тому

    How to post data in a form in react plz make video using functional components

  • @curiouscosmos786
    @curiouscosmos786 2 роки тому

    And BOOM Guys 😁

  • @kalyanipriyadarsini
    @kalyanipriyadarsini 2 роки тому

    Wow

  • @yashfarm6913
    @yashfarm6913 3 роки тому

    Hii sir, please answer: how get images of Pokemon in our react app?

  • @thecoderraj3777
    @thecoderraj3777 3 роки тому

    Thanks sir :)

  • @mithunkumars6097
    @mithunkumars6097 3 роки тому

    Your are awesome

  • @ritiksahu5310
    @ritiksahu5310 3 роки тому

    fresh OS always makes 'react' fast
    toh agar loading slow ho rahi hai toh refresh your PC

  • @0xRudro
    @0xRudro Рік тому +1

    20:40 jhoot pakra gya

  • @Ronak3262
    @Ronak3262 Рік тому

    In sab mein se mujhe sirf ek pata tha aur hua tha Pikachu😅

  • @muhammadahsanqureshi6704
    @muhammadahsanqureshi6704 3 роки тому

    any one plz help me ..i am facing error in when writting res.data.moves.length.
    this error:Unhandled Rejection (TypeError): Cannot read property 'length' of undefined? plz if anyone can help.

    • @rahul4tech
      @rahul4tech 3 роки тому +2

      the problem is when you load page first time without changing drop down value axios calls the api without whatever option and the data returned is empty or i say undefined, so you should code like whenver use effect is called it should check that option is defined or not for eg:
      if(option){
      const fetchData = async() => {
      const res = await axios.get(`pokeapi.co/api/v2/pokemon/${option}`)
      setData((prev) => {
      return {
      ...prev,
      pokeName : res.data.name,
      pokeMoves : res.data.moves.length
      }
      })
      }
      fetchData()
      }

    • @ankurpandey7103
      @ankurpandey7103 Рік тому

      @@rahul4tech thanks brother for the help!

  • @coderhh6515
    @coderhh6515 4 роки тому

    First commenter

  • @bhakuninavneet3906
    @bhakuninavneet3906 4 роки тому

    Thanku sir

  • @abhishekporwal5056
    @abhishekporwal5056 3 роки тому

    How can we do this with the help of TOKENS??

  • @KIRTIMGM-u4p
    @KIRTIMGM-u4p 10 місяців тому

    sir please provied api link in your video.

  • @rupalisarkar85
    @rupalisarkar85 3 роки тому

    Please make a tutorial video on react native

  • @ankitaggarwal2700
    @ankitaggarwal2700 4 роки тому

    Bhaiya *custom pc build* per video bnao

  • @raj5583
    @raj5583 3 роки тому

    It is very easy to pull data from dummy services. If possible try to fetch data from the real time backend server then this will not be this easy

  • @introvertleader
    @introvertleader 4 роки тому +1

    Custom PC video want!

  • @bivusingha2079
    @bivusingha2079 3 роки тому

    Bhaiya API CORS error ke uper kuch or video banau please please please.

  • @kshitizshah6685
    @kshitizshah6685 4 роки тому

    axios ko bare ma poila kina na vaneko bro , thet malai 2 minute lagthyo poila...LOL

  • @Ninja-cn6kj
    @Ninja-cn6kj 3 роки тому

    image kaise laye isme

  • @knowledgeera3210
    @knowledgeera3210 2 роки тому

    we will get that by result.data.moves[0].move.name

  • @siddhartharauta7483
    @siddhartharauta7483 4 роки тому

    Sir customer pc video banao plz

  • @ashifmohammad9465
    @ashifmohammad9465 2 роки тому

    Error ka bataw bhai

  • @bakasenpaidesu
    @bakasenpaidesu 2 роки тому +1

    ;)

  • @surajali1101
    @surajali1101 2 роки тому

    25 alpha saphirea-sapphire-sapphire

  • @akashjitnayak6947
    @akashjitnayak6947 4 роки тому

    useEffect() ?????