ElectronでReactの画面を開くにはどうすればよいですか？

Electronを使用してデスクトップアプリケーションを実行し、Reactをテンプレートエンジンとして使用しているプロジェクトがあります。しかし、Electronと反応するために新しい画面を開く方法がわかりません。

これは私のプロジェクトのディレクトリ階層です：https：//i.stack.imgur.com/RvI77.png

私のメイン-> index.jsには、アプリケーションの初期化である次のコードがあります。

'use strict'

import { app, BrowserWindow, ipcMain } from 'electron'
import * as path from 'path'
import { format as formatUrl } from 'url'
import { NOME_APLICACAO, ABRIR_TELA_DE_VENDAS } from '../utils/constants.js';


const isDevelopment = process.env.NODE_ENV !== 'production'

// global reference to login window (necessary to prevent the window from being garbage collected)
let loginWindow;
let vendaWindow;

function createLoginWindow() {
  const window = new BrowserWindow({ 
    title: NOME_APLICACAO,
    webPreferences: { nodeIntegration: true }
  });

  if (isDevelopment) {
    window.webContents.openDevTools()
  };

  if (isDevelopment) {
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
  }
  else {
    window.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
    }))
  }

  window.on('closed', () => {
    loginWindow = null
  })

  window.webContents.on('devtools-opened', () => {
    window.focus()
    setImmediate(() => {
      window.focus()
    })
  })

  return window;
}


// quit application when all windows are closed
app.on('window-all-closed', () => {
  // on macOS it is common for applications to stay open until the user explicitly quits
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // on macOS it is common to re-create a window even after all windows have been closed
  if (loginWindow === null) {
    loginWindow = createLoginWindow()
  }
})

// create main BrowserWindow when electron is ready
app.on('ready', () => {
  loginWindow = createLoginWindow()
})

そして、どういうわけか、プロジェクトを開始すると、view-> index.js画面が開き、index.js画面には次のコードがあります。

import React from "react"
import ReactDOM from "react-dom"
import Login from "./component/loginView/Login"

ReactDOM.render(
    <Login />, 
    document.getElementById("app") 
)

私の研究で学んだことから、ビュー-> 'index.js'は、IDが「app」の要素に.htmlファイルを追加する必要がありました。しかし、私のディレクトリ階層でわかるように、.htmlファイルはどこにもありません。そのため、電子がindex.jsファイルのどこに追加されているのかわかりません。これが私の最初の質問です。

私の2番目の質問は、ご覧のwindow.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)とおり、main-> index.jsのこの命令は、ビュー-> index.jsを開くのに十分であり、私にはノウハウがありません。メイン-> index.jsで開きたいview-> vendaView.jsのような他のページがあるので、その方法を知りたいのですが、コーディング方法がわかりません。

どんな援助にも感謝します。