如何使ReactJS JSX在電子上工作

Question

我想創建一個使用React JS進行數據演示的簡單桌面應用程序。

但是，我對這么多的模塊和技術不知所措。 有一個電子反應樣板對於像我這樣的初學者來說非常復雜。

我有這些庫的簡單項目：

作為開發者的electron
react
react-dom

我的項目的根路徑中有main.js ，它將啟動電子，該文件摘自該快速入門示例

我有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。 而且它不會拋出任何錯誤消息

我錯過了什么？

Answer 1

這就是問題所在- 除了編譯器之外，沒有人能理解JSX 。

有兩種方法可以使JSX正常工作-

使用基於瀏覽器/客戶端的編譯器（僅用於開發目的）
- 將此文件作為腳本標簽包含
  <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

用戶使用基於服務器的編譯器-例如Babel

您可以使用其他工具，例如webpack等。

在此處簽出示例-https: //github.com/rabibiswal/reactdemo/tree/master/hello-world-react-es5

您需要安裝節點並使用npm install和npm run build來使此代碼正常工作

如何使ReactJS JSX在電子上工作

問題描述

1 個解決方案

解決方案1
1 已采納 2017-01-17 10:37:25

如何使ReactJS JSX在電子上工作

問題描述

1 個解決方案

解決方案1 1 已采納 2017-01-17 10:37:25

解決方案1
1 已采納 2017-01-17 10:37:25