react.js：实例教程不工作

来源：互联网发布：二次元博客源码编辑：程序博客网时间：2024/05/16 17:44

I'm doing the React.js tutorial from http://facebook.github.io/react/docs/tutorial.html. Here are my files:

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>

and 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'))

But when I open it in the browser, I just see a blank page without any comments. What am I doing wrong?

我在react.js教程http://facebook.github.io/react/docs/tutorial.html。这里是我的文件：

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

但是当我打开它在浏览器中，我只看到一个空白页没有任何评论。我做错了什么？

0 0