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

【问题标题】：React - Cannot load code from an external fileReact - 无法从外部文件加载代码
【发布时间】：2017-06-17 15:12:42
【问题描述】：

我正在尝试学习 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')
);

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

【问题讨论】：

是否有任何错误被抛出？你是在main.js 中导入React 和ReactDOM 吗？
是的。抛出的错误是 **XMLHttpRequest cannot load file://localhost/Users/username/react/main.js。仅 HTTP 支持跨源请求。 ** 现在我知道这是因为 Chrome。

标签： reactjs external

【解决方案1】：

如果您使用的是基于 Chromium 的网络浏览器，就会发生这种情况。您可以尝试 Mozilla Firefox 或其他基于 Mozilla 的网络浏览器。 Chrome 不允许以这种方式做出反应。此外，script 标签的 'type' (text/babel) 属性已被弃用。所以，强烈推荐使用 react server 或者其他支持 react 的 server。

【讨论】：

在这里找到更多信息：stackoverflow.com/questions/20904098/…

【解决方案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 文件并且应该可以工作。

【讨论】：