1

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

但我在根目录helloworld.js下创建。当我尝试运行时，我什么也没有发生（完全）。当我尝试运行下面描述的错误时。srchelloworld.htmlhelloworld.htmlhelloworld.js

babel 有问题吗？

错误截图

html

4

1 回答 1

0

您的第一个问题，为什么 helloworld.html 什么都不返回：您不需要在标签中添加 src="src/helloworld.js" 。否则将尝试加载您的 helloworld.js （这会导致您的第二个问题）。我创建了一个 plunker - 它可以在没有 src="src/helloworld.js" 的情况下工作

.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。当你从 script 标签加载 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！： 在此处输入图像描述

于 2016-08-02T08:48:22.177 回答