Electron의 UI를 React로 만들어 보겠습니다.
다음 단계로 만들어 갑니다.

React 앱을 create-react-app로 만듭니다.

만든 React 앱을 Electron으로 불러오기 표시한다.

구그하면 localhost:3000에서 시작한 React 앱을 로드하는 예가 많습니다만, 여기서는 빌드한 것을 로드하기로 합니다.

※환경: Windows 10 Home, Node.js v14.17.4, Electron v15.1.1

React 앱 만들기

먼저 create-react-app로 React 앱을 만듭니다.
앱명은 적당히 erhello로 합니다만 무엇이든 OK입니다.

> npx create-react-app erhello

일단 Hello world이므로 App.js 로 Hello, world!라고 표시하도록 변경합니다만, 그대로도 괜찮습니다.

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, world! 
        </p>
      </header>
    </div>
  );
}

export default App;

React 앱을 Electron에 표시

Electron을 추가로 설치합니다.

> cd erhello
> npm i -D electron

그런 다음 package.json을 편집합니다.
항상 엔트리 포인트의 파일 이름을 변경합니다.
또한 React 출력이 상대 경로에서 작동하도록homepage 지정합니다.

package.json

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

main.js는 지난번의 Electron 단독 Hello, world로 만든 것을 사용합니다.
이번 변경 사항은 읽을 index.html의 경로를 React의 빌드 대상에 맞추는 것입니다.

main.js

const { app, BrowserWindow } = require('electron');

function createWindow () {
  // ウインドウ作成
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // index.htmlの内容でウィンドウ表示
  mainWindow.loadFile('./build/index.html'); // パス変更
}

// Electronの初期化完了時に呼ばれる
app.whenReady().then(() => {
  createWindow();

  // Mac用処理
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  })
});

// (Mac以外は)ウインドウが全部閉じられたら終了
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

빌드를 실행하고 Electron 앱을 실행해 봅니다.

> npm run build
> npx electron .

다음과 같이 Hello world 화면이 표시되면 성공합니다.



다음 번에는 Electron의 메인 프로세스와 통신을 시도하고 싶습니다.