javascript - 如何让 ReactJS JSX 在 Electron 上工作-6ren

javascript - 如何让 ReactJS JSX 在 Electron 上工作

转载作者：行者123 更新时间：2023-12-03 05:13:45

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

但是，如此多的模块和技术让我不知所措。有一个electron react boilerplate对于像我这样的初学者来说这非常复杂。

我有一个带有这些库的简单项目:

electron作为开发人员
react
react-dom

我有main.js在我启动 Electron 项目的根路径中，它取自 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"));

当我启动 Electron 应用程序时，它会打开一个包含空内容的窗口，这意味着我的 JSX 未加载。 并且它不会抛出任何错误消息

我错过了什么？

最佳答案

问题是这样的 - 除了转译器之外没有人理解 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

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

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

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

您需要安装节点并使用npm install和npm run build让这段代码正常工作

关于javascript - 如何让 ReactJS JSX 在 Electron 上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41693413/