React でクイック スタート - Web 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 アプリケーションが作成されます。