28. Creating React Application & Accessing Azure Functions using React Application

Screenshot from the tutorial

Creating a React Application & Accessing Azure Functions

In this tutorial, we will walk through the process of creating a React application and accessing Azure Functions from within that application. By the end of this guide, you will have a functional React app that can communicate with Azure Functions, enabling you to build powerful serverless applications.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

• Node.js: Download and install from nodejs.org.
• npm: This comes bundled with Node.js.
• Azure Account: Create a free account at Azure.
• Visual Studio Code: Download from code.visualstudio.com.

Step 1: Setting up Your React Application

Creating the React App

To create a new React application, use the following command in your terminal:

npx create-react-app my-react-app

This command will generate a new directory called my-react-app with all the necessary files and dependencies.

Navigating to Your Project

Once the project is created, navigate into the project folder:

cd my-react-app

Starting the Development Server

To start the development server, run:

npm start

This will open your application in the default web browser at http://localhost:3000.

Step 2: Creating Azure Functions

Setting Up Azure Functions

1. Log in to the Azure Portal: Visit Azure Portal.

2. Create a Function App: Click on "Create a resource" and select "Function App".

3. Fill in the required information:

   • Subscription: Your Azure subscription.
   • Resource Group: Create a new one or use an existing resource group.
   • Function App Name: A unique name for your function.
   • Runtime Stack: Choose your preferred language (e.g., JavaScript).
   • Region: Select a region closest to you.

4. Click "Review + create" and then click the "Create" button.

Creating a Function

1. Navigate to your newly created Function App.
2. Click on "Functions" from the left menu.
3. Click on "+ Add" to create a new function.
4. Choose the "HTTP trigger" template.
5. Name your function and set the authorization level to "Anonymous" for easy testing.

Writing Function Logic

In the function editor, you can write your logic. Here’s a simple example that returns a message:

module.exports = async function (context, req) {
    context.res = {
        status: 200, /* Defaults to 200 */
        body: "Hello from Azure Functions!"
    };
};

Testing the Function

You can test your function directly in the Azure Portal by clicking "Test" and hitting the "Run" button. You should see the response in the output window.

Step 3: Accessing Azure Functions from React

Installing Axios

To make HTTP requests from your React application, we will use Axios. Install it with npm:

npm install axios

Creating an API Service

Create a new file called api.js in the src directory of your React app. This file will contain the logic to call your Azure Function:

import axios from 'axios';

const API_URL = 'YOUR_FUNCTION_URL_HERE'; // Replace with your function URL

export const fetchMessage = async () => {
    try {
        const response = await axios.get(API_URL);
        return response.data;
    } catch (error) {
        console.error('Error fetching data from Azure Function', error);
        throw error;
    }
};

Updating the React Component

Now, let's update the App.js file to call our Azure Function when the component mounts:

import React, { useEffect, useState } from 'react';
import { fetchMessage } from './api';

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        const getMessage = async () => {
            const data = await fetchMessage();
            setMessage(data);
        };

        getMessage();
    }, []);

    return (
        <div>
            <h1>Azure Function Response:</h1>
            <p>{message}</p>
        </div>
    );
}

export default App;

Step 4: Running the Application

Now that you’ve set everything up, start your React app again:

npm start

You should see the response from your Azure Function displayed on the page.

Conclusion

Congratulations! You have successfully created a React application and accessed Azure Functions from it. This basic setup allows you to build more complex serverless applications using React and Azure.

Feel free to extend the functionality of your Azure Functions and enhance your React app as you explore more features and capabilities.

For further learning, consider implementing authentication, exploring other Azure services, or deploying your application. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios