「Electronではじめるアプリ開発」を写経してみた ③
少し間が空きましたが、ぼちぼち写経しました。チャットアプリの続きをやります。
目次:
3-3 開発プロジェクトの作成
package.jsonの作成と必要なモジュールをインストールする
npm init npm install electron@1.6.1 --save-dev npm install connors/photon --save npm install react@15.4.2 react-dom@15.4.2 react-router@3.0,0 --save npm install babel-cli@6.18.0 babel-preset-es2015@6.18.0 babel-preset-react@6.16.0 --save-dev
src/main/index.js(mainプロセス実装)
import { app } from "electron"; import createWindow from "./createWindow"; app.on("ready", () => { createWindow(); }); app.on("window-all-closed", () => { if(process.platform !== "darwin") { app.quit(); } }); app.on("activate", (_e, hasVisibleWindows) => { if(!hasVisibleWindows) { createWindow(); } });
src/main/createWindow.js(Window生成)
import { BrowserWindow } from "electron"; let win; function createWindow() { win = new BrowserWindow(); win.loadURL(`file://${__dirname}/../../index.html`); win.on("closed",() => { win = null; }); } export default createWindow;
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Electron chat</title> <link rel="stylesheet" href="node_modules/photon/dist/css/photon.css"> </head> <body> <div class="window"> <div id="app" class="window-content"></div> </div> <script>require("./.tmp/renderer/app.js")</script> </body> </html>
src/renderer/app.jsx(renderプロセス実装)
import React from "react"; import { render } from "react-dom"; render(<div>Hello, Electron and React JSX</div>, document.getElementById("app"));
.babelrc(Babelの設定。ES2015、React JSX形式のファイルをトランスパイルする)
{ "presets":["es2015", "react"] }
Babelの実行(srcディレクトリ下層の各jsとjsxを.tmp配下にトランスパイルしたjsとして配置) –watch 指定でファイル変更を自動検知する
$ ./node_modules/.bin/babel --out-dir .tmp src --watch
package.jsonのエンドポイントを変更
"main": "main.js", ↓ "main": ".tmp/main/index.js",
実行
$ ./node_modules/.bin/electron .
こんな感じ
今回は、React JSXの初歩的な書き方と、Babelを使用したトランスパイルでした。 次回は、ルーティングの実装から