Developing Web App using React Cosmos DB - Custom Model and understanding Workflow

Screenshot from the tutorial

Developing a Web App using React and Cosmos DB: Custom Model and Workflow Understanding

Creating a web application can seem daunting, especially when integrating technologies such as React and Azure Cosmos DB. This tutorial will guide you through the process of developing a web app, focusing on creating a custom model and understanding the workflow. In this post, we’ll cover the essentials of setting up your environment, building your React app, and connecting it to Cosmos DB.

Table of Contents

• Prerequisites
• Setting Up Your Environment
• Creating a Custom Model
• Understanding the Workflow
• Conclusion

Prerequisites

Before diving into the development process, ensure you have the following installed:

• Node.js: This will allow you to run JavaScript on your server. Download it from here.
• npm: This comes bundled with Node.js and helps manage packages.
• Azure Account: Sign up for an Azure account if you don’t have one. You can get started with a free tier.
• Basic understanding of React and JavaScript: Familiarity with these languages will help you navigate through this tutorial smoothly.

Setting Up Your Environment

1. Create a New React App: Open your terminal and run the following command to create a new React application:

   npx create-react-app my-web-app
   cd my-web-app
   

2. Install Necessary Packages: You’ll need to install packages to interact with Cosmos DB. Now, install the Azure Cosmos DB SDK:

   npm install @azure/cosmos
   

3. Create Your Azure Cosmos DB Account:

   • Log in to your Azure portal.
   • Navigate to "Create a resource" → "Databases" → "Azure Cosmos DB."
   • Select the API you wish to use; for this tutorial, choose "Core (SQL)."
   • Fill out the necessary details and click "Create."

4. Get Connection String: After creating your Cosmos DB account, go to the "Keys" section to find your connection string. You will need this to connect your React app to the database.

Creating a Custom Model

In any application, defining a clear data model is crucial. For our example, let’s create a simple model for storing user data.

1. Define the User Model: Create a new file in your React project, e.g., UserModel.js, and define your model:

   class User {
       constructor(id, name, email) {
           this.id = id;
           this.name = name;
           this.email = email;
       }
   }
   
   export default User;
   

2. Connecting to Cosmos DB: In your main application file (e.g., App.js), set up the connection to Cosmos DB:

   import { CosmosClient } from '@azure/cosmos';
   
   const endpoint = "YOUR_COSMOS_DB_ENDPOINT";
   const key = "YOUR_COSMOS_DB_KEY";
   const client = new CosmosClient({ endpoint, key });
   
   async function getUsers() {
       const { resources: users } = await client.database('YourDatabaseName')
           .container('YourContainerName')
           .items.readAll()
           .fetchAll();
       return users;
   }
   

Replace YOUR_COSMOS_DB_ENDPOINT and YOUR_COSMOS_DB_KEY with your actual credentials.

Understanding the Workflow

Understanding the workflow is essential for seamless data interaction between your React app and Cosmos DB. Here’s a simplified workflow:

1. Data Fetching: Use the getUsers function defined above to fetch user data when the component mounts. You can do this using the useEffect hook:

   import React, { useEffect, useState } from 'react';
   import User from './UserModel';
   
   function App() {
       const [users, setUsers] = useState([]);
   
       useEffect(() => {
           const fetchData = async () => {
               const fetchedUsers = await getUsers();
               setUsers(fetchedUsers);
           };
           fetchData();
       }, []);
   
       return (
           <div>
               <h1>User List</h1>
               <ul>
                   {users.map(user => (
                       <li key={user.id}>{user.name} - {user.email}</li>
                   ))}
               </ul>
           </div>
       );
   }
   
   export default App;
   

2. Data Display: The fetched data is stored in the users state and displayed in a list format.

3. Data Manipulation: To add or update user data, you can create functions that interact with Cosmos DB using the SDK methods such as container.items.create or container.item(id).replace.

Conclusion

In this tutorial, we explored how to develop a web application using React and Azure Cosmos DB. We set up our environment, created a custom data model, and understood the workflow for fetching and displaying data. This foundational knowledge can be expanded upon to create more complex applications.

As you continue your development journey, consider exploring more advanced Cosmos DB features such as indexing, stored procedures, and triggers to enhance the functionality of 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