將React和.jsx與Electron一起使用

嘗試使用React及其.jsx文件獲取Electron項目。我已經通過各種教程，github問題，SO答案等，但我還沒有找到一個明確的指導，建立一個用於React的Electron項目，它是.jsx文件。將React和.jsx與Electron一起使用

需要哪些步驟，依賴關係和配置才能使其工作？

來源

2016-10-04 Orbit

你看這個？ 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"

並確保您得到您的源路徑正確:)

來源

2016-12-16 14:50:19

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

將React和.jsx與Electron一起使用

回答

相關問題