如何在 Electron 应用程序中实现 ReactJs？答案

【问题标题】：How to implement ReactJs in Electron application?如何在 Electron 应用程序中实现 ReactJs？
【发布时间】：2018-06-07 22:22:49
【问题描述】：

我是在Electron中启动一个应用程序，但是假设我分两部分做，一部分是Electron，配置还可以，除了另一部分是我在其他文件中使用ReactJS做的，相对准备好了，缺少调整。我的问题如下，我如何在 Electron 中实现我在 ReactJS 中所做的这一部分？（我的英文不好，由谷歌翻译，抱歉）。

我将无法显示代码，因为它会很复杂，但为了使其更容易，我将打印一些文件夹。

第一张图片。 这是 Electron 所在的文件夹，主文件是 main.js，这是我设置 Electron 的位置，htlms 说这与这样的疑问无关.并且package.json 将重新打印。

第二张图片。我必须安装React，但由于我不知道该怎么做，所以我没有继续。

第三张图。那是 React 的“公众”，谁会说它与这样的问题也无关。

第四张图片。 这就是 React 部分的工作原理。在 App.js 中，特别是在渲染中，它将是另一个 Electron browserWindow。 index.js 将是“主要”，我将打印。还有registerServiceWorking.js我会说我不太清楚它是干什么用的。

第五张图片。正如我所说，这是导入东西的索引（不知道这种情况的正确术语）。

我不得不把它写成代码，因为它有问题

First: [prntscr.com/js21oa][1]
Second: [prntscr.com/js22kh][1]
Third: [prntscr.com/js22yx][1]
Fourth: [prntscr.com/js23a3][1]
Fifth: [prntscr.com/js24nb][1]

为了清楚起见，我是此类问题和 StackOverflow 的新手，很抱歉，如果格式错误并且图像，我只能通过外部站点获得。如果有人要我澄清一些我没有说清楚的事情，就说我会澄清。如果您还没有理解其他内容，我深表歉意。我希望你已经明白了。提前致谢。

【问题讨论】：

标签： reactjs electron

【解决方案1】：

我猜你已经创建了一个 react 应用程序，你想用电子使它成为一个桌面应用程序。我没有足够的声誉发表评论来澄清事情。我将向您展示我在 react electron 桌面应用程序中所做的示例代码，希望对您有所帮助。我假设您已经安装了电子和所有其他需要的软件包。

main.js

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')


  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

并且在 index.html 中我的位于根文件夹中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body class="fix-header card-no-border">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
      <div id="root"></div>
      <script type="text/javascript" src="build/static/js/main.7f2e4ee8.js"></script>
  </body>
</html>

【讨论】：

但是你不需要import React？
我认为它看起来像这样：在 main.js 中导入 react from 'react'
你指的是哪个主文件？，这是给电子的。在 index.html 中，我指的主文件是反应代码，我使用的是“build/static/js/main.js”的构建版本。如果你想直接使用电子反应，你可以检查电子编译器
是这样吗，在我的 App.js 文件中，我使用 ReactJS，并想将此文件传递给 Electron，因为在 Electron 中我有某些设置来制作应用程序。
我正在尝试在这个存储库中实现我的 React 文件：github.com/csepulv/electron-with-create-react-app