Create React App From Scratch Part 5: Http Requests

This article is part of the ReactJS series, you can find the previous part on the following link: Create React App From Scratch Part 4: Styling Components.

HTTP Requests with Axios

Almost every web application build with React will need to get some data from a server, because as you know React is just the frontend. Most of the time for making the data requests from the server we are using HTTP requests, there are other methods too but in this part, we will focus on HTTP requests. In single-page applications we are not getting HTML pages when we are sending requests to the server, instead, we will get JSON data, we can send JSON data to the server too. The server which will be responding to our requests is typically Restful API. In this tutorial, we will make the HTTP requests with Axios. Axios is a promise-based HTTP client for the browser and also for Node.js. If you want to read more in detail about Axios you can get more info at Guide to Axios js Http Client.

There are other popular libraries for making HTTP requests as jQuery AJAX, window.fetch, etc.

In the previous parts, we have created a basic react app, now it is time to get real data instead of the dummy data. Firstly thing what we need to do is to create the HTTP requests, but where are we gonna put them? React have a lifecycle in the future we will see how this lifecycle work in detail, now we will use ComponentDidMount() which is the place where we will make HTTP requests. Firstly we need to install Axios with npm install axios, then in the CryptoCurrencies container, on the top, we need to import Axios, and to create ComponentDidMount().

For our request to return a date we will need some Rest API, I will be using CoinGecko, it is free with great documentation, you can find more info on coingecko.com.

Axios by default uses promises, in our example, we will use async/await, you can read more about it at Async JavaScript Part 3: Async/Await. lets see the example:

import React, {Component} from 'react';
import Cryptocurrency from '../../components/Cryptocurrency/Cryptocurrency'
import {Container} from 'react-bootstrap'
import axios from 'axios'

class CryptoCurrencies extends Component {

  state = {
    coins: []
  }

  async componentDidMount(){
    try{
      let response = await axios.get('https://api.coingecko.com/api/v3/coins/')
      this.setState({coins: response.data})
    }catch(err){
      console.log(err);
    }
  }

  render(){
    const cryptocurrencies = this.state.coins.map(coin => {
      return <Cryptocurrency key={coin.id} name={coin.name} symbol={coin.symbol} price={coin.market_data.current_price.usd}/>
    })
    return(
      <Container>
        {cryptocurrencies}
      </Container>
    );
  }
}

export default CryptoCurrencies;

CryptoCurrencies.js

As you can see we are getting the API response from the coingecko.com, then we are setting the response to the state. On the bottom firstly we are mapping every cryptocurrency to the Cryptocurrency component and we are outputting the list in the container.

Part Overview

In this part, we have seen basics about how we can fetch data in the React components with Axios, and we have outputted that data instead of the old dummy data. HTTP requests are very important because almost any React application needs some data to display or send some data to the server.

If you are interested to learn React much deeper, I recommend you to read this book:

The Road to learn React: Your journey to master plain yet pragmatic React.js

If you prefer a video course, I highly recommend you to take a look at this course on Udemy:

The code from the course is available on GitHub: Create React App From Scratch on the branch: 05-http-requests.

You can find the next part of the series here: Upcoming!