Electron+ReactでHello world
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!と表示するように変更しますが、そのままでもかまいません。
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
も指定します。
...
"main" : "main.js",
"homepage" : "./",
...
main.jsは前回のElectron単独のHello,worldで作ったものを使い回します。
今回の変更点は、読み込むindex.htmlのパスをReactのビルド先に合わせることだけです。
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のメインプロセスとの通信を試してみたいと思います。
Author And Source
この問題について(Electron+ReactでHello world), 我々は、より多くの情報をここで見つけました https://qiita.com/fumi-410/items/ad14ec72ea0bf73ea273著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .