在 HTML 中反应，空白页答案

【问题标题】：React in HTML, blank page在 HTML 中反应，空白页
【发布时间】：2019-12-22 00:09:43
【问题描述】：

我的反应代码是纯 HTML 格式的

<!Doctype html>
<html>
<head>
    <meta charset="uttf-8">
    <title>React! React! React!</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <script>
        ReactDOM.render(
            <h1>Sherlock Holmes</h1>,
            document.body
        );
    </script>
</body>
</html>

但他不工作，在 Chrome 中运行这个 index.html 后，我只有空白页，有人可以解释一下我做错了什么吗？

我使用 vscode

【问题讨论】：

控制台有报错吗？
我不使用控制台，我通过在浏览器中打开来运行它
你用的是什么浏览器？
我使用谷歌浏览器
右键单击页面并选择Inspect 选项。这将在页面正下方打开一个带有许多选项卡的窗口。其中一个选项卡是控制台。点击它

标签： html reactjs react-dom

【解决方案1】：

要完成这项工作，请使用开发版本，而不是 react 和 react-dom 文件的生产版本。另请注意，您需要将脚本的类型指定为"text/babel"，否则 babel 不会解析它。

查看下面的代码：

<html>
<head>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
</head>

<body>
<script type="text/babel">   /* notice type="text/babel"*/
    ReactDOM.render(
      <h1>Sherlock Holmes</h1>,
      document.body
    );
</script>
</body>

</html>

结果：

【讨论】：

【解决方案2】：

我确实是第一次做出反应，它像那样编辑了您的代码。我想我添加的两个脚本是不需要的，但只是尝试一下。据我了解，您必须设置一个部分来放置文本。这两个链接也可以提供帮助。

我的代码：

   <!Doctype html>
   <html>
   <head>
    <meta charset="uttf-8">
    <title>React! React! React!</title>
    <link rel="stylesheet" href="lib/style.css" />
</head>
<body>
    <section id="entry-point"></section>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/javascript">
      var h = React.createElement('p', null, 'Sherlock Holmes');
       ReactDOM.render(h, document.getElementById('entry-point'));
    </script>
   </body>
   </html>

【讨论】：