Een MongoDB-app maken met React en Azure Cosmos DBCreate a MongoDB app with React and Azure Cosmos DB

In deze meerdelige zelfstudie op video wordt gedemonstreerd hoe u een app voor het volgen van hero's maakt met een React-frontend.This multi-part video tutorial demonstrates how to create a hero tracking app with a React front-end. De app gebruikt Node en Express voor de server, maakt verbinding met de Cosmos-database die is geconfigureerd met de API voor MongoDB van Azure Cosmos DB, en verbindt vervolgens de React-frontend met het servergedeelte van de 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. In deze zelfstudie wordt ook gedemonstreerd hoe u met aanwijzen en klikken schaling van Cosmos DB uitvoert in de Azure-portal en hoe u de app implementeert op internet, zodat gebruikers hun favoriete hero's kunnen volgen.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 biedt ondersteuning voor compatibiliteit van wire-protocol met MongoDB, wat clients in staat stelt om Azure Cosmos DB te gebruiken in plaats van MongoDB.Azure Cosmos DB supports wire protocol compatibility with MongoDB, enabling clients to use Azure Cosmos DB in place of MongoDB.

Deze meerdelige zelfstudie behandelt de volgende taken:This multi-part tutorial covers the following tasks:

  • InleidingIntroduction
  • Het project instellenSetup the project
  • De gebruikersinterface bouwen met ReactBuild the UI with React
  • Een Azure Cosmos DB-account maken in Azure PortalCreate an Azure Cosmos DB account using the Azure portal
  • Mongoose gebruiken om verbinding te maken met Azure Cosmos DBUse Mongoose to connect to Azure Cosmos DB
  • De bewerkingen React, Create, Update en Delete aan de app toevoegenAdd React, Create, Update, and Delete operations to the app

Wilt u dezelfde app bouwen met Angular?Want to do build this same app with Angular? Zie de videoserie met zelfstudies van Angular.See the Angular tutorial video series.

VereistenPrerequisites

Voltooid projectFinished Project

Download de voltooide app op GitHub.Get the completed application from GitHub.

InleidingIntroduction

In deze video geeft Burke Holland een inleiding tot Azure Cosmos DB en wordt u door de app begeleid die in deze videoserie wordt gemaakt.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.

Instellen van het projectProject setup

In deze video ziet u hoe u Express en React in hetzelfde project instelt.This video shows how set up the Express and React in the same project. Burke geeft u vervolgens een kijkje in de code van het project.Burke then provides a walkthrough of the code in the project.

De gebruikersinterface bouwenBuild the UI

In deze video ziet u hoe u de gebruikersinterface van de app maakt met React.This video shows how to create the application's user interface (UI) with React.

Notitie

De CSS waarnaar in deze video wordt verwezen, kunt u vinden in de react-cosmosdb GitHub-opslagplaats.The CSS referenced in this video can be found in the react-cosmosdb GitHub repo.

Verbinding maken met Azure Cosmos DBConnect to Azure Cosmos DB

In deze video ziet u hoe u een Azure Cosmos DB-account maakt in Azure Portal, de MongoDB- en Mongoose-pakketten installeert, en vervolgens de app verbinding laat maken met het nieuwe account met behulp van de Azure Cosmos DB-verbindingsreeks.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.

Hero's in de app lezen en makenRead and create heroes in the app

In deze video ziet u hoe u hero's leest en hero's maakt in de Cosmos DB-database, en hoe u deze methoden test in Postman en de React-gebruikersinterface.This video shows how to read heroes and create heroes in the Cosmos DB database, as well as how to test those methods using Postman and the React UI.

Hero's in de app bijwerken en uit de app verwijderenDelete and update heroes in the app

In deze video ziet u hoe u hero's uit de app verwijdert en in de app bijwerkt en de updates in de gebruikersinterface kunt weergeven.This video shows how to delete and update heroes from the app and display the updates in the UI.

De app voltooienComplete the app

In deze video ziet u hoe u de app voltooit en de gebruikersinterface ten slotte verbindt met de backend-API.This video shows how to complete the app and finish hooking the UI up to the backend API.

Resources opschonenClean up resources

Als u deze app verder niet gaat gebruiken, kunt u met de volgende stappen alle resources verwijderen die met deze zelfstudies in Azure Portal zijn gemaakt.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. Klik in het menu aan de linkerkant in Azure Portal op Resourcegroepen en klik vervolgens op de resource die u hebt gemaakt.From the left-hand menu in the Azure portal, click Resource groups and then click the name of the resource you created.
  2. Klik op de pagina van uw resourcegroep op Verwijderen, typ de naam van de resource die u wilt verwijderen in het tekstvak en klik vervolgens op Verwijderen.On your resource group page, click Delete, type the name of the resource to delete in the text box, and then click Delete.

Volgende stappenNext steps

In deze zelfstudie hebt u het volgende geleerd:In this tutorial, you've learned how to:

  • Een app maken met React, Node, Express en Azure Cosmos DBCreate an app with React, Node, Express, and Azure Cosmos DB
  • Maak een Azure Cosmos DB-accountCreate an Azure Cosmos DB account
  • De app verbinding laten maken met het Azure Cosmos DB-accountConnect the app to the Azure Cosmos DB account
  • De app testen in PostmanTest the app using Postman
  • De app uitvoeren en hero's toevoegen aan de databaseRun the application and add heroes to the database

U kunt doorgaan met de volgende zelfstudie om te leren hoe u MongoDB-gegevens in Azure Cosmos DB importeert.You can proceed to the next tutorial and learn how to import MongoDB data into Azure Cosmos DB.