Making API Calls with Axios in React

Hello, fellow tech explorer! Welcome to this journey of building apps using React and Axios. If you’re eager to learn how to fetch data from an API and display it like a pro, you’ve arrived at the right place. Let’s dive in together!

What is Axios and Why Use It?

Axios is a promise-based HTTP client that works in the browser and Node.js. Why use Axios?

• Easy to Use: Simple syntax for HTTP requests
• Promises: Cleaner async handling
• Interceptors: Modify requests/responses globally
• Wide Support: Works in most environments

Setting Up Your React Environment

Creating a New React App

npx create-react-app axios-demo
cd axios-demo

Installing Axios

npm install axios

Making Your First API Call with Axios

Step 1: Creating a Component

Create a file DataFetcher.js in src:

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

const DataFetcher = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

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

  if (loading) {
    return <div>Loading...</div>;
  }

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

export default DataFetcher;

Step 2: Using State

We use useState to manage the fetched data and loading state.

Step 3: Fetching Data

The API call happens inside useEffect using axios.get().

Step 4: Displaying Data

We render each post title in a list using map().

Integrating the Component

Update App.js

import React from 'react';
import './App.css';
import DataFetcher from './DataFetcher';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <DataFetcher />
      </header>
    </div>
  );
}

export default App;

Now run:

npm start

Optional Practice Ideas

• Add Error Handling UI: Show error messages on failure.
• Try Other Endpoints: Use the JSONPlaceholder API.
• Post Data: Use axios.post() to submit new data.

Summary

You’ve now learned how to fetch data in React using Axios!

• 📦 Set up a React project
• 🔧 Install and use Axios
• 🌐 Fetch and display API data

Keep experimenting and coding. Until next time—happy React-ing! ⚛️🚀