在 HTML 中做出反应，空白页

Question

我的反应代码很简单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>

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

我用vscode

Answer 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>

结果：

Answer 2

我第一次做出反应，它像那样编辑了你的代码。我想我添加的两个脚本不需要，但试试吧。据我了解，您必须设置一个部分来放置文本。这两个链接也有帮助。

Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp

我的代码：

   <!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>

在 HTML 中做出反应，空白页

React in HTML, blank page

html

reactjs

react-dom