将React和.jsx与Electron一起使用

问题描述：

尝试使用React及其.jsx文件获取Electron项目。我已经通过各种教程，github问题，SO答案等，但我还没有找到一个明确的指导，建立一个用于React的Electron项目，它是.jsx文件。将React和.jsx与Electron一起使用

需要哪些步骤，依赖关系和配置才能使其工作？

你看这个？ https://github.com/chentsulin/electron-react-boilerplate – erichardson30

是的，我确实遇到过这个项目，但他们使用.js文件来代替它们的组件.jsx。 – Orbit

.jsx和.js文件无关紧要。你可以互换使用它们。所不同的是，除了js扩展名外，还需要告诉webpack寻找jsx扩展名，并且在导入文件时必须添加'.jsx'。如果你只是使用js扩展，你可以说'从'../ path/to/component'中导入Component，并且离开文件扩展名。并且您仍然可以在js文件中使用jsx – erichardson30

答

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

首先，安装通天登记等，并成立.babelrc处理反应，ES6，等我将不再赘述这些细节...

让我们假设你的主脚本被称为主。 js和渲染的脚本（含JSX，ES6，反应等）被称为render.js

main.boot.js

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

对于渲染过程中，您添加通天注册脚本来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"

并确保您得到您的源路径正确:)

真的很酷，看到这个例子只需要babel-register（给你React JSX和ES6）而不需要webpack：D – pzrq

将React和.jsx与Electron一起使用

相关推荐