React render shows nothing

I got stuck at the beginning of chapter 4 of the book Electron App Development.
(5)I'm hoping that the image I see will show Hello, Electron and React JSX written in (4), but why isn't it coming out?
Can someone tell me?

(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";

US>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>
    <metacharset="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">
      <divid="app" class="window-content"></div>
    </div>
    <script>require("./dist/render/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"));

(5) Displayed image

reactjs electron

2022-09-30 21:39

1 Answers

I think the single quote mentioned below must be used as a back quote!

'file://${__dirname}/../../index.html'

2022-09-30 21:39

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656