Docs 菜单
Docs 主页
/ /
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

使用 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.Appapp 对象代表您的 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 并测试您是否可以以匿名用户身份成功登录。

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

来年

欢迎使用 Atlas Device SDK 文档