Skip to content

microsoftgraph/msgraph-sample-reactspa

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
page_type description products languages
sample
This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React browser apps.
ms-graph
microsoft-graph-calendar-api
office-exchange-online
typescript
nodejs

Microsoft Graph sample React single-page app

This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React browser apps.

Prerequisites

Before you start this tutorial, you should have Node.js and Yarn installed on your development machine. If you do not have Node.js or Yarn, visit the previous links for download options.

You should also have either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account. If you don't have a Microsoft account, there are a couple of options to get a free account:

Register a web application with the Azure Active Directory admin center

  1. Open a browser and navigate to the Azure Active Directory admin center. Login using a personal account (aka: Microsoft Account) or Work or School Account.

  2. Select Azure Active Directory in the left-hand navigation, then select App registrations under Manage.

    Note: Azure AD B2C users may only see App registrations (legacy). In this case, please go directly to https://aka.ms/appregistrations.

  3. Select New registration. On the Register an application page, set the values as follows.

    • Set Name to React Graph Tutorial.
    • Set Supported account types to Accounts in any organizational directory and personal Microsoft accounts.
    • Under Redirect URI, set the first drop-down to Single-page application (SPA) and set the value to http://localhost:3000.
  4. Choose Register. On the React Graph Tutorial page, copy the value of the Application (client) ID and save it, you will need it in the next step.

Configure the sample

  1. Rename the ./graph-tutorial/src/Config.example.ts file to ./graph-tutorial/src/Config.ts.

  2. Edit the ./graph-tutorial/src/Config.ts file and make the following changes.

    1. Replace YOUR_APP_ID_HERE with the Application Id you got from the App Registration Portal.
  3. In your command-line interface (CLI), navigate to the graph-tutorial directory and run the following command to install requirements.

    yarn install

Run the sample

  1. Run the following command in your CLI to start the application.

    yarn start
  2. Open a browser and browse to http://localhost:3000.

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

About

This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from React browser apps.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published