Developing Web App using React Cosmos DB - Create CosmosDB

Screenshot from the tutorial

Developing a Web App using React and Cosmos DB

In this blog post, we will explore how to develop a web application using React in conjunction with Azure Cosmos DB. Azure Cosmos DB is a globally distributed, multi-model database service that provides high availability and low latency. This tutorial will guide you through the steps to create a Cosmos DB instance and integrate it with a React application.

Prerequisites

Before we start, ensure you have the following:

• Node.js: Make sure you have Node.js installed on your machine. You can download it from Node.js Official Site.
• Azure Account: You will need an Azure account to create a Cosmos DB instance. If you don’t have one, you can sign up for a free account at Azure Free Account.
• React App: Familiarity with React and a basic React app set up.

Step 1: Create a Cosmos DB Instance

1. Log in to Azure Portal: Visit Azure Portal and log in with your account credentials.

2. Create a Cosmos DB Resource:

   • Click on Create a resource in the Azure portal.
   • Under the Databases category, select Azure Cosmos DB.
   • Choose the Core (SQL) option for the API.

3. Configure the Cosmos DB Instance:

   • Subscription: Choose your subscription.
   • Resource Group: Create a new resource group or select an existing one.
   • Account Name: Enter a unique name for your Cosmos DB account.
   • Region: Select the region where you want to host your database.
   • Click on Review + Create, and then click Create.

4. Access Keys: Once the deployment is complete, navigate to the Cosmos DB resource you created. Under the Settings section, click on Keys. You’ll need the URI and Primary Key to connect your React app to Cosmos DB.

Step 2: Set Up Your React Application

If you haven't already created a React application, you can do so using Create React App:

npx create-react-app my-cosmos-app
cd my-cosmos-app

Step 3: Install Required Packages

To interact with Cosmos DB, we will use the @azure/cosmos package. Install it with npm:

npm install @azure/cosmos

Step 4: Connect React App to Cosmos DB

Now that we have our Cosmos DB set up and our React app ready, let’s connect them.

Step 4.1: Create a Cosmos DB Client

In your React application, create a new file called CosmosClient.js and set up the Cosmos DB client.

// src/CosmosClient.js
import { CosmosClient } from "@azure/cosmos";

const endpoint = "<YOUR_COSMOS_DB_URI>";
const key = "<YOUR_COSMOS_DB_PRIMARY_KEY>";

const client = new CosmosClient({ endpoint, key });

export default client;

Step 4.2: Fetch Data from Cosmos DB

Next, create a new component that will fetch and display data from your Cosmos DB. For this example, let's create a simple component named DataDisplay.js:

// src/DataDisplay.js
import React, { useEffect, useState } from 'react';
import client from './CosmosClient';

const DataDisplay = () => {
    const [items, setItems] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const databaseId = "<YOUR_DATABASE_ID>";
            const containerId = "<YOUR_CONTAINER_ID>";
            const { resources: items } = await client
                .database(databaseId)
                .container(containerId)
                .items.readAll()
                .fetchAll();

            setItems(items);
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>Data from Cosmos DB</h1>
            <ul>
                {items.map((item) => (
                    <li key={item.id}>{JSON.stringify(item)}</li>
                ))}
            </ul>
        </div>
    );
};

export default DataDisplay;

Step 4.3: Integrate the Component

Now, integrate the DataDisplay component into your main App.js:

// src/App.js
import React from 'react';
import DataDisplay from './DataDisplay';

function App() {
    return (
        <div className="App">
            <DataDisplay />
        </div>
    );
}

export default App;

Step 5: Run Your Application

Now that everything is set up, run your React application:

npm start

Open your browser and navigate to http://localhost:3000. You should see the data fetched from your Cosmos DB displayed on the page.

Conclusion

In this tutorial, we successfully created a web application using React and Azure Cosmos DB. We went through the process of setting up a Cosmos DB instance, configuring our React app, and fetching data to display it on the frontend.

By utilizing Azure Cosmos DB with React, you can build scalable and responsive web applications that handle high volumes of data efficiently. This setup serves as a solid foundation for more complex applications, allowing you to extend functionality as needed.

Feel free to explore more features of Azure Cosmos DB and enhance your application further! If you have any questions or suggestions, please leave a comment below. 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