katekichiのゆるブログ

普段の作業メモや日常の出来事とか

「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 .

こんな感じ

f:id:katekichi:20170501235715p:plain

今回は、React JSXの初歩的な書き方と、Babelを使用したトランスパイルでした。 次回は、ルーティングの実装から