Build A Pokémon Application With React - Tutorial

[@simonkalu]

You're truly what you called yourself"Web Dev Simplified". You explain complex topics so effortlessly and also your videos are so inspiringly awesome

[@WebDevSimplified]

Thank you so much! That really means a lot to me and inspires me to push forward and make more even better videos.

[@pastorfred2543]

He made me to understand ES 6 & 7 promises, Async & Await and High order array functions that I staright away implemented them in my project. He is a Hero.

[@WebDevSimplified]

@@pastorfred2543 Thank you so much! You are truly way too kind to me. All I did was give you the information. You were the one that processed and consumed that information to implement amazing things.

[@liorocker1]

Came here after React in 30 minutes, I think this is a very accurate path to move forward as a React newbie, and now everything is more clear to me. Thank you very much for this amazing videos :)

[@WebDevSimplified]

You are very welcome!

[@sauer.voussoir]

I just shouted wow at the end of the video, when all your explanation are very straight forward and very easy to understand!

[@DeltaNrOne]

I like how you just dont care about how good the page looks and just codes trough it. Awsome video!

[@amritkumaragarwal9425]

Both ur tutorial and calmness while teaching are adorable :)

[@rayanfernandes2631]

This was one of the best Tutorial i watched... Understood a lot about hooks.

[@____prajwal____]

Awesome tutorial! loved it! I think we need more of these mini tutorial projects based on API's and many other stuff!

[@WebDevSimplified]

Thanks! I really enjoy making these mini projects and have a ton more that I want to do.

[@michaelwatson9089]

He wasn't kidding when it comes to learning the core topics of a project. This would of been longer if we built out an actually Pokémon app and got bogged down with html and CSS. This was a good tutorial.

[@niomi]

Thank you so much, I've been scouring the web looking for a simple and easy way to do pagination with react and have gotten very complex answers. Saved me a ton of time!

[@mohammedalmukhtar8949]

You got sunburn budd? Looks like you had a fun long weekend :P Thanks for the video!!

[@WebDevSimplified]

Super sunburnt, but it was a fun weekend so I would say it was worth it.

[@DevashishRoyChowdhury]

Very great way of teaching ! You taught this so easily I thought it will we very hard

[@waynes9744]

This is my No.1 web dev channel.

[@WebDevSimplified]

Thank you so much!

[@rasifrana]

I am definitely taking your React Course. love your videos. simple to understand. Thanks for the contents.

[@WebDevSimplified]

Thank you so much! I really hope you enjoy the course.

[@stclark278]

Your tutorials are great to watch. I really enjoy that you do examples that are more complicated than simple todo apps like most other KZbinrs. I'm impressed at how well you explain what you are doing and why in a easy to understand but thorough way!

[@bennett3625]

My man, awesome tutorial! Watched it before I started my work day and loved the concise explanations for everything. Grats on 30k btw!

[@WebDevSimplified]

Thank you so much! Reaching 30k amazing subscribers feels unreal. I cannot believe it has happened so quickly.

[@kneetotheface]

@@WebDevSimplified how does it feel to look back at this comment and have already passed 1M subs?? 30K < 1M ur such a 1337 h4x0r, my d00d!!!

[@AlThePal78]

Your videos are awesome and it is easier to understand you then my bootcamp i went too

[@ravishbisht502]

Thanks bro. After 4 years of this code i faced some difficulties running it in my device but i figured it out and really helpful❤

[@laurenmarcinek8146]

i spent $12k on a 6 month course and have learned more from you in two weeks than i did that entire class lmfao ily tysm

[@sovietbot6708]

$12K? I spent $200 on a year subscription of Codecademy, and they even teach you how to pass technical interviews in their front end career path, and it's at your own pace

[@antonharbers9264]

Best Content on the Web right here

[@rohitkudalkar92]

sir your videos are really unique and interesting for every frontend developer. thanks for making great videos.

[@WebDevSimplified]

Thank you!

[@gojosensei7081]

Awesome tutorial, such a simple explanation!

[@pjguitar15]

I honestly use fetch over axios but because WebDev Simplified is teaching Axios, i guess it's time to use axios now haha

[@xouchthathurtzx]

I was taught with axios out the gate, so I just stick with it. there are 3 parts: .get(url here).then(action after hitting API).catch(error message here)

[@AlThePal78]

I like axios with async better because you can make it simple. Fetch haves promises and they always render successful even when they are not :)

[@getvivekjoshi]

Truly simple and easy to understand, thanks!!!

[@WebDevSimplified]

You're welcome!

[@mauricemakesmovies]

Just built my first React app, thanks so much Kyle! Heads up: When I tried to use return () => cancel() I got the error that cancel was not a function, it only worked when I removed the parenthesis.

[@shilpavaidya1077]

simple and efficient way to start my react app... thank you!

[@israelmanzo8725]

Beautiful tutorial using hooks. Thank you..!

[@WebDevSimplified]

You're welcome!

[@adilbaqach9176]

Bro thank you so much u made my life easier, I wish I could buy ur course right now

[@WebDevSimplified]

I'm really glad I could help!

[@Gabriel-V]

Got sunburned. You workout too? Nice, nice

[@theazimjon]

Really nice man, your videos so understandable.I clearly understand complex topics with your videos.I'm happy for find you from KZbin. I wish I had a teacher like you

[@tonybrown7847]

nice overview, nice start to an app

[@pastorfred2543]

My Hero in the world of Programming.. This tutorial on #Pokemon is a warming up for the #React Course @ #WDS. Thanks Sir.

[@WebDevSimplified]

You're welcome! I'm glad you enjoyed it.

[@vashu8472]

Learned a Lot! Thanks Kyle

[@worldfromhome4033]

Awesome as always

[@yashraj6565]

Thank you sir. Bring more adv react projects.

[@joelkuijper]

Great tutorial as always!

[@WebDevSimplified]

Thank you!

[@chloeafp]

Such a great tutorial! I wish you'd explain how to get the pokemon images from the API too, I cant figure it out :D

[@moogle-studio]

Thank you, you explain everything in such a neat way

[@kavithachellasamy2393]

Simple and more informative Thanks 👍🙏

[@antoniobutcher]

digging the sunburn ;)

[@atikehasan5872]

its great tutorial foreever

[@conaxlearn8566]

How is it possible that the goto functions at line 41 and 42 would ever be null, since they are declared on line 28 and 32?

[@JoeWong81]

another solid video bro

[@WebDevSimplified]

Thanks!

[@coderb8762]

thank you bro for good teaching

[@hassaneoutouaya]

Thank you so much!

[@museitian85]

Does anyone else get this error when trying to create the PokemonList div around 7:52? TypeError: pokemon.map is not a function

[@thomasblack3415]

I had this issue and then I realized I didn't have useState(['bulbasaur', 'charmander']); on App.js. I only had useState(); After I fixed that, saved all and then refreshed the page, it worked just fine.

[@thequickcode5144]

Yo Man u did a great job

[@rangabharath4253]

Awesome. Thank you so much. Very interesting. Keep going. All the best

[@WebDevSimplified]

You're welcome!

[@randymartin9040]

Hi, Love your videos. I think this lesson kind of jumped ahead a bit too fast. You talked about props and state in your last video, but there were no code examples in that video and in this video you've kind of skipped ahead with the hand-holding and I feel like there's some knowledge gap that's missing in order for me to understand 6:51 is an example of what I mean

[@stevendornan7979]

Thank you :) Starting this right now.

[@WebDevSimplified]

I hope you enjoy it!

[@arturdeandrade7443]

Great video! I'm getting really excited about React, can't wait to do more and more projects! About this one, I've found a bug and have no idea on what's causing it. I've gone to the last page, which only contains 4 Pokémon, and when I turn back to previous pages they all start showing only 4 Pokémon too. If anyone has encountered this problem too, and knows how to fix it and why it happens, I'd really like to fiind out!

[@EmporerAxel]

This is caused by the limit parameter being set to 4 by default on the prev field of the response, once you get to the last page. The API seems to reuse whatever limit parameter you last used in any subsequent response. If you put [ setCurPageUrl(nextPageUrl.replace("limit=4", "limit=20")); ] in the gotoNextPage and gotoPrevPage methods it should fix it

[@arturdeandrade7443]

@@EmporerAxel That was it, thank you very much!

[@mehmetemin5404]

amazing tutorial, thanks

[@WebDevSimplified]

You're welcome!

[@planetmall2]

Great job!

[@valenciawalker6498]

Thank you!

[@jessyreach7130]

How can we access other properties of this API. Say I want to display the image or the HP, speed etc

[@rayoo3008]

perfect, thx for that

[@RoshanKrSoni]

You are Amazing bro ❤️👌👌👌

[@WebDevSimplified]

Thanks!

[@the_yugandharr]

This looked deceivingly easy to me but man React isn't easy!

[@hugod7955]

how can we do this by using a json document with all information on the pokemon, instead of using an api link ?

[@sbbrownie]

Thanks for the vid, I'm currently learning JavaScript as a pre-requisite to learning React, this was a good overview of what building in React actually looks like if that makes sense!

[@danylfernandes6741]

Wish you had more TypeScript-oriented projects, but your content is great nonetheless, so keep up the good work!

[@vladimirjean]

Awesome, thanks a lot.

[@WebDevSimplified]

You're welcome!

[@lordfresh]

Where does that cancel function come from? Is that from the dependency and available after importing it?

[@AymenTDD]

Thanks bro

[@angiep3883]

Can you use class component as opposed to function? (E.g : class PokemonList extends React.Component{} ) ?

[@bikidas5473]

You saved my day! Thanks a lot

[@MrWrklez]

thank you!

[@maxiequa567]

Outstanding as always Kyle! Would you consider making a companion video creating the backend API with custom data? We have a ton of video tutorials on youtube using third party API data which is great for toy apps but understanding how to structure, code and deploy a bespoke API with the same features as the pokemon one but with our own data, would be full stack heaven :) p.s thanks so much for not doing another todo app!

[@WebDevSimplified]

I like this idea. I most likely won't make it a pokemon based backend, but I do plan to make some more advanced API tutorials. I personally love making APIs so they are always fun for me.

[@maxiequa567]

@@WebDevSimplified Awesome! Yeah agree doesn't need to be pokemon but have similar features within the API such as Limit for pagination and Previous and Next, which we can then populate with custom JSON data.

[@WebDevSimplified]

@@maxiequa567 Great idea. I will add that to my list of ideas for sure.

[@maxiequa567]

@@WebDevSimplified Sweet!!

[@TheBorjj]

Hello, very useful but I have a problem - when I try to fetch the result inside useeffect and then try to use the data it says it's undefined

[@saumya7747]

Hey, I know its too late to ask but if you know the solution to this problem please help me out as well.

[@aammssaamm]

And if you have another 6 or 8 consecutive events affecting buttons’ visibility do you still dump all these into the same list? How do you resolve the conflicts then? If-else-if-else-if-else-if-else until you get burned out?

[@nicocontigliani7141]

thanks alot !!!

[@calvingonsalves7293]

This is the second youtube channel that I have subscribed to and watched most of the videos after pewdiepie :p . Quality content. I’ll surely be ready for the React course as many tech startups I have interviewed with want to switch over to React and React Native from Angular. Thank you :)

[@WebDevSimplified]

Thank you so much for the support. Maybe one day I can beat out Pewdiepie :P

[@theazimjon]

What is the first one

[@calvingonsalves7293]

@@theazimjon Pewdiepie ofc.

[@NicolayKjarnet]

Great tutorial, but you should've clicked to the end of the list of pokemon's so that we could fully understand the application.

[@philipbeauford]

Hi, plz lmk what you are using to append those full screen shots after the descript screencap portion?

[@victoriaestes2087]

Great video, and very helpful but as of Axios v0.22.0, the cancelToken API is deprecated in favor of using a fetch-like AbortController. I'm currently trying to make the new way of canceling work with this project. Would be cool to see a video about it as well.

[@rishisetpal3537]

any update to cancelToken API is deprecated replacement?

[@injector6926]

realy good

[@viniciusneto6824]

Great video! Thank you! How could I get the pokemon details? I mean... How would the API calls be arranged in a sequential structure? I'm really struggling with these Promises.

[@highvibes6116]

how would you do this just using fetch() instead of the axios fetch?

[@ManpreetSingh-ew8qs]

Can't we use useCallback on nextpage and prevpage functions?

[@timmy1752]

Hello! Thank you so much! Please make a pokedex application where there is a choice of types of pokemon, also in the field of each pokemon you can see his skills.

[@WebDevSimplified]

I do not plan to make any pokedex application right now since it is a fairly involved process. That would be a great project for you to practice with, though.

[@timmy1752]

@@WebDevSimplified Okay, that's okay! Could you briefly help with how to get a date Pokemon where all his skills are and display on the screen?

[@WebDevSimplified]

@@timmy1752 This is very dependent on your use case. I would recommend looking at the API documentation for the API we use. That will give you all the information you need to implement this idea on your own. The best way to learn is to struggle through and create your own projects.

[@skapha]

masterclass!

[@brsh1190]

Hi Kyle, thank you for your work, very useful and impressive. Can you please help how to change the number of items on the first page (the default number is 20 from this api), thank you!

[@toastytomatos5006]

ok great vid but i keep getting this error when i press next on my button: TypeError: Cannot read property 'protocol' of null

[@casadogaspar]

Put your code here, so we can see if anything is wrong, or a github link.

[@StarBattle08]

I need help, after doing *setPokemonData(res.data)* it returns and empty array, but when i save the file 1 more time, it returns the data from the api, but when the app first loaded it returns an empty array

[@willdedill]

Who like me thought he was going to see the actual Pokemon game being built in this video :D

[@JasbirSingh-kp4eu]

How much years of exp have you in web dev? Just curious to know😅😅

[@frontmonkey2322]

now I knew what "Web Dev Simplified" means... I wish you can teach it in Korean.. >< ㅎ

[@mateuspamaral00]

you're so amazing omg

[@WebDevSimplified]

Thank you!

[@digigoliath]

Nice!

[@WebDevSimplified]

Thanks!

[@jameskirkland4180]

I was able to build this with the guide but i am having trouble figuring out how to style the component the right way. any tips on putting this list of pokemon into a box? Im trying to flesh out a pokedex eventually that pulls up stats and images when you select a pokemon from the list

[@jameskirkland4180]

i found i can get style elements throught the return statement in the app.js file, for example putting the list and pagination inside of a section tag and using css to style. is this the correct way of styling in react?

[@ThePredsedatel]

im too stupid for webdev. how can i reffer to sprites from poke api?

[@mclovin72]

Why not use classes? Sometimes I see classes with components sometimes I see functions. I feel like classes are more structured and easier. Is it because classes are newer to js?

[@WebDevSimplified]

I am using functions since functions combined with hooks make doing complex things much easier. It also makes your code much cleaner to follow and read since you can easily break out and modularize your component while class components are quite bulky and hard to modularize. Hooks are also brand new to React so they have taken a lot of the bad things from classes and fixed them.

[@aammssaamm]

Because none of them knows what classes to built.

[@aarav751]

7:42, 16:08, 20:00

[@ibrahimkaiser7961]

Awesome tutorial and well-described. Though I'm new to react I understood most of it. But I'm facing a problem. As there are 964 pokemon, last page shows 4 pokemon, that's okay. But after that while clicking "previous" --> the page shows 4 pokemon everytime. How can I fix this. TIA

[@viniciusneto6824]

As pointed by @EmporerAxel - This is caused by the limit parameter being set to 4 by default on the prev field of the response, once you get to the last page. The API seems to reuse whatever limit parameter you last used in any subsequent response. If you put [ setCurPageUrl(nextPageUrl.replace("limit=4", "limit=20")); ] in the gotoNextPage and gotoPrevPage methods it should fix it

[@lildesiikid]

I'm getting this error: ./src/App.js Line 27:3: 'setCurrentPageUrl' is not defined no-undef Line 31:3: 'setCurrentPageUrl' is not defined no-undef Line 39:6: 'Pagination' is not defined react/jsx-no-undef ideas?

[@WebDevSimplified]

You need to make sure you import the Pagination component and create the setCurrentPageUrl variable with useState

[@ronniesunshine1163]

I got super confused because I wrote "onclick" like normal javascript but for some reason react uses "onClick". That makes no sense at all. Damn consistency errors. Great video, as always

[@WebDevSimplified]

Lol. React used camel casing for the names because it makes it easier to read and follow.

[@lukeyuanful]

Is possible to get the project source code?

[@botobeni]

dude please blink please don't stare into my soul

[@mustafakosmaz178]

you achieve to simplify web actually

[@bapple7844]

Web Dev "we haven't broken anything which is great" Simplified

[@cingetorixhelvetii5172]

I started to learn CSS, HTML and JavaScript 2 months ago and now I want to learn react, but this looks too advanced for my level ☹️