React でクイックスタート - Web SDK

Atlas Device SDK は非推奨です。詳細については、の廃止ページを参照してください。

このガイドでは、Atlas App Services バックエンドに接続し、匿名ユーザーを認証する基本的な React Web アプリケーションを設定する方法について説明します。

CodeSandbox 上のこのクイックスタートの完成バージョンをまとめました。アプリに接続するには、Realm アプリ ID を貼り付けるだけです。

前提条件

このガイドでは、Atlas App Services バックエンドをすでに作成し、匿名認証を有効にしていることを前提としています。
このアプリケーションを作成して実行するには npm が必要ですマシンにインストールされている。
create-react-app ドキュメントでは npm をインストールすることを推奨していますcreate-react-app マシンにインストールされているバージョンを使用するのではなく、を実行するようにします。

手順

新しい React アプリを設定する

create-react-app を使用して新しいアプリケーションテンプレートを生成します。

npx create-react-app realm-web-react-quickstart

npx create-react-app realm-web-react-quickstart --template=typescript

新しいアプリに移動し、 realm-webパッケージをインストールします。

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

依存関係をインポートして Realm アプリに接続

Realm Web SDK には、ブラウザアプリケーションから MongoDB Realm アプリケーションに接続するために必要なものがすべて含まれています。 /src/App.jsでは、Web SDK をインポートするための次のコードを追加します。

import * as Realm from "realm-web";

インポートされたパッケージを使用して新しいRealm.Appをインスタンス化するようになりました。 appオブジェクトは Realm アプリを表します。この値を使用して、アプリを操作するユーザーの認証と管理を行います。

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

React コンポーネントの作成

/src/App.jsでは、特定のユーザーに関する詳細を表示し、ユーザーがログインできるようにする次のコンポーネントを追加します。

// Create a component that displays the given user's details
function UserDetail({ user }) {
  return (
    <div>
      <h1>Logged in with anonymous id: {user.id}</h1>
    </div>
  );
}
// Create a component that lets an anonymous user log in
function Login({ setUser }) {
  const loginAnonymous = async () => {
    const user = await app.logIn(Realm.Credentials.anonymous());
    setUser(user);
  };
  return <button onClick={loginAnonymous}>Log In</button>;
}

// Create a component that displays the given user's details
const UserDetail = ({ user }: { user: Realm.User }) => {
  return (
    <div>
      <h1>Logged in with anonymous id: {user.id}</h1>
    </div>
  );
};
// Create a component that lets an anonymous user log in
type LoginProps = {
  setUser: (user: Realm.User) => void;
};
const Login = ({ setUser }: LoginProps) => {
  const loginAnonymous = async () => {
    const user: Realm.User = await app.logIn(Realm.Credentials.anonymous());
    setUser(user);
  };
  return <button onClick={loginAnonymous}>Log In</button>;
};

アプリコンポーネントの作成とエクスポート

/src/App.jsでは、現在のユーザーをローカル状態に保存し、現在のユーザーに関する詳細またはユーザーが現在認証されていない場合はログイン画面のいずれかを条件付きでレンダリングする次のコンポーネントで既存のAppコンポーネントを上書きします。

const App = () => {
  // Keep the logged in Realm user in local state. This lets the app re-render
  // whenever the current user changes (e.g. logs in or logs out).
  const [user, setUser] = React.useState(app.currentUser);
  // If a user is logged in, show their details.
  // Otherwise, show the login screen.
  return (
    <div className="App">
      <div className="App-header">
        {user ? <UserDetail user={user} /> : <Login setUser={setUser} />}
      </div>
    </div>
  );
};
export default App;

const App = () => {
  // Keep the logged in Realm user in local state. This lets the app re-render
  // whenever the current user changes (e.g. logs in or logs out).
  const [user, setUser] = React.useState<Realm.User | null>(app.currentUser);
  // If a user is logged in, show their details. Otherwise, show the login screen.
  return (
    <div className="App">
      <div className="App-header">
        {user ? <UserDetail user={user} /> : <Login setUser={setUser} />}
      </div>
    </div>
  );
};
export default App;

アプリを実行する

これで、Realm アプリに接続してログインする準備が整いました。変更を/src/App.jsに保存していることを確認し、プロジェクトルートから次のコマンドを実行します。

yarn start

これにより、アプリケーションを提供するローカルウェブサーバーが起動します。成功した場合、shell に次の出力が表示されます。

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

http://localhost: を3000 開きますブラウザに表示され、匿名ユーザーとして正常にログインできるかどうかをテストします。

概要

このガイドを正常に完了すると、App Services バックエンドに接続し、匿名ユーザーを認証できる React アプリケーションが作成されます。

Atlas Device SDK Docsへようこそ