【发布时间】：2014-01-21 03:35:08
【问题描述】：
我正在学习来自http://facebook.github.io/react/docs/tutorial.html 的 React.js 教程。这是我的文件：
模板.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')
)
但是当我在浏览器中打开它时，我只看到一个没有任何 cmets 的空白页面。我做错了什么？
【问题讨论】：
-
浏览器的js控制台有消息吗？
-
我在控制台中收到以下错误：'XMLHttpRequest 无法加载文件：//localhost/Users/jashua/Desktop/code/react/tut.js。仅 HTTP 支持跨源请求。当我将 js 粘贴到脚本标签中时，一切正常。如何解决跨源错误？
-
我不明白，没有一个答案是一个解决方案。没有教程、博客或示例提到如何在您的机器上运行一个简单的示例，而最终必须为您提供服务。控制台也打印“使用反应开发工具”，但我不能
-
为简洁、标准的方法添加了一个赏金，以开始使用一个简单的反应示例**在我的机器上我也知道我需要指向哪些文件。 （不是关闭 codepen 或一些复杂的 npm 模块设置）。什么是最简单的骨架设置。所以人们可以理解它是如何适合的。
标签： javascript reactjs