Dela via

Skapa en MongoDB-app med React och Azure Cosmos DB

  • Artikel

GÄLLER FÖR: MongoDB

Den här videobaserade självstudiekursen i flera dela demonstrerar hur du skapar en hero-spårningsapp med en React-klient. Appen använde Node och Express för servern, ansluter till Azure Cosmos DB-databasen som konfigurerats med Azure Cosmos DB:s API för MongoDB och ansluter sedan React-klientdelen till serverdelen av appen. I den här självstudiekursen lär du dig också hur du skalar Azure Cosmos DB på Azure-portalen genom att bara peka och klicka samt hur du distribuerar appen till Internet så att alla kan spåra sina heroes-favoritkomponenter.

Azure Cosmos DB stöder kompatibilitet för trådprotokoll med MongoDB, vilket gör att klienter kan använda Azure Cosmos DB i stället för MongoDB.

Den här självstudiekursen i flera delar består av följande uppgifter:

  • Introduktion
  • Konfigurera projektet
  • Skapa användargränssnittet med React
  • Skapa ett Azure Cosmos DB-konto med hjälp av Azure-portalen
  • Ansluta till Azure Cosmos DB med hjälp av Mongoose
  • Lägga till React-, Create-, Update- och Delete-åtgärder till appen

Vill du skapa den här appen med Angular? Gå den videobaserade självstudieserien för Angular.

Förutsättningar

  • Node.js
  • Ett HTTP-testverktyg
    • Vi rekommenderar Sömnlöshet, curl, Visual Studio eller Invoke-RestMethod

Det färdiga projektet

Hämta det färdiga programmet från GitHub.

Introduktion

I den här videon ger Burke Holland en introduktion av Azure Cosmos DB och går igenom appen som skapas i den här videoserien.

Projektinställningar

Den här videon visar hur du konfigurerar Express och React i samma projekt. Därefter går Burke igenom koden i projektet.

Skapa användargränssnittet

Den här videon visar hur du skapar programmets användargränssnitt (UI) med React.

Kommentar

CSS-koden som vi refererar till i den här videon finns i GitHub-databasen react-cosmosdb.

Ansluta till Azure Cosmos DB

Den här videon visar hur du skapar ett nytt Azure Cosmos DB-konto på Azure-portalen och hur du installerar MongoDB- och Mongoose-paketen och sedan ansluter appen till det nya kontot med hjälp av Azure Cosmos DB-anslutningssträngen.

Läsa och skapa heroes-komponenter i appen

Den här videon visar hur du läser hjältar och skapar hjältar i Azure Cosmos DB-databasen, samt hur du testar dessa metoder med hjälp av ett HTTP-testverktyg och React-användargränssnittet.

Ta bort och uppdatera heroes-komponenter i appen

Den här videon visar hur du tar bort och uppdaterar heroes-komponenter från appen och hur du visar uppdateringarna i användargränssnittet.

Slutföra appen

Den här videon visar hur du slutför appen och hur du kopplar användargränssnittet till API:et för serverdelen.

Rensa resurser

Om du inte planerar att använda den här appen mer följer du stegen nedan för att ta bort alla resurser som du har skapat i den här självstudiekursen på Azure-portalen.

  1. Klicka på Resursgrupper på den vänstra menyn i Azure Portal och sedan på namnet på den resurs du skapade.
  2. På sidan med resursgrupper klickar du på Ta bort, skriver in namnet på resursen att ta bort i textrutan och klickar sedan på Ta bort.

Nästa steg

I den här självstudiekursen har du lärt dig att:

  • Skapa en app med React, Node, Express och Azure Cosmos DB
  • Skapa ett Azure Cosmos DB-konto
  • Ansluta appen till Azure Cosmos DB-kontot
  • Testa appen med hjälp av ett HTTP-testverktyg
  • Köra programmet och lägga till heroes-komponenter i databasen

Fortsätt med nästa självstudiekurs och lär dig hur du importerar MongoDB-data till Azure Cosmos DB.

Importera MongoDB-data till Azure Cosmos DB

Försöker du planera kapacitet för en migrering till Azure Cosmos DB? Du kan använda information om ditt befintliga databaskluster för kapacitetsplanering.