Question

我是ReactJS的新手，正在通过Hello World示例学习它，如下所示：

abc.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="abc.js"/>
  </body>
</html>

abc.js

const element = <h1>Hello, world</h1>;
ReactDOM.render(
   element, 
   document.getElementById('root')
);

我希望您好，应该显示world，但是将呈现一个空白页。我已经将abc.html和abc.js放在同一文件夹中。我错过了什么还是做错了什么？

Answer 1

我刚刚复制粘贴了您的代码，它工作正常。只需进行一次更正，就无需像在代码中一样在html文件中添加abc.js文件。

<script src="abc.js"/>

您能否验证您的入口点是因为默认情况下index.js / index.tsx文件是您的react入口点。请尝试以下操作，它应该可以正常工作。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

const element = <h1>Hello, world</h1>;
ReactDOM.render(
   element, 
   document.getElementById('root')
);

Answer 2

使用Babel浏览器内编译器时，必须包括代码内联并将脚本标记类型设置为text/babel：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const element = <h1>Hello, world</h1>;
      ReactDOM.render(
        element, 
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Answer 3

您似乎可以使用的-我只是复制并粘贴到代码笔中。您的浏览器可能阻止了React脚本或其他内容

也许可以在其他浏览器中尝试？

无法运行ReactJS的Hello World示例

3 个答案: