使用 React 快速入门 Electron

Atlas Device SDK 已弃用。有关详细信息，请参阅弃用页面。

Overview

本页包含的信息可帮助您通过使用 Create React App 来开发应用程序，从而将Realm快速集成到您的 Electron应用程序中。

开始之前，请确认您已：

注意

版本要求 - Electron

Realm适用于任何官方支持的 Electron 版本。但是，由于 Electron 每次更新都会不断变化，因此我们建议使用 Electron 版本 13.2.x 以便与本文档兼容。要查看官方支持的 Electron 版本，请查看Electron 版本文档。

注意

版本要求 - React.js

创建本指南时考虑了对React.js 版本17.0 和 Create React App 版本4 0的支持。这些版本以外的版本可能会导致在构建应用程序时出现错误，因为新的依赖项经常添加到React.js 和 Create React App。

设置

要使用 Realm 设置 Electron 应用程序，请使用以下说明：

创建 React 应用程序

使用 Create React App 工具链搭建应用程序。在终端中输入以下命令：

npx create-react-app my_electron_react_application

应用程序应包含以下文件。以下内容不包含项目中的一些其他文件，例如 CSS、服务工作线程和测试文件。

.
|-- package.json
|-- package-lock.lock
|-- public
|   |-- index.html
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

src 目录中的任何 JS 文件都在 renderer process 上执行。

注意

每个 Electron 应用程序只能有一个主进程。主进程会创建网页。每个网页都在自己的进程中运行，称为渲染器进程。要了解有关此内容的详情，请阅读官方 Electron 进程模型文档。

删除 web-vitals 依赖项

Create React App 4.0+ 版本包含 web-vitals 模块。由于“web-vitals”旨在与 Web 而不是 Electron 环境配合使用，因此包含此模块可能会导致在构建应用程序时出现 "chunk runtime-main [entry] Cannot convert undefined or null to object" 错误。为避免此错误，运行以下命令以卸载 web-vitals包。

npm uninstall web-vitals

然后删除 reportWebVitals.js 文件：

rm src/reportWebVitals.js

最后，从 src/index.js 文件中删除以下行：

import reportWebVitals from './reportWebVitals';
reportWebVitals();

安装 CRACO 来更改 Webpack 配置

要让应用程序与 Electron 一起正常工作，你必须更改 webpack 配置。默认情况下，通过 create-react-app 创建的应用程序使用预配置的 webpack 文件，并对最终用户隐藏。Create React App 默认的 webpack 配置与 Realm 不兼容，你必须将其覆盖。你可以使用 CRACO 来覆盖这些默认值。使用以下命令安装 CRACO：

npm install @craco/craco

创建 CRACO 配置文件

要覆盖预先配置的 webpack 值，请在应用程序的根目录下创建一个名为 craco.config.js 的 CRACO 配置文件。将以下内容添加到此文件：

const nodeExternals = require("webpack-node-externals");
module.exports = {
  webpack: {
    configure: {
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/, "electron-devtools-installer"],
        }),
      ],
    },
  },
};

目标设立为“电子渲染器”，以便为 Electron内置模块的浏览器环境编译应用程序。还指定了 nodeExternals 以防止捆绑所有 node_modules。传递给 nodeExternals 的对象中的 allowList 键指定要包含在捆绑包中的模块列表，在本例中是 Electron 的开发工具和 webpack。要使用 webpack-node-externals，运行以下命令：

npm install webpack-node-externals --save-dev

安装 Electron

要将 Electron 添加到项目，请运行以下命令：

npm install electron --save-dev

创建 Electron 主进程文件

可以将 Electron main process 文件视为应用程序的入口点。该文件负责将 React App 的 index.html 文件加载到 Electron 创建的 BrowserWindow 中。

注意

每个 Electron 应用程序只能有一个主进程。主进程可以创建网页。每个网页都在自己的进程中运行，称为渲染器进程。要了解有关此内容的详情，请阅读官方 Electron 进程模型文档。

将以下代码添加到 public 目录中名为 electron.js 的新文件中：

const electron = require("electron");
const path = require("path");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: { nodeIntegration: true, contextIsolation: false },
  });
  // and load the index.html of the app.
  console.log(__dirname);
  mainWindow.loadFile(path.join(__dirname, "../build/index.html"));
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

应用程序现在应包含以下文件。以下内容不包含项目中的一些其他文件，例如 CSS、服务工作线程和测试文件。

.
|-- package.json
|-- package-lock.lock
|-- craco.config.js
|-- public
|   |-- index.html
|   |-- electron.js // main process
|-- src
|   |-- App.js // renderer process
|-- |-- index.js // renderer process

src 目录中的所有 JS 文件都在 renderer 进程上执行。electron.js 及其所需的任何文件都在主进程上执行。

运行应用程序

要运行应用程序，请通过将以下内容添加到 package.json 文件中，为 Electron 指定主页和主入口点：

"main": "public/electron.js",
"homepage": "./",

最后，将以下脚本添加到 package.json 文件中：

"scripts": {
  "build": "craco build",
  "start": "electron ."
},

在终端中，运行 npm run build，然后运行 npm run start。你应看到以下内容：

安装 Realm

在终端中，使用以下命令将 Realm 添加到项目：

npm install realm@12

通过将以下内容添加到 src/App.js 文件的顶部，在渲染器进程中使用 Realm（你还需要将其导入到使用 Realm 编写代码的任何文件中）：

import Realm from "realm";

打开 Realm

对用户进行身份验证，定义架构，并同步已启用的 Device Sync，然后在已导入 Realm 的文件中调用 Realm.open()。

打开 Realm 后，便可向此 Realm 进行写入。

const app = new Realm.App({ id: "<Your App ID>" }); // create a new instance of the Realm.App
async function run() {
  // login with an anonymous credential
  await app.logIn(Realm.Credentials.anonymous());
  const DogSchema = {
      name: "Dog",
      properties: {
        _id: 'int',
        name: "string",
        age: "int",
      },
      primaryKey: '_id'
  };
  const realm = await Realm.open({
    schema: [DogSchema],
    sync: {
      user: app.currentUser,
      partitionValue: "myPartition",
    },
  });
  // The myPartition realm is now synced to the device. You can
  // access it through the `realm` object returned by `Realm.open()`
  // write to the realm
}
run().catch(err => {
  console.error("Failed to open realm:", err)
});

注意

有关通过renderer和main进程写入 Realm 的示例，请查看 realm-electron-advanced-quickstart 存储库。

注意

当前的 React Native 二进制文件包含在 realm 包中。您可以从构建中删除这些二进制文件和 react-native 目录。在 package.json 文件中，添加 build.files 条目，并将其值设为 !**/node_modules/realm/react-native。

提示

来年

欢迎使用 Atlas Device SDK 文档