React - 单独脚本中的组件不起作用答案

【问题标题】：React - component in seperate script does not workReact - 单独脚本中的组件不起作用
【发布时间】：2015-07-23 20:49:11
【问题描述】：

我正在尝试学习 react.js，但被“Hello World”脚本卡住了。

我的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx" src="src/helloworld.js"></script>
  </body>
</html>

和 src/helloworld.js:

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

当我将此代码放在index.html 文件中的<script> 中时，它可以正常工作，但是当我将其移动到单独的文件时，我得到空白页和控制台错误：

XMLHttpRequest cannot load file:///home/marcin/Projects/react/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

这有什么问题？

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

我知道答案已获批准，但我在此处发布代码以供参考。我们可以将 react.js 与这样的脚本任务一起使用

<!DOCTYPE html>
<html>
  <head>
   <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
</script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>

【讨论】：

【解决方案2】：

您收到该错误是因为：

您已从本地文件系统加载index.html（例如通过双击它），而不是通过网络服务器加载它
负责text/jsx 脚本的JSX 转换器是一个javascript 组件，它试图获取script 标记的src 属性指定的文件
Javascript 只能从错误消息中列举的协议中获取外部资源（甚至对于那些有进一步限制的协议，如跨域请求）；从本地文件系统加载的文件具有不在该列表中的file:// 协议。

当您将jsx 脚本包含在index.html 文件中时，它可以正常工作，因为不需要任何请求即可检索jsx 脚本。

你需要做的是抓住一个网络服务器，将 hello world 文件放入该服务器的文档根目录，然后从网络服务器加载它们，例如来自 http://localhost/index.html 之类的 URL。

【讨论】：

有什么方法可以在不需要服务器的情况下解决这个问题？我看到很多答案说你需要一个服务器，但问题通常是关于能够在浏览器中运行 js 代码。例如，如果我想将使用 create-react-app 创建的项目的结果作为静态页面包含在另一个项目中，而不是整个应用程序
@raquelhortab 如果你能从我的回答中解决问题 #3，那么你也许可以在没有服务器的情况下逃脱

【解决方案3】：

我建议你启动一个网络服务器。

这个python -m SimpleHTTPServer 将启动一个简单的网络服务器。

您可以在您的目录中运行它。在此处访问它http://localhost:8000。

或者，您可以使用 Chrome 标志并添加此行 --allow-file-access-from-files

注意事项

Python 预装了 OSX 安装程序，因此如果您使用的是 Mac，那就太好了。
不推荐使用 Chrome 标志，因为它是一个繁琐的过程。

【讨论】：

Python 3 语法也会有帮助：python3 -m http.server [PORT]