Question

我正在尝试制作一个“Hello World”程序作为反应教程的建议。

但我在helloworld.js和src下创建了helloworld.html。当我尝试运行我的helloworld.html时，根本没有任何事情发生。当我尝试运行下面描述的helloworld.js错误时。

babel有问题吗？

Answer 1

您的第一个问题，为什么helloworld.html根本不会返回任何内容：你不应该添加src =＆＃34; src / helloworld.js＆＃34;在标签中。否则，将尝试加载您的helloworld.js（这会导致您的第二个问题）。我创建了一个plunker - 它没有src =＆＃34; src / helloworld.js＆＃34;

html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>test</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

<强>演示： http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview

第二个问题。我猜你试图将脚本从helloworld.html中分离出来。您不需要导入，因为您已经在html的head标签中添加了react.js和react-dom.js。从脚本标记加载src / helloworld.js时，已知ReactDOM.render。

html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel" src="src/helloworld.js">
    </script>
  </body>
</html>

<强>的src / helloworld.js

ReactDOM.render(
  <h1>Hello, world</h1>,
  document.getElementById('example')
);

<强>演示： http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview

修改

点击浏览器，例如，我点击了Chrome并获得了Hello World！：

反应入门套件Hello World程序错误

1 个答案: