Inicio rápido con React - SDK web

Los SDK de dispositivos Atlas están obsoletos. Consulte Página de desuso para más detalles.

Esta guía le muestra cómo configurar una aplicación web React básica que se conecta a su backend de Atlas App Services y autentica a un usuario anónimo.

Hemos creado una versión final de esta guía de inicio rápido en CodeSandbox. Solo tienes que pegar el ID de tu aplicación Realm para conectarte a ella.

Requisitos previos

Esta guía asume que ya ha creado un backend de Atlas App Services y ha habilitado la autenticación anónima.
Para crear y ejecutar esta aplicación necesitará tener npm instalado en su máquina.
La documentación de create-react-app recomienda que instales npx para ejecutar create-react-app en lugar de utilizar una versión que esté instalada en su máquina.

Procedimiento

Configurar una nueva aplicación React

Genere una nueva plantilla de aplicación usando create-react-app:

npx create-react-app realm-web-react-quickstart

npx create-react-app realm-web-react-quickstart --template=typescript

Navegue a la nueva aplicación e instale el paquete realm-web:

cd realm-web-react-quickstart
npm install --save realm-web

Importar dependencias y conectarse a su aplicación Realm

El SDK web de Realm contiene todo lo necesario para conectarse a una aplicación MongoDB Realm desde un navegador. En /src/App.js, agregue el siguiente código para importar el SDK web.

import * as Realm from "realm-web";

Ahora usa el paquete importado para instanciar un nuevo Realm.App. El objeto app representa tu aplicación Realm. Lo usarás para autenticar y administrar a los usuarios que interactúan con tu aplicación.

// Add your App ID
const app = new Realm.App({ id: APP_ID });

Crear componentes de React

En /src/App.js, agregue los siguientes componentes que muestran detalles sobre un usuario determinado y permiten a los usuarios iniciar sesión.

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

Crear y exportar el componente de la aplicación

En /src/App.js, sobrescriba el componente App existente con el siguiente componente que almacena el usuario actual en estado local y representa condicionalmente detalles sobre el usuario actual o una pantalla de inicio de sesión si ningún usuario está autenticado actualmente.

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;

Ejecutar la aplicación

¡Ya puedes conectarte a tu aplicación Realm e iniciar sesión! Asegúrate de haber guardado los cambios en /src/App.js y luego ejecuta el siguiente comando desde la raíz del proyecto:

yarn start

Esto inicia un servidor web local que sirve a su aplicación. Si se ejecuta correctamente, debería ver el siguiente resultado en su shell:

Compiled successfully!
You can now view realm-quickstart-web in the browser.
  Local:  http://localhost:3000

Abra http://localhost:3000 en su navegador y pruebe que puede iniciar sesión correctamente como usuario anónimo.

Resumen

Si ha completado con éxito esta guía, habrá creado una aplicación React que puede conectarse a un backend de App Services y autenticar a un usuario anónimo.

Bienvenido a la Docs de Atlas Device SDK