Create Pokemon Codex with React and Hooks in 2021 - Tutorial

Pokemon React App is better then building todos in #reactjs. Today we will creating a simple Pokemon application using React latest features. We will create this application using Functional Components and really grasp the concept of using hooks like useEffect Hook and the useState Hook in React. This means that we will be stepping away from the traditional classes in Reactjs. By the end of this video, you will fully understand how to use external API's and how to load them on load using the useEffect hook.

💡 INSPIRATION

🔗 RESOURCES

⏰ TIMELINE
00:55 Intro - Quick overview of the application
02:20 Cleanup - Removal of default files and code
04:38 Bare bone Structure - Simple JSX structure with classes
09:25 First Result - Call to PokeAPI returns array of results
16:26 Pokemon Stats Recieved - New array created with each pokemons stats
19:43 Functional Component Created - New component added to display pokemon stats
23:48 Add Background Color to Cards - Create style variable to link with pokemon type for gb-color

👀 LOOK ME UP ON SOCIAL

[siphiwocode]

When it comes to grasping concepts, it's good to do it with FUN projects like this *Pokemon Codex* in *React* . But is it valuable though? Let me know if your knowledge and skills improved by watching this video. Oh yeah, don't forget to _LIKE_, _SUBSCRIBE_ and _SHARE_ 👌

[tonybrown]

you need more followers, my friend your tutorial is really done well. I'll be checking more videos out for sure!

[AlbertoMwt]

Thank you so much! I dont speak english very well, but your pronunciations souns so easy to understand.

[the_not_so_dark_knight]

hi thank you for explaining it in a simple way got way confused on other vids

[kiddhkane]

Very good channel. Thanks for the video!
I like your coding practices.

[kurtzin_]

Obrigado pelo vídeo ele é muito bom e me ajudou muito!! Parabéns pelo conteúdo 👏👏!

[pabloamion]

What did you do before the start of the video? like npm something? I'm so confused

[stefanchen]

Hi thank you for this helpful tutorial! At 16:22 I tried to console.log(allPokemons) just as you did, but the output was an empty array. My code was exactly the same with yours at 16:22. What could be the reason for this?

[jnem]

Awesome tutorial, but for me the thumbnails are shuffled each time I refresh the page. Is there a way to fix this?

[zzz_sleep]

Great video but i hope you can reupload again or next video with big font size cz on my smartphone your font size very small :)

[farsikogama]

The amazing codex github link cannot be found after clicked. Any idea?

[drishtisaraf]

Hey, my className=app-container is not working.

[nickpawsey]

What is yarn and why are you using it?

[mohamedkhalilkhamassi]

really nice content, why so low followers, keep it up bro really good work

[thevinylfortress]

Great tutorial! I'm curios about "currentList" in minute 14. Is this a reserved keyword? where is this come from? I undertand what is doing but if I'm calling it with other name it doesn't work. thx :)

[sivaramkumar_]

Thanks for this excellent tutorial! One small issue I found while developing this is, the pokemons at times are displayed in random order, and to verify it, I cloned your github code and checked it on my machine, it too has the same issue - pokemons not arranged in order. Can you please tell me a solution for this issue?

[mareboinaravi]

It can't be visible even when I was watching it on 1080p.... buddy

[LucasVuletic]

the pokemons are repeating here but i couldn't see if this happens with you too