Creare un'app MongoDB con React e Azure Cosmos DB
SI APPLICA A: MongoDB
Questa esercitazione video in più parti illustra come creare un'app di verifica hero con un front-end React. L'app usa Node ed Express per il server, si connette al database Azure Cosmos DB con configurato con l'API di Azure Cosmos DB for MongoDB e quindi connette il front-end React alla parte server dell'app. L'esercitazione illustra anche come puntare e fare clic per eseguire il ridimensionamento di Azure Cosmos DB nel portale di Azure e come distribuire l'app in Internet in modo che ognuna possa tenere traccia degli elementi hero preferiti.
Azure Cosmos DB supporta la compatibilità con il protocollo di collegamento con MongoDB, consentendo ai client di usare Azure Cosmos DB invece di MongoDB.
Questa esercitazione in più parti illustra le attività seguenti:
- Introduzione
- Configurare il progetto
- Compilare l'interfaccia utente con React
- Creare un account Azure Cosmos DB mediante il portale di Azure
- Usare Mongoose per connettersi ad Azure Cosmos DB
- Aggiungere le operazioni React, Create, Update e Delete all'app
Per compilare questa stessa app con Angular, vedere la serie di video di esercitazione su Angular.
Prerequisiti
Progetto finito
Ottenere l'applicazione completata da GitHub.
Introduzione
In questo video Burke Holland presenta Azure Cosmos DB e illustra l'app creata in questa serie di video.
Impostazione progetto
Questo video illustra come configurare Express e React nello stesso progetto. Burke illustra quindi una procedura dettagliata sul codice nel progetto.
Creare l'interfaccia utente
Questo video illustra come creare l'interfaccia utente dell'applicazione con React.
Nota
Il foglio di stile CSS a cui si fa riferimento in questo video è disponibile nel repository di GitHub react-cosmosdb.
Connettersi ad 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.
Leggere e creare hero nell'app
Questo video illustra come leggere hero e creare hero nel database di Azure Cosmos DB e come testare tali metodi usando Postman e l'interfaccia utente di React.
Eliminare e aggiornare hero nell'app
Questo video illustra come eliminare e aggiornare hero dall'app e visualizzare gli aggiornamenti nell'interfaccia utente.
Completare l'app
Questo video illustra come completare l'app e finire di collegare l'interfaccia utente all'API back-end.
Pulire le risorse
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.
- Scegliere Gruppi di risorse dal menu a sinistra del portale di Azure e quindi fare clic sul nome della risorsa creata.
- 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.
Passaggi successivi
In questa esercitazione si è appreso come:
- Creare un'app con React, Node, Express e Azure Cosmos DB
- Creare un account Azure Cosmos DB
- Connettere l'app all'account Azure Cosmos DB
- Testare l'app usando Postman
- Eseguire l'applicazione e aggiungere hero al database
È possibile passare all'esercitazione successiva per ottenere informazioni su come importare i dati di MongoDB in Azure Cosmos DB.
Si sta tentando di pianificare la capacità per una migrazione ad Azure Cosmos DB? È possibile usare le informazioni del cluster di database esistente per la pianificazione della capacità.
- Se si conosce solo il numero di vcore e server nel cluster di database esistente, leggere le informazioni sulla stima delle unità richieste usando vCore o vCPU
- Se si conosce la frequenza delle richieste tipiche per il carico di lavoro corrente del database, leggere le informazioni sulla stima delle unità richieste con lo strumento di pianificazione della capacità di Azure Cosmos DB
Commenti e suggerimenti
https://aka.ms/ContentUserFeedback.
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedereInvia e visualizza il feedback per