Quick Start with React - Web SDK

Set up a New React App

Generate a new application template using create-react-app:

Navigate into the new app and install the realm-web package:

cd realm-web-react-quickstart
npm install --save realm-web

Import Dependencies & Connect to Your Realm App

The Realm Web SDK contains everything you need to connect to a MongoDB Realm application from a browser application. In /src/App.js, add the following code to import the Web SDK.

import * as Realm from "realm-web";

Now uses the imported package to instantiate a new Realm.App. The app object represents your Realm app. You'll use it to authenticate and manage the users that interact with your app.

// Add your App ID
const app = new Realm.App({ id: APP_ID });

Create React Components

In /src/App.js, add the following components that display details about a given user and allow users to log in.

Create and Export the App Component

In /src/App.js, overwrite the existing App component with the following component that stores the current user in local state and conditionally renders either details about the current user or a login screen if no user is currently authenticated.

Run the App

You're now ready to connect to your Realm app and log in! Make sure you've saved your changes to /src/App.js and then run the following command from the project root:

yarn start

This starts a local web server that serves your application. If successful, you should see the following output in your shell:

Compiled successfully!
You can now view realm-quickstart-web in the browser.
  Local:  http://localhost:3000

Open http://localhost:3000 in your browser and test that you can successfully log in as an anonymous user.