Question

我试图学习React，我想从最简单的例子开始。我从这里得到一个：https://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/

但是代码似乎拒绝从外部.js文件加载。

reacttest.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
  </head>

  <body>
    <div id="app"></div>
    <script src="main.js" type="text/babel">
      // Code omitted to keep sample short
    </script>
  </body>
</html>

main.js

var App = React.createClass({
  render: function() {
    return <div>Something something Dark Side</div>;
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

如果我将相同的代码放在脚本标记内，那么它可以正常工作。我做错了什么？

Answer 1

如果您使用的是基于Chromium的网络浏览器，则会发生这种情况。您可以尝试使用Mozilla Firefox或其他基于Mozilla的Web浏览器。 Chrome不会以这种方式做出反应。而且，＆＃39; type＆＃39;不推荐使用script标记的（text / babel）属性。因此，强烈建议使用反应服务器或其他支持反应的服务器。

Answer 2

我以为你可能在没有服务器的情况下使用HTML文件，因此在你尝试导入文件main.js时会出现错误，你可以在这里看到一个例子：https://plnkr.co/edit/rlo7U99UVUF5HmzaHHE4?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js" type="text/babel"></script>
  </body>

</html>

尝试使用服务器呈现HTML文件并且应该可以使用。

React - 无法从外部文件加载代码

2 个答案: