React无法在Electron App中呈现

Question

I've been trying to run some of the basic React examples in Electron App, but nothing shows up, even though there is no errors. 我一直在尝试在Electron App中运行一些基本的React示例，但是即使没有错误也没有任何显示。

Here's a file: 这是一个文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const React = require('react');
      const ReactDOM = require('react-dom');

      ReactDOM.render(
        <h1>Hello World</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

I have the following packages installed: react, react-dom and electron. 我安装了以下软件包：react，react-dom和electronic。 Am I doing something wrong? 难道我做错了什么？ Thanks in advance! 提前致谢！

Answer 1

type="text/babel" isn't recognized by browsers as a valid script type, so it'll just ignore it and skip over it completely, hence the lack of any error. 浏览器无法将type="text/babel"识别为有效的脚本类型，因此它将忽略它并完全跳过它，因此不会出现任何错误。 You need to include the babel script to make it parse, like so: 您需要包括babel脚本来进行解析，如下所示：

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    // your react code here
  </script>
</body>

This is fine for exploration and prototyping, but it's not good if you want to release the app for others to use. 这对于探索和原型制作来说很好，但是如果您想发布该应用程序供其他人使用，那就不好了。 Having babel parse the script on-the-fly can weigh on performance and memory usage. 让babel即时解析脚本可能会影响性能和内存使用。

Instead, look into a tutorial on how to pre-compile your scripts and run them that way. 相反，请看一本有关如何预编译脚本并以这种方式运行它们的教程。 This boilerplate could serve as a good reference. 该样板可以作为一个很好的参考。

React无法在Electron App中呈现

问题描述

1 个解决方案

解决方案1
1 2018-04-30 21:04:38

React无法在Electron App中呈现

问题描述

1 个解决方案

解决方案1 1 2018-04-30 21:04:38

解决方案1
1 2018-04-30 21:04:38