How to integrate your React application with backend using Axios ?

If you are looking for something simple to help connect your API endpoint to your react frontend then you have clicked the right link. I used to code in Angular before and making API calls was easily done by built in http library, but when I shifted to React at first I was confuse like most of you because there were many libraries for this purpose but mainly 3 — Axios, fetch and superagent.

At first I used fetch library, but when I started using Axios things became a lot easier and now I don’t waste my time in this integration which literally can be done within few lines.

At first, let me explain you in short what Axios is And why Axios and not any other library

So just like I mentioned above Axios is like any other library which helps us make http requests to external resources(backend). In our React applications we often need to retrieve data from API endpoints so it can be displayed in our web pages. Axios helps us retrieve that data from backend to frontend and even make post, update or delete requests to your backend.

For detailed understanding refer to the Axios documentation here

Getting started with Axios-

• To include axios in your application run this command in your react project

npm install axios

now just like http, axios has these basic methods get, post, put and delete to perform operations on your data. I will tell you two ways to approach this integration.

1. Using API calls directly

• This works as simple as it sounds. Here we just import axios from ‘axios’ library and perform API calls on it.

axios.get

• In get method we pass url from which we need to get the data. Here I used object destructuring as get request sends a response object which has data property which contains data we required. By default this data is in JSON format so we don’t need to perform any conversion.

axios.post

• While posting the data first url parameter will be same then second parameter will be the object or property you want to pass(review in above code). Since review is already an object we passed it as it is, to pass more objects as part of one single object use them in curly braces like this {object1, object2}. And the third parameter is optional as it includes the headers for passing your data(config).

axios.put

• Since put method works same as post, so it is self explanatory only difference here is that the 2nd parameter we pass here is already created object that we need to update while in post it was to create that object.

axios.delete

• Even delete method is very easy as in above code in url itself I passed the product I wanted to delete using {id} and again the headers argument is optional.

2.Creating an instance of Axios

• Here just like we create an instance of an object in javascript, we created instance of an Axios object using .create method

-Here we created instance using instance variable and the baseURL property is the url for API endpoint running on your machine or from hosted server. Now we can easily import this instance in any screen where we need to make API calls.

In the above code just focus on response object. axios object you see above is nothing but the instance variable imported as axios. Here we are calling post method on the url property which continues the baseURL we defined in instance. This way you don’t need to use the whole url everytime and to minimize the code you can write directly axios.post instead of method:’post’.

This much information is enough for you to get started with axios. Yes..

In case you are wondering why axios and not fetch(since fetch is 2nd most popular) here are some of the advantages of using axios over fetch

• Axios’ data contains the object. While fetch’s body has to be stringified.
• Axios performs automatic transforms of JSON data. Fetch is a two-step process when handling JSON data- first, to make the actual request; second, to call the .json() method on the response.
• Axios allows cancelling request and request timeout. Fetch doesn’t allow such cancellation.
• Axios has the ability to intercept HTTP requests(interceptors). No interception in fetch.

I guess this must have given you an idea why Axios is more used and popular. I would still recommend using other libraries at least once to understand it yourself and figure out which one you are comfortable with most.

Hope this post was helpful!!😇

Happy Coding 👋