DEV Community

Cover image for Pokemon API using ReactJs

Pokemon API using ReactJs

isurojit on March 17, 2021

Tried to create a little fun project using reactjs.pokeapi is used to fetch data. Multiple components used to trigger the state. Try it- https://bi...
Read full post
Collapse
 
dastasoft profile image
dastasoft • • Edited

Check react-query and try to implement an infinite scroll instead of loading the first 500, I'm sure you will find it interesting.

It's a cool project to start and you already built a nice playground to test a lot of nice stuff there so keep it up! :)

Collapse
 
isurojit profile image
isurojit •

Thank you, sir, for your warm appreciation. It will boost up my morale to do much more & I will try to implement an infinite scroll. Actually, I am trying to use material UI for pagination. There will be 100 pokemon on every page. I don't know will it look good or not. Any suggestions sir?

Collapse
 
dastasoft profile image
dastasoft •

If you really want to try MaterialUI go ahead but, I found it easier (specially if it's your first UI implementation) chakra-ui.com/

For the number of pokemons per page, when you play with the inifinite scroll you'll find out what fits or doesn't fit there :)

Thread Thread
 
bobbyshiew profile image
Bob shiew •

mind sharing how you implemented the infinite scroll feature?

Thread Thread
 
dastasoft profile image
dastasoft •

You can view an implementation of a infinite scroll in this side project or do you need something specific with react-query and infinite scroll? If that is the case as far as I can remember official docs had an example about that.

Collapse
 
migueldevelopez profile image
MiguelDevelopez •

Put js when you introduce a code to print it properly

import React from 'react';
import './search-box.styles.css';

export const SearchBox = ({placeholder, handleChange}) =>(
    <input   />
);
Enter fullscreen mode Exit fullscreen mode

And about the code, you should investigate the react hooks, you will love it

Collapse
 
isurojit profile image
isurojit •

Thank you for your much-needed valuable suggestions. I am onto it, sir.

Collapse
 
qsrahman profile image
Sami ur Rahman •

If the constructor is only used for initializing state, it can be removed completely. use

class App extends Component{
    state = {
      pokemons: [],
      search: ''
    }
  }
...
Enter fullscreen mode Exit fullscreen mode
Collapse
 
isurojit profile image
isurojit •

Yes sir, Understood. I will implement as you have instructed. Thank you for your valuable suggestion.

Collapse
 
marvinschopf profile image
Marvin •

I think the project is great! Just one small question: Would it be possible to leave the cursor as an optional alternative? For my part, I find it rather obstructive on a website.

Collapse
 
isurojit profile image
isurojit •

I made it for fun. I think I can use js to trigger an event where there will be an option on double click to make cursor default or I can show an option or fixed button where the event will be triggered to make the cursor default. Please give me your valuable suggestion sir on which option I should opt for.

Collapse
 
bobbyshiew profile image
Bob shiew •

can i have the full source code pls was wondering how u styled the cards

Collapse
 
anaperezlopez profile image
anaperezlopez •

hola, como me puedo descargar todo el codigo completo?