Docs Menu

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

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

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

1

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
2

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 });
3

/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>;
};
4

/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;
5

これで、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 アプリケーションが作成されます。