Build A Pokémon Application With React - Tutorial
HTML-код
- Опубликовано: 11 сен 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!
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.
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 :)
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.
This was one of the best Tutorial i watched... Understood a lot about hooks.
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.
Very great way of teaching ! You taught this so easily I thought it will we very hard
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.
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!
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!!!
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 :)
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 RUclipsrs. I'm impressed at how well you explain what you are doing and why in a easy to understand but thorough way!
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.
sir your videos are really unique and interesting for every frontend developer. thanks for making great videos.
Thank you!
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❤
Really nice man, your videos so understandable.I clearly understand complex topics with your videos.I'm happy for find you from RUclips. I wish I had a teacher like you
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
Truly simple and easy to understand, thanks!!!
You're welcome!
Awesome tutorial, such a simple explanation!
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!
Thank you, you explain everything in such a neat way
This is my No.1 web dev channel.
Thank you so much!
simple and efficient way to start my react app... thank you!
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
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.
Best Content on the Web right here
Beautiful tutorial using hooks. Thank you..!
You're welcome!
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!
digging the sunburn ;)
Got sunburned. You workout too? Nice, nice
Learned a Lot! Thanks Kyle
Simple and more informative Thanks 👍🙏
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!
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?
nice overview, nice start to an app
Thank you sir. Bring more adv react projects.
Awesome as always
How much years of exp have you in web dev? Just curious to know😅😅
Wish you had more TypeScript-oriented projects, but your content is great nonetheless, so keep up the good work!
how can we do this by using a json document with all information on the pokemon, instead of using an api link ?
Awesome. Thank you so much. Very interesting. Keep going. All the best
You're welcome!
Thank you so much!
its great tutorial foreever
thank you bro for good teaching
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!!
How can we access other properties of this API. Say I want to display the image or the HP, speed etc
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.
Thank you!
Great tutorial as always!
Thank you!
Thanks bro
Yo Man u did a great job
Great job!
Thank you :) Starting this right now.
I hope you enjoy it!
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.
perfect, thx for that
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!
amazing tutorial, thanks
You're welcome!
Great tutorial, but you should've clicked to the end of the list of pokemon's so that we could fully understand the application.
now I knew what "Web Dev Simplified" means... I wish you can teach it in Korean.. >< ㅎ
masterclass!
thank you!
Hi, plz lmk what you are using to append those full screen shots after the descript screencap portion?
You are Amazing bro ❤️👌👌👌
Thanks!
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.
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!
thanks alot !!!
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.
realy good
Can you use class component as opposed to function? (E.g : class PokemonList extends React.Component{} ) ?
Awesome, thanks a lot.
You're welcome!
7:42, 16:08, 20:00
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?
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
how would you do this just using fetch() instead of the axios fetch?
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.
im too stupid for webdev. how can i reffer to sprites from poke api?
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?
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.
Can't we use useCallback on nextpage and prevpage functions?
dude please blink please don't stare into my soul
You saved my day! Thanks a lot
you're so amazing omg
Thank you!
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 ☹️
Nice!
Thanks!
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.
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?
my mvp
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
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?
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!
Any Pokemon fans??