HTTP requests Using Axios :React Developement

An Engaging Guide for Beginners

React is one of the most popular front-end libraries for building user interfaces, and it pairs beautifully with Axios, a widely-used promise-based HTTP client. In this blog post, we’ll dive into React development using the latest Axios version, designed especially for beginners. By the end of this guide, you’ll understand how to use Axios in a React application to make API calls, handle responses, and display data dynamically.

Table of Contents:

1. What is Axios?
2. Why Use Axios in React Development?
3. Setting Up Axios in a React Project
4. Making GET and POST Requests with Axios
5. Handling Responses and Errors in Axios
6. Practical Example: Fetching Data from a Public API
7. Conclusion

1. What is Axios?

Axios is a popular library for making HTTP requests. It helps you easily communicate with APIs by sending data to and receiving data from a server. Unlike fetch, which is built into JavaScript, Axios comes with a lot of convenient features such as:

• Promise-based syntax for handling asynchronous operations.
• Automatic JSON data transformation, making it simpler to work with API responses.
• Simplified error handling.
• Request cancellation and other advanced features.

For beginners, Axios is often easier and more intuitive to work with compared to other options like fetch.

---

2. Why Use Axios in React Development?

In React, we frequently need to interact with APIs to retrieve or send data. This could be anything from fetching user information, displaying a list of items, or submitting a form.

Axios is an ideal companion for React because:

• It helps manage asynchronous operations like making API requests.
• It simplifies how we handle data and errors.
• Its interceptors feature allows for modifying requests or responses globally before they’re handled, which is particularly useful for adding authentication headers.

By using Axios in React, you get a smoother and more flexible way to interact with your backend or third-party APIs.

---

3. Setting Up Axios in a React Project

Let’s start by adding Axios to a React project.

Step 1: Install Axios

In your React project folder, open the terminal and run the following command to install Axios:

npm install axios

Alternatively, if you’re using Yarn:

yarn add axios

Step 2: Import Axios in Your Component

Now, in your React component where you want to make an API request, import Axios like so:

import axios from 'axios';

---

4. Making GET and POST Requests with Axios

With Axios, you can easily make HTTP requests. The two most common requests are GET (to fetch data) and POST (to send data).

GET Request

A GET request retrieves data from an API. Here’s an example of how to fetch data inside a React component:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Here’s a breakdown:

• We use useEffect to trigger the API call when the component mounts.
• axios.get() sends a GET request to the API.
• On success, we update the state with response.data.
• We handle errors with the .catch() method.

POST Request

A POST request sends data to an API. Here’s an example of sending form data:

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title,
      body,
    })
    .then((response) => {
      console.log('Post successful:', response.data);
    })
    .catch((error) => {
      console.error('Error posting data:', error);
    });
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={title} 
          onChange={(e) => setTitle(e.target.value)} 
          placeholder="Title" 
        />
        <textarea 
          value={body} 
          onChange={(e) => setBody(e.target.value)} 
          placeholder="Body" 
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

In this example:

• axios.post() is used to send data to the API.
• We handle user input and send it as a payload in the POST request.

---

5. Handling Responses and Errors in Axios

One of the great features of Axios is how it handles responses and errors. You can access status codes, headers, and response data easily.

For example:

axios.get('/some-api')
  .then((response) => {
    console.log('Status:', response.status); // Status code
    console.log('Data:', response.data); // Response data
    console.log('Headers:', response.headers); // Response headers
  })
  .catch((error) => {
    if (error.response) {
      // Server responded with a status other than 200 range
      console.log('Error Data:', error.response.data);
      console.log('Error Status:', error.response.status);
    } else if (error.request) {
      // No response received
      console.log('Error Request:', error.request);
    } else {
      // Something else went wrong
      console.log('Error Message:', error.message);
    }
  });

---

6. Practical Example: Fetching Data from a Public API

Let’s put everything together with a simple practical example where we fetch data from a public API (e.g., a list of users) and display it in our React app.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then((response) => {
        setUsers(response.data);
      })
      .catch((error) => {
        console.error('Error fetching users:', error);
      });
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

In this example:

• We use Axios to make a GET request to the API.
• The fetched user data is then mapped and displayed in the UI.

---

7. Conclusion

Axios simplifies the process of making HTTP requests in React applications. Its ease of use, error handling, and powerful features make it an essential tool for developers, especially beginners looking to work with APIs.

In this guide, we’ve covered:

• Setting up Axios in a React project.
• Making GET and POST requests.
• Handling responses and errors.
• A practical example of fetching data from an API.

Now that you’re familiar with Axios and React, you can confidently integrate API calls into your projects and enhance your app’s functionality. Happy coding!