以HTML格式处理，空白页

Question

我用纯HTML编写我的React代码

<!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/[email protected]/babel.min.js"></script>
</head>
<body>
    <script>
        ReactDOM.render(
            <h1>Sherlock Holmes</h1>,
            document.body
        );
    </script>
</body>
</html>

但是他不起作用，在Chrome中运行此index.html之后，我只有空白的白页，有人可以解释我在做什么吗？

我使用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

我是第一次做出反应，它像这样编辑了您的代码。我将您的代码更改为此。我想我添加的两个脚本不是必需的，只需尝试一下即可。据我了解，您必须设置一个区域来放置文本。这两个链接也可能有帮助。

我的代码：

   <!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/[email protected]/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格式处理，空白页

问题描述投票：0回答：2

2个回答

最新问题

以HTML格式处理，空白页

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2