使用React和.jsx与Electron

Question

尝试使用React及其.jsx文件获取Electron项目。我已经完成了各种教程，github问题，SO答案等，但我还没有找到一个明确的指南来设置一个与React及其.jsx文件一起使用的Electron项目

需要哪些步骤，依赖项和配置才能实现此功能？

Answer 1

我们发现有2个进程需要 bootstrapped 。

首先，安装babel-register et al并设置.babelrc来处理react，es6等。我不会在这里详细介绍这些细节......

假设您的主脚本名为main.js，您的渲染脚本（包含jsx，es6，react等）称为render.js

main.boot.js

// install babel hooks in the main process
require('babel-register');
require('./main.js');

对于渲染过程，您可以在渲染脚本之前将babel-register脚本添加到html文件。

<script>
        // install babel hooks in the renderer process
        require('babel-register');
</script>
<script src='render.js'></script>

然后只需从项目中调用bootstrap脚本而不是主脚本。例如，将Package.json更改为

"main": "./main.boot.js"

确保您的源路径正确：）

Answer 2

我刚刚将test: /\.tsx?$/,更改为test: /\.jsx?$/，并在configs /中将其输入index.jsx，它开始为我工作。

index.jsx

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

Answer 3

我为此目的创建了一个程序包，也许可以为您

您只需将其放在html中：

<script>
require("electron-jsx")(__dirname, {
    reactDir: "./react-sources",
})
</script>
<script react-src="./react-sources/index.jsx">

并在BrowserView中设置：

webPreferences: {
            nodeIntegration: true
}

https://www.npmjs.com/package/electron-jsx

https://github.com/mdjfs/electron-jsx