Skip to content
Share
Explore

Create a REACT POKEDEX app that uses AXIOS and fetching data from APIs

Peter Sigurdson
Last edited 682 days ago by System Writer.
Create a REACT POKEDEX app that uses React Native's Fetch API is to work with the Pokemon API.

Pay attention to how you will use state and props


Let's create a React Native Pokedex app that uses the Pokemon API. Here are the steps:

Create a new React Native app using the Expo CLI by running the following command in your terminal:

expo init MyPokedexApp

This will create a new directory called MyPokedexApp with the basic files and structure of an Expo project.
Install the axios package to make HTTP requests to the Pokemon API by running the following command in your terminal:
npm install axios

Create a new file called Pokemon.js in the src directory of your project. This file will contain a class that represents a Pokemon object.

class Pokemon {
constructor(name, imageUrl, types) {
this.name = name;
this.imageUrl = imageUrl;
this.types = types;
}
}

export default Pokemon;

Create a new file called PokemonList.js in the src directory of your project.
This file will contain a class that represents a list of Pokemon objects.
import React from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
import Pokemon from './Pokemon';

class PokemonList extends React.Component {
constructor(props) {
super(props);
this.state = {
pokemons: [],
isLoading: true,
error: null,
};
}

componentDidMount() {
axios
.get('https://pokeapi.co/api/v2/pokemon?limit=151')
.then((response) => {
const pokemons = response.data.results.map((result, index) => {
const id = index + 1;
const imageUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;
return new Pokemon(result.name, imageUrl, []);
});
this.setState({ pokemons, isLoading: false });
})
.catch((error) => {
this.setState({ error, isLoading: false });
});
}

render() {
const { pokemons, isLoading, error } = this.state;

if (isLoading) {
return <Text>Loading...</Text>;
}

if (error) {
return <Text>Error: {error.message}</Text>;
}

return (
<View>
{pokemons.map((pokemon) => (
<Text key={pokemon.name}>{pokemon.name}</Text>
))}
</View>
);
}
}

export default PokemonList;


Let's go through this code step by step:

We import the necessary components from React Native: View and Text, as well as axios for making HTTP requests and Pokemon for representing a Pokemon object.
We define our component class, PokemonList, and create a constructor method to set the initial state of our component with an empty array of Pokemon objects, a loading flag, and an error flag.
We use the componentDidMount lifecycle method to make an HTTP request to the Pokemon API using axios. We then map over the results to create a new Pokemon object for each result and set the state with the list of Pokemon objects.
We check the loading and error flags in the render method and return appropriate messages if needed.
Finally, we render a View component that contains a list of Text components with the name of each Pokemon.

Open the App.js file in the project root directory and replace its contents with the following code:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import PokemonList from './src/PokemonList';

export default function App() {
return (
<View style={styles.container}>
<PokemonList />
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});


This file creates a new component App that renders our PokemonList component.


In your terminal, navigate to the project root directory and run the following command to start the development server:

expo start


This will open a browser window showing the Expo Developer Tools.
To test your app on your Android or iOS device or emulator, you need to install the Expo app from Google Play Store or App Store. Once installed, open the app and scan the QR code on the Expo Developer Tools page using your device camera.
Expo will then build and deploy your app to your device or emulator.
That's it! You have successfully created a React Native Pokedex app that uses the Pokemon API. You have also learned how to use state and props to create dynamic and responsive components in React. Keep exploring and experimenting with React Native and Expo to create more complex and interesting apps.
Pay attention to how you will use state and props
Let's create a React Native Pokedex app that uses the Pokemon API. Here are the steps:
Create a new React Native app using the Expo CLI by running the following command in your terminal:
Create a new file called Pokemon.js in the src directory of your project. This file will contain a class that represents a Pokemon object.
Let's go through this code step by step:
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.