Home>

First Electron. I made a program to display "Hello, Electron and React JSX" by React with reference to the book "Application development starting with Electron", but now I also run electeon in [./node_modules/.bin/electron.] Characters are not displayed as white. Also, if you run [./node_modules/.bin/babel --watch --out-dir .tmp src], it will stop at .tmp \ renderer \ app.js.
At the bottom is a screenshot of the problem screen.
It may be difficult to see, but the file structure is

electron_chat
Tmp .tmp
│ ├ main
│ │ ├ createWindow.js
│ │ └ index.js
│ └ renderer
│ └ app.js
├ node_modules
Src src
│ ├ main
│ │ ├ createWindow.js
│ │ └ index.js
│ └ renderer
│ └ app.jsx
├ .babelrc
├ index.html
├ package.json
└ package-lock.json


/src/createWindow.js/

import {BrowserWindow} from "electron";
let win;
function createWindow () {
  win = new BrowserWindow ();
  win.loadURL ('C: /Users/username/electron_chat/index.html');
  win.on ("close", () =>{
    win = null;
  });
}
export default createWindow;


src/index.jsis

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 ();
  }
});


forsrc/app.jsx
import React from "react";
import {render} from "react-dom";
render (<div>Hello, Electron and React JSX</div&gt ;, document.getElementById ("app"));


electron_chat/index.htmlhas

<! 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>
    <div></div>
  </div>
  <script>require ("./. tmp/renderer/app.js")</script>
</body>
</html>


I entered. (For the time being, only the code I wrote directly is issued.)
The .tmp file was created with [./node_modules/.bin/babel --out-dir .tmp src].
Also added ["main" ;:".tmp/main/index.js" ;,] to package.json.
The environment construction such as module installation is all done in accordance with the book.
How can I display characters?

  • Answer # 1

    Environment has been rebuilt