Creare un'app MongoDB con React e Azure Cosmos DBCreate a MongoDB app with React and Azure Cosmos DB

Questa esercitazione video in più parti illustra come creare un'app di verifica hero con un front-end React.This multi-part video tutorial demonstrates how to create a hero tracking app with a React front-end. L'app usa Node ed Express per il server, si connette al database Cosmos con configurato con l'API di Azure Cosmos DB per MongoDB e quindi connette il front-end React alla parte server dell'app.The app used Node and Express for the server, connects to Cosmos database configured with the Azure Cosmos DB's API for MongoDB, and then connects the React front-end to the server portion of the app. L'esercitazione illustra anche come puntare e fare clic per eseguire il ridimensionamento di Cosmos DB nel portale di Azure e come distribuire l'app in Internet in modo che ognuna possa tenere traccia degli elementi hero preferiti.The tutorial also demonstrates how to do point-and-click scaling of Cosmos DB in the Azure portal and how to deploy the app to the internet so everyone can track their favorite heroes.

Azure Cosmos DB supporta la compatibilità con il protocollo di collegamento con MongoDB, consentendo ai client di usare Azure Cosmos DB invece di MongoDB.Azure Cosmos DB supports wire protocol compatibility with MongoDB, enabling clients to use Azure Cosmos DB in place of MongoDB.

Questa esercitazione in più parti illustra le attività seguenti:This multi-part tutorial covers the following tasks:

  • IntroduzioneIntroduction
  • Configurare il progettoSetup the project
  • Compilare l'interfaccia utente con ReactBuild the UI with React
  • Creare un account Azure Cosmos DB mediante il portale di AzureCreate an Azure Cosmos DB account using the Azure portal
  • Usare Mongoose per connettersi ad Azure Cosmos DBUse Mongoose to connect to Azure Cosmos DB
  • Aggiungere le operazioni React, Create, Update e Delete all'appAdd React, Create, Update, and Delete operations to the app

Per compilare questa stessa app con Angular,Want to do build this same app with Angular? vedere la serie di video di esercitazione su Angular.See the Angular tutorial video series.

PrerequisitiPrerequisites

Progetto finitoFinished Project

Ottenere l'applicazione completata da GitHub.Get the completed application from GitHub.

IntroduzioneIntroduction

In questo video Burke Holland presenta Azure Cosmos DB e illustra l'app creata in questa serie di video.In this video, Burke Holland gives an introduction to Azure Cosmos DB and walks you through the app that is created in this video series.

Configurazione del progettoProject setup

Questo video illustra come configurare Express e React nello stesso progetto.This video shows how set up the Express and React in the same project. Burke illustra quindi una procedura dettagliata sul codice nel progetto.Burke then provides a walkthrough of the code in the project.

Creare l'interfaccia utenteBuild the UI

Questo video illustra come creare l'interfaccia utente dell'applicazione con React.This video shows how to create the application's user interface (UI) with React.

Nota

Il foglio di stile CSS a cui si fa riferimento in questo video è disponibile nel repository di GitHub react-cosmosdb.The CSS referenced in this video can be found in the react-cosmosdb GitHub repo.

Connettersi ad Azure Cosmos DBConnect to Azure Cosmos DB

Questo video illustra come creare un account Azure Cosmos DB nel portale di Azure, installare i pacchetti MongoDB e Mongoose e quindi connettere l'app al nuovo account creato usando la stringa di connessione Azure Cosmos DB.This video shows how to create an Azure Cosmos DB account in the Azure portal, install the MongoDB and Mongoose packages, and then connect the app to the newly created account using the Azure Cosmos DB connection string.

Leggere e creare hero nell'appRead and create heroes in the app

Questo video illustra come leggere e creare hero nel database di Cosmos e come testare tali metodi usando Postman e l'interfaccia utente di React.This video shows how to read heroes and create heroes in the Cosmos database, as well as how to test those methods using Postman and the React UI.

Eliminare e aggiornare hero nell'appDelete and update heroes in the app

Questo video illustra come eliminare e aggiornare hero dall'app e visualizzare gli aggiornamenti nell'interfaccia utente.This video shows how to delete and update heroes from the app and display the updates in the UI.

Completare l'appComplete the app

Questo video illustra come completare l'app e finire di collegare l'interfaccia utente all'API back-end.This video shows how to complete the app and finish hooking the UI up to the backend API.

Pulire le risorseClean up resources

Se non si prevede di continuare a usare questa app, seguire questa procedura per eliminare tutte le risorse create da questa esercitazione nel portale di Azure.If you're not going to continue to use this app, use the following steps to delete all resources created by this tutorial in the Azure portal.

  1. Scegliere Gruppi di risorse dal menu a sinistra del portale di Azure e quindi fare clic sul nome della risorsa creata.From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you created.
  2. Nella pagina del gruppo di risorse fare clic su Elimina, digitare il nome della risorsa da eliminare nella casella di testo e quindi fare clic su Elimina.On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.

Passaggi successiviNext steps

In questa esercitazione si è appreso come:In this tutorial, you've learned how to:

  • Creare un'app con React, Node, Express e Azure Cosmos DBCreate an app with React, Node, Express, and Azure Cosmos DB
  • Creare un account Azure Cosmos DBCreate an Azure Cosmos DB account
  • Connettere l'app all'account Azure Cosmos DBConnect the app to the Azure Cosmos DB account
  • Testare l'app usando PostmanTest the app using Postman
  • Eseguire l'applicazione e aggiungere hero al databaseRun the application and add heroes to the database

È possibile passare all'esercitazione successiva per ottenere informazioni su come importare i dati di MongoDB in Azure Cosmos DB.You can proceed to the next tutorial and learn how to import MongoDB data into Azure Cosmos DB.