如何使ReactJS JSX的電子工作

我想創建一個簡單的桌面應用程序，它使用React JS進行數據表示。如何使ReactJS JSX的電子工作

但是，我被這麼多模塊和技術淹沒了。有一個electron react boilerplate像我這樣的初學者非常複雜。

我與這些庫簡單的項目：

electron作爲開發
react
react-dom

我在我的項目我的根路徑具有main.js這將啓動電子和它取自this quickstart example

我有index.html文件在我的JSX應加載：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Hello World!</title> 
    </head> 
    <body> 
    <div id="react-view"></div> 
    </body> 

    <script type="text/jsx"> 
    // You can also require other files to run in this process 
    require('./scripts/application'); 
    </script> 
</html>

有scripts/application.js文件在我的JSX將被填充到我的<div id="react-view"></div>。

我App.jsx很簡單：

import React, {Component} from 'react' 

class App extends Component{ 
    render() { 
     return <h1>Hello From React</h1>; 
    } 
} 

export default App;

我application.js文件看起來像這樣：

import React from 'react'; 
import ReactDom from 'react-dom/server'; 
import App  from 'components/App'; 

ReactDom.render(<App/>, document.getElementById("react-view"));

當我啓動我的電子申請它打開了我與空內容的窗口，這意味着我的JSX未加載。 它不會拋出任何錯誤信息

我錯過了什麼？

來源

2017-01-17 Mr.D

任何你使用「react-dom/server」的具體原因是什麼？這對我來說似乎不同。我只是使用react-dom。另外，你是否使用任何像webpack捆綁反應的應用程序。瀏覽器不直接支持導入，需要使用Babel進行轉換。 – shashi

@shashi我剛剛讀過一些文章，並試圖使用它的代碼。我不使用webpack。 –

這裏是問題 - 沒有人瞭解JSX，除了一個transpiler。

兩種方式，你可以得到JSX工作 -

使用基於瀏覽器/客戶端transpiler（只爲了發展目的）
- 包括該文件作爲腳本標籤
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
- 在你的腳本標籤使用type="text/babel"它加載您的JSX
  
  <script type="text/babel" src="index.js"></script>

結賬這裏的樣本 - https://github.com/rabibiswal/reactdemo/tree/master/hello-world-jsx

用戶基於服務器的transpiler - 例如巴貝爾

您可以像使用的WebPack等

結賬這裏的樣本不同的工具 - https://github.com/rabibiswal/reactdemo/tree/master/hello-world-react-es5

您需要安裝節點，並使用npm install和npm run build得到這個代碼的工作

來源

2017-01-17 10:37:25 Rabi

如何使ReactJS JSX的電子工作

回答

相關問題