Javascript React-单独脚本中的组件不工作_Javascript_Html_Reactjs

Javascript React-单独脚本中的组件不工作

javascript html reactjs

Javascript React-单独脚本中的组件不工作,javascript,html,reactjs,Javascript,Html,Reactjs,我正试图学习react.js，但却被困在了“Hello World”脚本上 My 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>

我正试图学习react.js，但却被困在了“Hello World”脚本上

My 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')
);

React.render(
你好，世界！，
document.getElementById（'示例'）
);

当我将此代码放入

文件

index.html

中时，它工作正常，但当我将其移动到单独的文件时，我会看到空白页，控制台错误：

XMLHttpRequest无法加载file:///home/marcin/Projects/react/src/helloworld.js. 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https、chrome扩展资源。

有什么问题吗？

我建议您启动web服务器

这个

python-msimplehttpserver将启动一个简单的web服务器
你可以在你的目录中运行这个。在这里访问它http://localhost:8000

或者，您可以使用Chrome标志并添加此行——允许从文件访问文件

注释
Python预装了OSX安装，所以如果你在Mac上，那就好了
不建议使用Chrome标志，因为这是一个繁琐的过程
您得到该错误是因为：
您已经从本地文件系统加载了index.html
（例如双击），而不是通过web服务器加载
负责text/JSX
脚本的JSX transformer是一个javascript组件，它试图获取script
标记的src
属性指定的文件
Javascript只允许从错误消息中列举的协议获取外部资源（甚至对于那些具有进一步限制的协议，如跨域请求）；从本地文件系统加载的文件具有file://
协议，该协议不在该列表中
当您将jsx
脚本包括在index.html
文件中时，它工作起来，因为检索jsx
脚本不需要任何请求
您需要做的是抓住web服务器，将hello world文件放入该服务器的文档根目录中，然后从web服务器加载它们，例如从类似的URL加载http://localhost/index.html
我知道答案已经被批准了，但我在这里张贴代码以供参考。我们可以将react.js与这样的脚本任务一起使用


ReactDOM.render(
你好，世界！，
document.getElementById（'示例'）
);
python3语法也会很有帮助：python3-mhttp.server[PORT]
有没有办法解决这个问题而不需要服务器？我看到很多答案都说你需要一台服务器，但问题通常是能否在浏览器中运行js代码。例如，如果我想将使用createreact应用程序创建的项目的结果作为静态页面包含在另一个项目中，而不是整个项目中app@raquelhortab如果你能从我的回答中通过第三个问题，那么你也许可以在没有服务器的情况下逃脱