nat*_*yte 5 javascript reactjs react-jsx
我松散地关注facebooks React教程, http://facebook.github.io/react/docs/getting-started.html,但我将它应用于不同的html文件.
这是我的html文件,基于react starter kit:
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="build/comment.js"></script>
</body>
</html>
我安装了react-tools,现在当我运行"jsx --watch src/build /"时
它正在转换此代码段:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.renderComponent(
<CommentBox />,
document.getElementById('content')
);
进入这个片段:
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
react.DOM.div( {className:"commentBox"},
" Hello, world! I am a CommentBox. "
)
);
}
});
React.renderComponent(
CommentBox(null ),
document.getElementById('content')
);
但教程显示了以下代码段:
// tutorial1-raw.js
var CommentBox = React.createClass({
render: function() {
return (
React.DOM.div({
className: 'commentBox',
children: 'Hello, world! I am a CommentBox.'
})
);
}
});
React.renderComponent(
CommentBox({}),
document.getElementById('content')
);
由于小写'r',网页会抛出错误,"未定义反应".这是真的.从chrome的控制台我可以确认定义了"React",而不是"react".
如何让jsx构建正确的输出,如教程中所述？
| 归档时间： |
|
| 查看次数： |
1536 次 |
| 最近记录： |