我有一个项目，我正在用Electron做桌面应用程序，并使用React作为模板引擎。但我不知道如何打开一个新屏幕来使用Electron进行React。
这是我的项目的目录层次结构：https://i.stack.imgur.com/RvI77.png
在我的main -〉index.js中，我有这样一段代码，它是我的应用程序的init：

'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 screen，index.js screen有以下代码：

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文件。这是我的第一个问题。
我的第二个问题是，正如你所看到的，window.loadURL(http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT})这个指令在main -〉index.js中足以打开view -〉index.js，我不知道如何。我想知道如何，因为我有其他页面，如view -〉vendaView.js，我想在main -〉index.js中打开，但我不知道如何编写它。
我很感激任何帮助。