如何让 ReactJS JSX 在电子上工作答案

【问题标题】：How to make ReactJS JSX's work on electron如何让 ReactJS JSX 在电子上工作
【发布时间】：2017-06-01 07:06:54
【问题描述】：

我想创建一个简单的桌面应用程序，它使用 React JS 进行数据呈现。

但是，我对如此多的模块和技术感到不知所措。有一个 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 没有加载。 而且它不会抛出任何错误信息

我错过了什么？

【问题讨论】：

您使用“react-dom/server”的任何具体原因？这对我来说似乎不同。我只是使用 react-dom。另外，您是否使用 webpack 之类的东西来捆绑 react 应用程序。浏览器不直接支持import，需要使用Babel转译。
@shashi 我刚刚阅读了一些文章并尝试使用它的代码。我不使用 webpack。

标签： javascript reactjs electron

【解决方案1】：

这就是问题所在 - 除了转译器没有人了解 JSX。

两种方法，你可以让 JSX 工作 -

使用基于浏览器/客户端的转译器（仅用于开发目的）
- 将此文件包含为脚本标记
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
- 在加载 JSX 的脚本标签上使用 type="text/babel"
  
  <script type="text/babel" src="index.js"></script>

在此处查看示例 - https://github.com/rabibiswal/reactdemo/tree/master/hello-world-jsx

使用基于服务器的转译器 - 例如通天塔

您可以使用不同的工具，例如 webpack 等。

在此处查看示例 - https://github.com/rabibiswal/reactdemo/tree/master/hello-world-react-es5

您需要安装节点并使用npm install 和npm run build 才能使此代码正常工作

【讨论】：