React を使用した Electron でのクイック スタート

React アプリケーションの作成

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

{0 ディレクトリ内のすべての ファイルはJavaScriptsrc renderer processで実行されます。

Web-visuals の依存関係を削除する

Reactアプリ バージョン 4.0+ には、Web 経由 モジュールが含まれています。「web-vitals」は Electron 環境ではなく Web で動作するように設計されているため、このモジュールを含めるとアプリケーションのビルド時に "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();

Webback 構成を変更するための CRACO のインストール

アプリケーションがElectron で適切に動作できるようにするには、Webback の構成を変更する必要があります。デフォルトでは 、create-react-app 経由で作成されたアプリケーションは事前構成された Webhookファイルを使用し、エンドユーザーには非表示されます。ReactアプリのデフォルトのWebhook 構成はRealmと互換性がないため、上書きする必要があります。CRACO を使用して、これらのデフォルト値を上書きできます。以下のコマンドを使用して CRACO をインストールします。

npm install @craco/craco

CRACO 構成ファイルの作成

事前構成された Webhook 値を上書きするには、アプリケーションのルートに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" に設定され、Electron 組み込みモジュールのブラウザ環境用にアプリケーションをコンパイルします。すべての Node_module がバンドルされないようにするには、nodeExternals も指定します。nodeExternals に渡されるオブジェクトの allowList キーは、バンドルに含めるモジュールのリストを指定します（この場合は electron の Developer Tools と webback が含まれます）。 webbuck-node-externals を使用するには、次のコマンドを実行します。

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

Electron のインストール

プロジェクトに Electron を追加するには、次のコマンドを実行します。

npm install electron --save-dev

Electron のメイン プロセス ファイルを作成する

Electron main processファイルは、アプリケーションへのエントリ ポイントと考えることができます。 このファイルは、React アプリのindex.htmlファイルを Electron によって作成されたBrowserWindowにロードする原因となります。

次のコードを、 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 ディレクトリ内のすべてのJavaScriptファイルは 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

レンダリング プロセスで Realm を使用するには、 src/App.jsファイルの先頭に以下を追加します（Realm を使用してコードを記述するファイルにインポートする必要もあります）。

import Realm from "realm";