

書籍"Electronではじめるアプリ開発"のchapter4の始めで詰まってしまいました。  
(5)表示される画像に(4)で書いているHello, Electron and React JSXが表示されることを期待しているのですが、なぜ出ないか？  
どなたか教えてくださいませんか。

(1)entryのindex.js

[code]

    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();
        }
    });
    
[/code]

(2)createMainWindow.js

[code]

    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;
    
[/code]

(3)loadするhtml

[code]

    <!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>
    
[/code]

(4)app.jsx

[code]

    import React from "react";
    import { render } from "react-dom"
    
    render(<div>Hello, Electron and React JSX</div>, document.getElementById("app"));
    
[/code]

(5)表示される画像  
[![表示される画面](https://i.stack.imgur.com/gFE5t.png)](https://i.stack.imgur.com/gFE5t.png)


CC BY-SA 4.0
2019-03-03T07:28:20.190
53159
2021-03-17T16:14:50.957
32388
question
reactjs electron
Reactのrenderで何も表示されない


以下の記述のシングルクォートをバッククォートにしないと動かないかと思います！

>
[code]

>     'file://${__dirname}/../../index.html'
>  
[/code]


CC BY-SA 4.0
2021-03-17T08:24:11.200
74716
2021-03-17T16:14:50.957
2021-03-17T16:14:50.957
3060
44376
53159
answer