Een MongoDB-app maken met React en Azure Cosmos DB

  • Artikel

VAN TOEPASSING OP: MongoDB

In deze meerdelige zelfstudie op video wordt gedemonstreerd hoe u een app voor het volgen van hero's maakt met een React-frontend. De app heeft Node en Express gebruikt voor de server, maakt verbinding met de Azure Cosmos DB-database die is geconfigureerd met de Azure Cosmos DB-API voor MongoDB en verbindt vervolgens de React front-end met het servergedeelte van de app. In deze zelfstudie wordt ook gedemonstreerd hoe u met aanwijzen en klikken schaling uitvoert van Azure Cosmos DB in Azure Portal en hoe u de app implementeert met internet, zodat gebruikers hun favoriete hero's kunnen volgen.

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.

Deze meerdelige zelfstudie behandelt de volgende taken:

  • Inleiding
  • Het project instellen
  • De gebruikersinterface bouwen met React
  • Een Azure Cosmos DB-account maken in Azure Portal
  • Mongoose gebruiken om verbinding te maken met Azure Cosmos DB
  • De bewerkingen React, Create, Update en Delete aan de app toevoegen

Wilt u dezelfde app bouwen met Angular? Zie de videoserie met zelfstudies van Angular.

Vereisten

Voltooid project

Download de voltooide app op GitHub.

Inleiding

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.

Instellen van het project

In deze video ziet u hoe u Express en React in hetzelfde project instelt. Burke geeft u vervolgens een kijkje in de code van het project.

De gebruikersinterface bouwen

In deze video ziet u hoe u de gebruikersinterface van de app maakt met React.

Notitie

De CSS waarnaar in deze video wordt verwezen, kunt u vinden in de react-cosmosdb GitHub-opslagplaats.

Verbinding maken met 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.

Hero's in de app lezen en maken

In deze video ziet u hoe u hero's kunt lezen en hero's kunt maken in de Azure Cosmos DB-database, en hoe u deze methoden kunt testen met behulp van Postman en de gebruikersinterface van React.

Hero's in de app bijwerken en uit de app verwijderen

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.

De app voltooien

In deze video ziet u hoe u de app voltooit en de gebruikersinterface ten slotte verbindt met de backend-API.

Resources opschonen

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.

  1. Klik in het menu aan de linkerkant in Azure Portal op Resourcegroepen en klik vervolgens op de resource die u hebt gemaakt.
  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.

Volgende stappen

In deze zelfstudie hebt u het volgende geleerd:

  • Een app maken met React, Node, Express en Azure Cosmos DB
  • Maak een Azure Cosmos DB-account
  • De app verbinding laten maken met het Azure Cosmos DB-account
  • De app testen in Postman
  • De app uitvoeren en hero's toevoegen aan de database

U kunt doorgaan met de volgende zelfstudie om te leren hoe u MongoDB-gegevens in Azure Cosmos DB importeert.

MongoDB-gegevens importeren in Azure Cosmos DB

Wilt u capaciteitsplanning uitvoeren voor een migratie naar Azure Cosmos DB? U kunt informatie over uw bestaande databasecluster gebruiken voor capaciteitsplanning.