Build A Pokémon Application With React - Tutorial
ฝัง
- เผยแพร่เมื่อ 17 ต.ค. 2024
- Building React applications doesn't have to be about building boring todo lists. In this video we will be creating a React Pokemon application using the latest features of React. This means we will utilize hooks for state and effects instead of classes. By the end of this video you will have a strong understanding of the basics for building out a React application that accesses external APIs.
🚨 IMPORTANT:
Learn React Today Course: courses.webdev...
📚 Materials/References:
Array Destructuring Tutorial: • Why Is Array/Object De...
GitHub Code: github.com/Web...
🧠 Concepts Covered:
Creating a React application
useState hook
useEffect hook
How to use axios with React
How to organize React components
🌎 Find Me Here:
My Website: webdevsimplifi...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#Pokemon #WDS #React
You're truly what you called yourself"Web Dev Simplified". You explain complex topics so effortlessly and also your videos are so inspiringly awesome
Thank you so much! That really means a lot to me and inspires me to push forward and make more even better videos.
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.
@@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.
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 :)
You are very welcome!
I just shouted wow at the end of the video, when all your explanation are very straight forward and very easy to understand!
I like how you just dont care about how good the page looks and just codes trough it.
Awsome video!
Both ur tutorial and calmness while teaching are adorable :)
This was one of the best Tutorial i watched... Understood a lot about hooks.
Very great way of teaching ! You taught this so easily I thought it will we very hard
Awesome tutorial! loved it! I think we need more of these mini tutorial projects based on API's and many other stuff!
Thanks! I really enjoy making these mini projects and have a ton more that I want to do.
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.
You got sunburn budd? Looks like you had a fun long weekend :P Thanks for the video!!
Super sunburnt, but it was a fun weekend so I would say it was worth it.
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!
I am definitely taking your React Course. love your videos. simple to understand. Thanks for the contents.
Thank you so much! I really hope you enjoy the course.
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❤
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.
Your videos are awesome and it is easier to understand you then my bootcamp i went too
Your tutorials are great to watch. I really enjoy that you do examples that are more complicated than simple todo apps like most other TH-camrs. I'm impressed at how well you explain what you are doing and why in a easy to understand but thorough way!
My man, awesome tutorial! Watched it before I started my work day and loved the concise explanations for everything. Grats on 30k btw!
Thank you so much! Reaching 30k amazing subscribers feels unreal. I cannot believe it has happened so quickly.
@@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!!!
sir your videos are really unique and interesting for every frontend developer. thanks for making great videos.
Thank you!
Awesome tutorial, such a simple explanation!
Really nice man, your videos so understandable.I clearly understand complex topics with your videos.I'm happy for find you from TH-cam. I wish I had a teacher like you
I honestly use fetch over axios but because WebDev Simplified is teaching Axios, i guess it's time to use axios now haha
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)
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 :)
simple and efficient way to start my react app... thank you!
This is my No.1 web dev channel.
Thank you so much!
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
$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
Truly simple and easy to understand, thanks!!!
You're welcome!
Bro thank you so much u made my life easier, I wish I could buy ur course right now
I'm really glad I could help!
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?
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
Best Content on the Web right here
My Hero in the world of Programming.. This tutorial on #Pokemon is a warming up for the #React Course @ #WDS. Thanks Sir.
You're welcome! I'm glad you enjoyed it.
Beautiful tutorial using hooks. Thank you..!
You're welcome!
Thank you, you explain everything in such a neat way
Thank you sir. Bring more adv react projects.
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!
Simple and more informative Thanks 👍🙏
nice overview, nice start to an app
Learned a Lot! Thanks Kyle
Where does that cancel function come from? Is that from the dependency and available after importing it?
Got sunburned. You workout too? Nice, nice
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!
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
@@EmporerAxel That was it, thank you very much!
Awesome as always
How can we access other properties of this API. Say I want to display the image or the HP, speed etc
how can we do this by using a json document with all information on the pokemon, instead of using an api link ?
thank you bro for good teaching
How much years of exp have you in web dev? Just curious to know😅😅
Awesome. Thank you so much. Very interesting. Keep going. All the best
You're welcome!
Great tutorial as always!
Thank you!
digging the sunburn ;)
Thank you so much!
Great tutorial, but you should've clicked to the end of the list of pokemon's so that we could fully understand the application.
Hi, plz lmk what you are using to append those full screen shots after the descript screencap portion?
its great tutorial foreever
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?
Thank you :) Starting this right now.
I hope you enjoy it!
Yo Man u did a great job
Thank you!
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.
This looked deceivingly easy to me but man React isn't easy!
Can you use class component as opposed to function? (E.g : class PokemonList extends React.Component{} ) ?
7:42, 16:08, 20:00
another solid video bro
Thanks!
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
Hey, I know its too late to ask but if you know the solution to this problem please help me out as well.
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
Thanks bro
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!
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.
@@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.
@@maxiequa567 Great idea. I will add that to my list of ideas for sure.
@@WebDevSimplified Sweet!!
Great job!
how would you do this just using fetch() instead of the axios fetch?
perfect, thx for that
amazing tutorial, thanks
You're welcome!
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.
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.
@@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?
@@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.
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.
any update to cancelToken API is deprecated replacement?
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!
Can't we use useCallback on nextpage and prevpage functions?
Wish you had more TypeScript-oriented projects, but your content is great nonetheless, so keep up the good work!
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 :)
Thank you so much for the support. Maybe one day I can beat out Pewdiepie :P
What is the first one
@@theazimjon Pewdiepie ofc.
now I knew what "Web Dev Simplified" means... I wish you can teach it in Korean.. >< ㅎ
thank you!
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?
You need to make sure you import the Pagination component and create the setCurrentPageUrl variable with useState
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
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?
thanks alot !!!
Awesome, thanks a lot.
You're welcome!
Any Pokemon fans??
realy good
masterclass!
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
Lol. React used camel casing for the names because it makes it easier to read and follow.
You are Amazing bro ❤️👌👌👌
Thanks!
ok great vid but i keep getting this error when i press next on my button: TypeError: Cannot read property 'protocol' of null
Put your code here, so we can see if anything is wrong, or a github link.
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?
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.
Because none of them knows what classes to built.
Does anyone else get this error when trying to create the PokemonList div around 7:52? TypeError: pokemon.map is not a function
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.
You saved my day! Thanks a lot
you achieve to simplify web actually
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
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
Is possible to get the project source code?
im too stupid for webdev. how can i reffer to sprites from poke api?
Nice!
Thanks!
you're so amazing omg
Thank you!
my mvp
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 ☹️
Did not work for me. Couldnt even get Bulbasaur to statically render
show the code so that we can help
What is Pokemon mean? I thought it would be Pokemon game related app!