Docs 菜单
Docs 主页
/
MongoDB Atlas
/
Atlas Device SDKs

快速入门 React — Web SDK

本指南向您展示如何设置基本的 React Web 应用程序，以连接到 Atlas App Services 后端并对匿名用户进行身份验证。

我们在 CodeSandbox 上整理了此快速入门的完成版本。您所要做的就是粘贴 Realm 应用程序 ID 以连接到应用程序。

  • JavaScript CodeSandbox

  • TypeScript CodeSandbox

先决条件

  • 本指南假设您已创建 Atlas App Services 后端并已启用匿名身份验证。

  • 如需创建并运行此应用程序，您需要在机器上安装 npm。

  • create-react-app 文档建议您安装 npx 运行create-react-app ，而不是使用计算机上已安装的版本。

步骤

1

设置新的 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
2

导入依赖项并连接到您的 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 });
3

创建 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>;
};
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 并测试您是否可以以匿名用户身份成功登录。

总结

如果您已成功完成本指南，则您已创建 React 应用程序，可以连接到 App Services 后端并对匿名用户进行身份验证。

来年

欢迎使用 Atlas Device SDK 文档