Consume API, to create a pokemon detail view with ReactJS

Some of free API are available to start testing React API consume, one of this most popular one is POKEAPI, in this tutorial we will cover the first approach to understanding and answer some common questions like: How to consume it?,  How to display results over detail view components, How to create some Components?, and  How to manage Hooks like UseState an UseEffect?.

Note: this page will be updated frecuently, available repository on GitHub 
I will update it daily. this task at first.

Quick view and final project: https://epanchi.github.io/pokemon-api/

Create API consume functions

On this URL (https://pokeapi.co ) you could understand the whole appropriate option for each needs, at first we start by using https://pokeapi.co/api/v2/pokemon directly.

// API function to create some usefull stuff
// Offset: number of records we have to skip before selecting records

export const getAllData = async (limit = 10, offset = 0) => {
  let api_url = `https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`;
  try {
    const response = await fetch(api_url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
  }
};

And the second one: to get Pokemon’s detailed information

// Recover whole infomration for each pokemon
// api_url should be like this: https://pokeapi.co/api/v2/pokemon/ditto
export const getPokemon = async (api_url) => {
  try {
    const response = await fetch(api_url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.log(error);
  }
};