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

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

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

50% 1

Welcome, React API Call to Get Pokemon JSON Data using Axios and useEffect in ReactJS in Hindi.
Axios is a library that helps us make HTTP Requests to external resources
In our React applications, we often need to retrieve data from external APIs so it can be displayed in our web pages.
Axios is designed to handle HTTP requests and responses. Axios deals with responses using Promises, so it's streamlined and easy to use in our code. Axios uses methods like get() and post() that perform HTTP GET and POST requests for retrieving or creating resources.
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ React DevTools & Source Code Link: www.thapatechn...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: • JavaScript Tutorial in...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Install VS Code for ReactJS LINK: www.thapatechn...
➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechn...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter RU-vid Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...

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

30 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ThapaTechnical 4 года назад

I hope you like the video :) ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: ru-vid.com/group/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ I

@ajayshirote7619 3 года назад

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

@shivampali9033 3 года назад

Vinod bhai Custom PC pr video banao ek

@denisshingala 2 года назад

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

@NeerajSingh-ru1cf 4 года назад

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

@RITIKJAINBCE 3 года назад

no it is giving error

@NeerajSingh-ru1cf 3 года назад

@@RITIKJAINBCE check your code again

@mathswithsirnoushad6261 3 года назад

yes, it's working

@mohitsaud2071 3 года назад

correct ✔✔✔✔✔

@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

@MaxProgramming 4 года назад

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 4 года назад

Thank you so much ☺️

@AvinashKumar-jf9mx 3 года назад

Or koi channel h?

@MaxProgramming 3 года назад

@@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 3 года назад

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

@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 3 года назад

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.

@sumitpaul5839 3 года назад

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

@ujwalsingh2636 4 года назад

Sir 1 website bna do react m multipages wla

@AsifAli14280 4 года назад

same question

@KuldeepSingh-pl7rv 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

@syedahasan_gillani3878 3 года назад

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

@simranbanwait 2 года назад

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

@yogitataluja1058 3 года назад

setmoves(res.data.moves[0].move.name)

@VarshaSingh-hi2sb 4 года назад

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

@SachinVerma-td8ou 4 года назад

It's pokeapi

@amarchand1504 3 года назад

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

@10yearsago84 Год назад

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 11 месяцев назад

yes I am having same problem.

@InspireUShorts58 2 года назад

And boom guys 💥😂

@JavaScriptYatra Год назад

// for getting the moves name setName(result.data.name); setMoves(result.data.moves.length); const hero = result.data.moves; hero.map((val, index)=> { return console.log(val.move.name); })

@muheebpasha543 3 года назад

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

@savitaraghuvanshi 3 года назад

Sir please create tutorial on react native as well.

@kiyochi7705 3 года назад

thats app development not web dev. Its total different topic

@0xRudro Год назад

20:40 jhoot pakra gya

@manishkhanna4054 3 года назад

and boom

@quickandeasyfoodrecipes5678 Год назад

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

@noobCoder26 3 года назад

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

@ritiksahu5310 3 года назад

Bhaya you doing great work keep it up #IndianGuyOnYT

@biswajeetpadhi5713 4 года назад

Yes sir make video on costume pc build

@ShubhamGupta-mx2hn 3 года назад

Make video on DEEP LINKS IN REACT NATIVE EXPO

@ayushdedhia25 4 года назад

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

@demoforall4305 4 года назад

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

@bakasenpaidesu 2 года назад

;)

@SonuSharma-lh1qq 4 года назад

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

@rathodmehul4081 4 года назад

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

@ijazDeveloper786 3 года назад

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

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

@mohsinbohra1174 4 года назад

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

@The_Guiders_Consultancy 2 года назад

Thapa bhai I love you

@KIRTIMGM-u4p 10 месяцев назад

sir please provied api link in your video.

@manurajput8421 4 года назад

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

@manurajput8421 4 года назад

Please sir Guide me n Help me

@manurajput8421 4 года назад

Please make this own Video car Parking and booking also Please me

@nicetomeetugaming7024 2 года назад

You should try yourself bro.

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

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

@sudarshanthakur4129 3 года назад

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

@abdulmuneebafridi4437 3 года назад

love u bro for ur commment

@learninghuaeasy9549 Год назад

Cors error in react how to solve it

@huzaifashaikh818 4 года назад

Acha smjha ta ho

@Ronak3262 Год назад

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

@introvertleader 4 года назад

Custom PC video want!

@HEELSahil 4 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cKR9gzco3Kc.html Sir ye video ka source code chaiye tha. Aapke website par available nahi hai. Sir please source code dedo🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻

@listology-mostamazingtop1041 4 года назад

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

@PLAYMODE_BOOST 2 года назад

Tera video dekhta hoo to thoda der me bahut gussa aane lgta h

@surajali1101 2 года назад

25 alpha saphirea-sapphire-sapphire

@PLAYMODE_BOOST 2 года назад

Bhai bakr bkr km kr content pe jyada dhyan de

@PLAYMODE_BOOST 2 года назад

Tu bolta badi h advertise bahut karta h bhai

@coderhh6515 4 года назад

Cool video

@PLAYMODE_BOOST 2 года назад

Thoda sa advertise kar content achha daal

@YourTechWhiz 2 года назад

You should have use dependency list in the useEffect.

@InspireUShorts58 2 года назад

Optional hai .. compulsory nhi

@YourTechWhiz 2 года назад

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

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

Samajh nhi aya pr deekh kr acha lga

@asmereg 4 года назад

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

@souvikpal106 2 года назад

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 9 месяцев назад

if dependencie diya rehga toh

@DesiMatrixXD 3 года назад

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 3 года назад

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 3 года назад

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

@slmshady539 3 года назад

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

@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 3 года назад

@code fire I'm glad it helped 👍

@samirbante8554 Год назад

Mai chala pokemon dekhne

@nevilpereira1988 3 года назад

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

@knowledgeera3210 2 года назад

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

@aanchalsonawane7749 2 месяца назад

Great Sir

@satyajitdas6133 2 года назад

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

@KuldeepSingh-pl7rv 2 года назад

i guess you should try useContext()

@spacex3360 2 года назад

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

@introvertleader 4 года назад

1st view like comment & gm!

@curiouscosmos786 2 года назад

And BOOM Guys 😁

@amitbhattacharya356 2 года назад

#25 Pika Pika

@ujjwalgaur7028 2 года назад

i guess 25 par pikachu

@osamaayub405 Год назад

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

@abhijeetmokale5604 3 года назад

Custom PC Video Lao Vinod Sir!!! please

@PLAYMODE_BOOST 2 года назад

Isse tera hi nuksaan h

@nageshworshah8314 3 года назад

console.log(resp.data.moves[0].move.name);

@abhishekmagar9843 3 года назад

I got a axios problem (Unhandled Rejection (Error): Request failed with status code 404🤧😓

@ashifmohammad9465 2 года назад

Error ka bataw bhai

@eramperwez4617 3 года назад

Console.log(res.data.moves[0]);

@harishchander5480 2 года назад

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

@aviseksahoo1953 4 года назад

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

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

@kishanjangid3651 Год назад

25 pickachu

@bivusingha2079 3 года назад

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

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

@swatisinha3141 3 года назад

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

@ritiksahu5310 3 года назад

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

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

@ashwinwaikar9015 3 года назад

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

@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

@KalyaniTalks 3 года назад

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

@AjayKumar-id7mb 2 года назад

Pikachu

@listology-mostamazingtop1041 4 года назад

First view , like , comment by me

@ThapaTechnical 4 года назад

Many many thanks

@creativeakshara8438 4 года назад

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

@kshitizshah6685 4 года назад

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

@yogeshsharma8966 3 года назад

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

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

@mohitsaud2071 3 года назад

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

@covidnineteen5249 4 года назад

Thank you sir !!!

@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

@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

@nicetomeetugaming7024 2 года назад

wrong.

@ankitaggarwal2700 4 года назад

Bhaiya *custom pc build* per video bnao

@avinashgupta2308 3 года назад

data.moves[0];

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

@PriyaSingh-tx2pe 3 года назад

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

@ijazDeveloper786 3 года назад

that,s great

@noaakshay 3 года назад

setMoves(res.data.moves[0].name); i guess this one is right

@Wishdomloom9462 Год назад

nice video brother

@AkhileshYadav-lv3kh Год назад

Thank you sir 👍👍

@yashfarm6913 3 года назад

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

@nicetomeetugaming7024 2 года назад

You can get using api, also there are various methods to do it.

@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 3 года назад

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() }