Ayush Labs

Fetch Me If You Can

Have you ever wanted to build something simple and fun while learning how to work with APIs in React? Let’s create a cute little Cat Facts Generator that fetches random facts about cats using two methods: fetch and axios. Folder Structure : given fo...

the_OldSchool_coder
fetch
fetch API
React
Fetch Me If You Can

Have you ever wanted to build something simple and fun while learning how to work with APIs in React? Let’s create a cute little Cat Facts Generator that fetches random facts about cats using two methods: fetch and axios.

Folder Structure :

given for reference

FETCHING-API/
├── public/
│   └── index.html
├── src/
│   ├── fetch-api/                 # API-related feature grouping
│   │   ├── cat-quote-generator/  # Cat facts feature
│   │   │   ├── Fetch.jsx         # Using native fetch
│   │   │   └── Axios.jsx         # Using axios
│   │   └── execuser-api/         # Another API-based module
│   │       └── Axios.jsx
│   ├── App.jsx                   # Root component
│   ├── main.jsx                  # Entry point (ReactDOM.render)
├── .gitignore
├── package.json
├── .qodo                         # Probably Qodana config
├── eslint.config.js

What You'll Learn

  • How to use useState and useEffect to manage API response data.

  • How to fetch data from an API using both fetch and axios.

  • How to trigger API calls on a button click.

1. Using fetch – The Native Way

import { useState } from 'react';

export default function Fetch() {
  const [catfact, setcatfact] = useState("");

  function fetchdata() {
    fetch("https://catfact.ninja/fact")
      .then((res) => res.json())
      .then((data) => setcatfact(data));
  }

  return (
    <div
      style={{
        textAlign: 'center',
        background: '#fdfdfd',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 6px 20px rgba(0, 0, 0, 0.1)',
        margin: '20px auto',
        maxWidth: '600px',
      }}
    >
      <h1
        style={{
          fontSize: '24px',
          color: '#333',
          marginBottom: '20px',
          fontWeight: 'bold',
        }}
      >
        cat quotes with fetch function
      </h1>

      <button
        onClick={fetchdata}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '8px',
          fontSize: '16px',
          cursor: 'pointer',
          transition: 'background-color 0.3s ease',
        }}
        onMouseOver={(e) => (e.target.style.backgroundColor = '#0056b3')}
        onMouseOut={(e) => (e.target.style.backgroundColor = '#007bff')}
      >
        Generate Cat fact
      </button>

      <p
        style={{
          marginTop: '20px',
          fontSize: '18px',
          color: '#444',
        }}
      >
        {catfact.fact}
      </p>
    </div>
  );
}

How it works:

  • fetch makes a GET request to the API.

  • It parses the JSON response.

  • The cat fact is stored in state and displayed.

2. Using axios – A Cleaner Alternative

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

export default function FetchWithAxios() {
  const [catfact, setcatfact] = useState("")

  function fetchingData() {
    axios.get("https://catfact.ninja/fact").then((res) => {
      setcatfact(res.data.fact)
    })
  }

  useEffect(() => {   
    fetchingData()
  }, [])

  return (
    <div style={{
      textAlign: 'center',
      backgroundColor: '#fdfdfd',
      borderRadius: '12px',
      padding: '30px',
      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
      margin: '30px auto',
      maxWidth: '600px'
    }}>
      <hr style={{ marginBottom: '20px' }} />
      <h1 style={{
        fontSize: '26px',
        color: '#222',
        marginBottom: '20px',
        fontWeight: 'bold'
      }}>
        Cat quotes with Axios
      </h1>
      <button
        onClick={fetchingData}
        style={{
          marginBottom: '20px',
          padding: '10px 18px',
          backgroundColor: '#6f42c1',
          color: 'white',
          border: 'none',
          borderRadius: '6px',
          cursor: 'pointer',
          fontSize: '15px'
        }}
        onMouseOver={(e) => e.target.style.backgroundColor = '#5a32a3'}
        onMouseOut={(e) => e.target.style.backgroundColor = '#6f42c1'}
      >
        get quote
      </button>
      <p style={{
        fontSize: '18px',
        color: '#555',
        lineHeight: '1.5'
      }}>{catfact}</p>
    </div>
  )
}

Why axios?

  • Cleaner syntax (no need for .then() chaining).

  • Better error handling out of the box.

  • Widely used in production apps.

Final Thoughts

Both fetch and axios are great for calling APIs in React. Use fetch if you want zero dependencies. Use axios if you prefer cleaner code and better features.

Whether you're learning or prototyping, this mini cat facts app is a purr-fect way to practice React basics with APIs!

Making a project “Execuse maker” :

Here is the code for it.

Here is the API link for making it : API

In excuser-api/Axios.jsx :

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

export default function UserAxios() {
  const [excuse, setExcuse] = useState('');

  function officeExcuse() {
    axios.get("https://excuser-three.vercel.app/v1/excuse/office").then((res) => {
      setExcuse(res.data[0].excuse)
    })
  }

  function famillyexcuse() {
    axios.get("https://excuser-three.vercel.app/v1/excuse/family/").then((res) => {
      setExcuse(res.data[0].excuse)
    })
  }

  function funnyExcuse() {
    axios.get("https://excuser-three.vercel.app/v1/excuse/funny/").then((res) => {
      setExcuse(res.data[0].excuse)
    })
  }

  useEffect(() => {
    officeExcuse()
  }, [])

  useEffect(() => {
    famillyexcuse()
  }, [])

  useEffect(() => {
    funnyExcuse()
  }, [])

  return (
    <div style={{
      textAlign: 'center',
      backgroundColor: '#fefefe',
      borderRadius: '12px',
      padding: '30px',
      boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
      margin: '30px auto',
      maxWidth: '600px'
    }}>
      <hr style={{ marginBottom: '20px' }} />
      <h1 style={{
        fontSize: '26px',
        color: '#333',
        marginBottom: '20px',
        fontWeight: 'bold'
      }}>What is your excuse?</h1>

      <div style={{ marginBottom: '20px' }}>
        <button
          onClick={officeExcuse}
          style={{
            margin: '5px',
            padding: '10px 18px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '6px',
            cursor: 'pointer',
            fontSize: '15px'
          }}
          onMouseOver={(e) => e.target.style.backgroundColor = '#0056b3'}
          onMouseOut={(e) => e.target.style.backgroundColor = '#007bff'}
        >
          Office excuse
        </button>

        <button
          onClick={famillyexcuse}
          style={{
            margin: '5px',
            padding: '10px 18px',
            backgroundColor: '#28a745',
            color: 'white',
            border: 'none',
            borderRadius: '6px',
            cursor: 'pointer',
            fontSize: '15px'
          }}
          onMouseOver={(e) => e.target.style.backgroundColor = '#1e7e34'}
          onMouseOut={(e) => e.target.style.backgroundColor = '#28a745'}
        >
          fammily excuse
        </button>

        <button
          onClick={funnyExcuse}
          style={{
            margin: '5px',
            padding: '10px 18px',
            backgroundColor: '#ffc107',
            color: '#333',
            border: 'none',
            borderRadius: '6px',
            cursor: 'pointer',
            fontSize: '15px'
          }}
          onMouseOver={(e) => e.target.style.backgroundColor = '#e0a800'}
          onMouseOut={(e) => e.target.style.backgroundColor = '#ffc107'}
        >
          funny excuse
        </button>
      </div>

      <h1 style={{ fontSize: '20px', color: '#444' }}>
        Your excuse is : <span style={{ fontStyle: 'italic' }}>{excuse}</span>
      </h1>
    </div>
  );
}

Conclusion:

API handling in React is like dating—send a request, hope for a good response, handle rejection gracefully. Use fetch, axios, and always wear your error-handling seatbelt.

If it's loading forever, it’s probably ghosting you. Add a spinner. Move on.

CTA:

Now that you’ve nailed APIs, let’s make your app go places.

Next up: React Router – Because Your App Deserves a GPS

Or keep pretending to debug while scrolling memes. We won’t tell.

Fetch Me If You Can