Question

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

但是，我对这么多的模块和技术感到不知所措。对于像我这样的初学者来说，electron react boilerplate非常复杂。

我有这些libs的简单项目：

electron as dev
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未加载。 并且不会抛出任何错误消息

我错过了什么？

Answer 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才能使此代码正常工作

如何让ReactJS JSX在电子上工作

1 个答案: