Pokédex with React
Tags: react, javascript, webdev, codenewbie
Published: 2020-08-10 01:38:05

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jc9hihpm6zgs2wuca84k.png)

This is a side project that I've been self studying for the past quarantine days - what day is it exactly? :thinking:

There are indefinitely thousands of Pokédex based projects out there no doubt about that, but what I'm trying to convey here is what I've learned so far in React.

# Lore
First off, I haven't touched React before and experienced it the first time back in April. It felt weird the first time you play around with it because it wasn't the typical JS,HTML,CSS that many began with and the 'Hello World' you get has already been generated for you through ```npx create-react-app hello``` With the ongoing quarantine life, it was difficult and I had some breakdowns/meltdowns during those times. Eventually, I had to continue and keep pushing I knew the consequences of not doing anything and continue to procrastinate -felt guilty too you know. So I set the nighttime for coding during the weekdays and chill around with the dudes in Discord on the weekends. It was like that for so long that the quarantine meltdown doesn't bother me anymore. Now that it has come to this, I'd like to show what I've learned in React for the past 5 months time.

# Concept
Why did I pick the Pokédex as my first React project? It's simple I like Pokémon, they've provided an open public API which can be pulled from [PokéAPI](https://pokeapi.co). I've done this before but with vanilla JavaScript,HTML and CSS so it shouldn't be that bad right? Well kind of, I had to study the concepts in React, its components and API hooks that may come useful for the project.

# Tools
* React
* react-bootstrap
* axios
* pokeapi

I thought of going react-bootstrap just because I've experienced with bootstrap before and gets the job done. Axios because of its already parsed JSON body.

I'm not going to go through very thoroughly and deep but just explain the procedure and execution on what is going on in the program.

The root/parent of the program (App.js) here uses hooks to be used for **Context** and a constant for **Memo**. Context here is, as referred to React [Docs](https://reactjs.org/docs/context.html), a way of passing down data through the component trees without the need to pass props manually at every level.

> App.js
```React
function App(){
    const [active, setActive] = useState(true);
    const [queryTerm, setQueryTerm] = useState('');
    const ProviderVal = useMemo() => ({
    active, setActive, queryTerm, setQueryTerm}),
    [active, setActive, queryTerm, setQueryTerm]);
    return(
        <ContextApp.Provider value={ProviderVal}>
         ...
        </ContextApp.Provider>
    );
}
```

There are two Hooks state used and these two should freely be able to pass down the data from child-parent and parent-child through the ContextApp. Every Context object will have a provider to allow any changes that are being made exclusively, this means it will re-render the value (in this case `ProvideVal`) whenever the `value` prop changes its value basically. Since ProviderVal is a JavaScript function of `useMemo()`, useMemo itself is a HOC (Higher Order Component) that return cached values whenever the dependencies inside of the arrays changes.

> PokemonCard.js
```React
function PokemonCard({name, url}){
    ...
    useEffect(()=> {
        axios.get(url).then((res)=> {
              ...
        }.catch((e)=>{
            console.log(e);
        })
    }, [url]);

return(
    ...
);
}

export default React.memo(PokemonCard);
```

The PokemonCard function takes in two props `{name, url}` that will re-render whenever it is changed. Changes of `{name, url}` takes place in PokemonList.js and Search.js, one is for listing a page filled with pokemons and the other is for searching specific pokemon. Which is why PokemonCard will need to be re-rendered several times through large collections of pokemons and its sprites and other miscellaneous items. The usual axios fetching of the api structure with the [url] as the dependency for changes that will be made in the `useEffect()` function. Basically if the url changes, useEffect will need to be run again because it's being included and called by the dependency array.

> PokemonList.js
```React
function PokemonList(){
    ...
    useEffect(()=> {
        axios.get(currentPage, {cancelToken: new axios.CancelToken((c)=> (cancel=c)), })
             .then((res)=> {
                  ...
             })
             .catch(){
             })
        return ()=> {cancel()};
    }, [currentPage, pageNum]);

...

export default React.memo(PokemonList);

}
```
I found this article about Axios Cancel method [here](https://dev.to/collegewap/cancelling-previous-requests-in-search-bar-using-axios-in-react-3nef). It's really well done!
The axios fetch here is almost the same but with the [currentPage, pageNum] as the dependency array. The very last bit for exporting the function is being wrapped around the `React.memo()` higher order function.

> ContextApp.js
```React
import {createContext} from 'react';

export const ContextApp = createContext(null);
```
Creates a context object and initialized.

> Search.js
```React
function Search(){
    const {queryTerm} = useContext(ContextApp);
    const name = queryTerm.toLowerCase();
    const url = `https://pokeapi.co/api/v2/pokemon/${name}`;
    return <PokemonCard name={name} url={url} />;
}
```
Here's a snippet of the Search function which has the `useContext()` function that refers to the {queryTerm} variable. It returns the PokemonCard component that has custome {name} and {url} from the {queryTerm}.

# Closing 
I guess I'm liking it? I'm not sure but I will continue with this project because there's still potential in using this API for more React APIs and concepts that I might've not known about. You can contribute to this [project](https://github.com/roidsaja/react-pokedex) by creating PRs or Issues.