How to Integrate REST APIs with Frontend Frameworks

Introduction to REST API Integration

REST (Representational State Transfer) APIs are essential for enabling communication between different software applications. Integrating a REST API with a frontend framework allows developers to create dynamic, data-driven applications. This article focuses on practical examples using React and Vue.js to help you understand the integration process.

Example 1: Integrating REST API with React

In this example, we’ll create a simple React application that fetches data from a public API and displays it in a list format.

Step 1: Set Up Your React App

Use Create React App to set up your project:

npx create-react-app my-api-app
cd my-api-app

Step 2: Install Axios

We’ll use Axios to make our API requests. Install it via npm:

npm install axios

Step 3: Fetch Data from the API

In your src/App.js, modify the code as follows:

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

function App() {
  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('Error fetching data:', error));
  }, []);

  if (loading) return <p>Loading...</p>;

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

export default App;

Explanation:

• useEffect: Fetches data on component mount.
• Axios: Makes an API call to fetch posts from a placeholder API.
• State Management: data holds the fetched posts, while loading manages the loading state.

Example 2: Integrating REST API with Vue.js

Next, let’s create a similar application using Vue.js that fetches user data from an API.

Step 1: Set Up Your Vue App

Use Vue CLI to create your Vue project:

vue create my-vue-api-app
cd my-vue-api-app

Step 2: Install Axios

Just like in the React example, we’ll use Axios:

npm install axios

Step 3: Fetch Data from the API

In your src/components/HelloWorld.vue, replace the template with:
```html