How do I integrate an API in a React TypeScript application?

How do I integrate an API in a React TypeScript application?

To integrate an API in a React TypeScript app, you can use the Fetch API or Axios. First, install Axios if you choose to use it.

What are the steps to set up Axios in my project?

1. Install Axios using npm: npm install axios. 2. Import Axios in your component: import axios from 'axios';. 3. Use it to make API calls in your component's lifecycle methods or hooks.

Can you show me an example of making a GET request?

Sure! Here's a simple example:

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

const MyComponent: React.FC = () => {
    const [data, setData] = useState(null);

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

    return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

This will fetch data from the API and display it.