快速入门 React — Web SDK
Atlas Device SDK 已弃用。 有关详细信息,请参阅弃用页面。
本指南向您展示如何设置基本的 React Web 应用程序,以连接到 Atlas App Services 后端并对匿名用户进行身份验证。
我们在 CodeSandbox 上整理了此快速入门的完成版本。您所要做的就是粘贴 Realm 应用程序 ID 以连接到应用程序。
先决条件
如需创建并运行此应用程序,您需要在机器上安装 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
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 后端并对匿名用户进行身份验证。