Docs 主页 → 开发应用程序 → Atlas Device SDKs
使用 React 快速入门 Electron
在此页面上
概述
本页包含的信息可帮助您通过使用 Create React App 开发应用程序，从而将 Realm 快速集成到您的 Electron 应用程序中。
开始之前，请确认您已：
注意
注意
版本要求 - React.js
本指南旨在支持 React.js17 版本。0 并 创建 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 进程模型 doc。
删除 web-vitals 依赖项
创建 React 应用版本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-renderer "nodeExternals 以便为 ElectronallowList nodeExternals内置模块的浏览器环境编译应用程序。还指定了 以防止捆绑所有 node_modules。传递给 的对象中的 键指定要包含在捆绑包中的模块列表，在本例中是 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 进程模型 doc。
将以下代码添加到 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
通过将以下内容添加到 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。