書籍"Electronではじめるアプリ開発"のchapter4の始めで詰まってしまいました。
(5)表示される画像に(4)で書いているHello, Electron and React JSXが表示されることを期待しているのですが、なぜ出ないか?
どなたか教えてくださいませんか。
(1)entryのindex.js
import { app } from "electron";
import createMainWindow from "./createMainWindow";
let mainWindow = null;
app.on("ready", () => {
mainWindow = createMainWindow();
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin"){
app.quit();
}
});
app.on("activate", (_e, hasVisibleWindows) =>{
if (!hasVisibleWindows){
mainWindow = createMainWindow();
}
});
(2)createMainWindow.js
import { BrowserWindow } from "electron";
class MainWindow{
constructor(){
this.windows = new BrowserWindow({ width: 800, height: 600 });
this.windows.loadURL('file://${__dirname}/../../index.html');
this.windows.on("closed", ()=>{
this.windows = null;
});
}
}
function createMainWindow(){
return new MainWindow();
}
export default createMainWindow;
(3)loadするhtml
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Markdown Editor</title>
<link rel="stylesheet" href="node_modules/photon/dist/css/photon.css">
<style type="text/css">
#app {
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
}
</style>
</head>
<body>
<div class="window">
<div id="app" class="window-content"></div>
</div>
<script>require("./dist/renderer/app.js")</script>
</body>
</html>
(4)app.jsx
import React from "react";
import { render } from "react-dom"
render(<div>Hello, Electron and React JSX</div>, document.getElementById("app"));
this.windows.loadURL
のところの、シングルクォート ( ' ) をバッククォート ( ` ) にしたらどうでしょうか。テンプレートリテラルと呼ばれる js の構文です。