Developing Web App using React Cosmos DB - Custom Service and creating Component

Screenshot from the tutorial

Developing a Web App using React and Cosmos DB: A Step-by-Step Guide

In the ever-evolving landscape of web development, React remains a popular choice for building dynamic user interfaces. Coupled with Azure Cosmos DB, a globally distributed, multi-model database service, developers can create robust applications capable of handling a variety of data types. In this blog post, we’ll walk through the process of developing a web application using React and Azure Cosmos DB, emphasizing the creation of a custom service and building components.

Prerequisites

Before we dive into the development process, ensure you have the following prerequisites:

• Basic knowledge of JavaScript and React.
• Node.js and npm (Node Package Manager) installed on your machine.
• An Azure account to create a Cosmos DB instance.

Setting Up Your Project

Step 1: Create a New React App

To kick off our project, we’ll create a new React application using Create React App. Open your terminal and run:

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

This command sets up a new React project with all the necessary configurations.

Step 2: Install Axios for API Calls

To interact with our Cosmos DB, we will use Axios, a promise-based HTTP client for the browser and Node.js. Install it using npm:

npm install axios

Setting Up Azure Cosmos DB

Step 3: Create a Cosmos DB Instance

1. Log in to the Azure Portal.
2. Click on Create a resource and search for "Azure Cosmos DB".
3. Select Azure Cosmos DB, and choose the API that best fits your application (for this tutorial, we will use the SQL API).
4. Fill out the necessary fields and click Create.

Step 4: Create a Database and Container

Once your Cosmos DB instance is set up:

1. Navigate to your Cosmos DB account.
2. Under Data Explorer, click on New Database.
3. Name your database and create a container with a unique partition key.

Developing a Custom Service

Step 5: Create a Service to Interact with Cosmos DB

Now that our database is set up, we need to create a service in our React app to handle API requests to Cosmos DB. Create a new folder called services in the src directory, and create a file named cosmosService.js.

Here’s a basic service to get you started:

// src/services/cosmosService.js
import axios from 'axios';

const BASE_URL = 'https://<your-cosmos-db-account>.documents.azure.com:443/dbs/<your-database>/colls/<your-collection>/docs';

const cosmosService = {
    async getItems() {
        const response = await axios.get(BASE_URL, {
            headers: {
                // Add your authentication headers here
            },
        });
        return response.data;
    },
    async addItem(item) {
        const response = await axios.post(BASE_URL, item, {
            headers: {
                // Add your authentication headers here
            },
        });
        return response.data;
    },
};

export default cosmosService;

Step 6: Add Authentication Headers

To secure your Cosmos DB interactions, you need to add authentication headers. This typically involves using a master key or token from your Azure Cosmos DB account. Be sure to update the headers in your Axios requests accordingly.

Building React Components

Step 7: Create a Component to Display Data

Next, we’ll create a simple React component to display data fetched from Cosmos DB. Create a new file named ItemList.js in the src/components directory.

// src/components/ItemList.js
import React, { useEffect, useState } from 'react';
import cosmosService from '../services/cosmosService';

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

    useEffect(() => {
        const fetchData = async () => {
            const data = await cosmosService.getItems();
            setItems(data);
        };
        fetchData();
    }, []);

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

export default ItemList;

Step 8: Integrate the Component into Your App

Finally, import and use the ItemList component in your main App.js file.

// src/App.js
import React from 'react';
import './App.css';
import ItemList from './components/ItemList';

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

export default App;

Conclusion

You've successfully created a basic web application using React and Azure Cosmos DB! This tutorial covered the essential steps, from setting up your React app and Cosmos DB instance to building a custom service and creating components.

Next Steps

• Explore additional CRUD operations (Create, Read, Update, Delete) in your cosmosService.
• Implement error handling and loading states in your components.
• Consider adding more interactive features, such as forms for adding new items.

With these foundational steps, you’re well on your way to mastering web app development with React and Azure Cosmos DB. 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