React.js：教程中的示例不工作
我从http://facebook.github.io/react/docs/tutorial.html开始学习React.js教程。 这是我的文件：
template.html：
<html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.8.0.js"></script> <script src="http://fb.me/JSXTransformer-0.8.0.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> </head> <body> <div id="content"></div> <script type="text/jsx" src='tut.js'> </script> </body> </html> 和tut.js：
/** @jsx React.DOM */ var data = [ {author: 'Tldr', text: 'This is a comment'} ] var CommentBox = React.createClass({ render: function() { return ( <div className='commentBox'> <h1>Comments</h1> <CommentList data={this.props.data} /> <CommentForm /> </div> ) } }) var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function(comment) { return <Comment author={comment.author}>{comment.text}</Comment> }) return ( <div className='commentList'> {commentNodes} </div> ) } }) var CommentForm = React.createClass({ render: function() { return ( <div className='commentForm'> Hello World, I am a comment </div> ) } }) var Comment = React.createClass({ render: function() { return ( <div className='comment'> <h2 className='commentAuthor'> {this.props.author} </h2> {this.props.children} </div> ) } }) React.renderComponent( <CommentBox data={data} />, document.getElementById('content') )
但是当我在浏览器中打开它时，我只是看到一个没有任何评论的空白页面。 我究竟做错了什么？
Chrome浏览器不允许你通过XHR加载file:// urls（其他地方提到的是如何在浏览器转换工作）。 你有几个select：
- 使用不同的浏览器。 我知道Firefox的作品。
- 启动一个本地Web服务器（Python附带一个，所以如果你已经安装了它，这是非常简单的 – http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python ）。
- 把脚本内联，而不是在一个单独的文件。 这对于这样简单的事情是可行的，但是当你的代码变得更复杂时，你会想尝试其他的select。
以下命令适用于我。 但是在命令之前，无论如何你可能需要停止chrome进程，可以从任务pipe理器。
“C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe” - 允许从文件访问文件 - 禁用networking安全
第二种方法，你也可以在chrome快捷方式属性中使用–allow-file-access-from-files标志。 但是这只是build议用于开发目的。
JSXTransformer尝试使用ajax加载源代码。 这对file://path不起作用。
这意味着您应该使用HTTP服务器（apache，grunt connect等）为您的小型项目提供服务，或者直接将脚本源文件放在脚本标记中。
对于Chrome，您可以尝试禁用原点检查，更多详细信息可以在Chrome中禁用相同的原产地策略中find。 当然，这只是用于开发。
无论出于什么原因，本地networking服务器在Chrome上似乎都不够用。 使用Python 3.4并通过http://localhost:8000查看我的网站我得到以下错误：
原始的“ https://fb.me ”redirect已被阻止加载“跨源资源共享”策略：请求的资源上没有“Access-Control-Allow-Origin”标头。 原因' http：// localhost：8000 '因此不被允许访问。
考虑到教程中包含的巴贝尔脚本没有给出相同的错误，这很奇怪。
我能够通过删除用于加载反应和反应的script标记的integrity和crossorigin属性来解决这个问题，改变：
<script src="https://fb.me/react-0.14.7.min.js" integrity="sha384-zTm/dblzLXQNp3CgY+hfaC/WJ6h4XtNrePh2CW2+rO9GPuNiPb9jmthvAL+oI/dQ" crossorigin="anonymous"></script> <script src="https://fb.me/react-dom-0.14.7.min.js" integrity="sha384-ntqCsHbLdMxT352UbhPbT7fqjE8xi4jLmQYQa8mYR+ylAapbXRfdsDweueDObf7m" crossorigin="anonymous"></script>
至：
<script src="https://fb.me/react-0.14.7.min.js"></script> <script src="https://fb.me/react-dom-0.14.7.min.js"></script>
从Paul O'Shannessy的回答中排名第二。
好的解决scheme是：
如果你有python2.x：
$ cd /myreact-project/htmlfiles/ $ python -m SimpleHTTPServer
对于python3.x
$ cd /myreact-project/htmlfiles/ $ python -m http.server
然后你可以将你的浏览器指向http://192.168.1.2:8000/<myfile.html>或者python模块在哪里为你的文件提供服务，并且可以在任何浏览器中使用它，而没有麻烦。
我用你的代码和它的工作克里特JSFiddle 。 一个想法，试着把你的脚本从head移动到tut.js之前。 另外，不要忘记列表呈现组件中的key属性。 我把它添加到小提琴。
