Menu
I'm working on the React example from their website. What I have so far is:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.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 type="text/jsx">
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
var converter = new Showdown.converter();
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 Comment = React.createClass({
render:function(){
converter.makeHtml(this.props.children.toString())
return(
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
);
}
});
React.render(
<CommentBox data={data} />,
document.getElementById("content")
);
</script>
</body>
</html>
I'm currently just opening the HTML file in my web browser, but my console is giving me the following error:
Error: Parse Error: Line 41:
Unexpected token : at file:///C:/Users/jkm144/Desktop/React_Example/template.html
render:function(){
For some reason, it doesn't like the ":", pointing to the first time on the page it's used. I've gone through the code to look for syntax errors, but I don't see anything. Has anyone else had this problem?
685
asked Feb 05 '26 23:02
The markup in the CommentList component has incorrect closing tag syntax:
<Comment />
Since that component has an opening tag, it should be closed with </Comment>. In context:
BROKEN:
<Comment author={comment.author}>
{comment.text}
<Comment />
Fixed:
<Comment author={comment.author}>
{comment.text}
</Comment>
# <--- / backslash was displaced
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
