初学React：JSX语法

　　这是本人初学React做的学习笔记;讲的不是很深，只算是简单的进行介绍。

这是一个小系列。都是在同一个模板中搭建的，但是代码是不能正常执行的。

>>第一个组件.js

'use strick'
/*===========================JavaScript的XML语法========================*/
var CommentBox = React.createClass({
        render:function () {
                return (
                        <div className="CommentBox">
                                Hello, world!I am a CommentBox.
                        </div>
                );
        }
});

ReactDOM.render(
        <CommentBox />,
        document.getElementById('content')
);

/*=====================以上JS语句将被翻译为；==========================*/
var CommentBox = React.createClass({displayName: 'CommentBox',
        render: function() {
                return (
                        React.createElement('div', {className: "CommentBox"},
                                "Hello, world!I am a CommentBox."
                        )
                );
        }
});

ReactDOM.render(
        React.createElement(commentBox, null),
        document.getElementById('content')
);
/*=============================撰写组件===================================*/

var CommentList = React.cracteClass({
        render: function() {
                return (
                        <div className="commentList">
                                Hello, React`s World!I am a Commentlist.I am form Lao Zhao.
                        </div>
                );
        }
});

var CommentForm = React.createClass({
        render: function() {
                return (
                        <div className="commentForm">
                                Hello React`s World!I am a CommentForm.I am from Lao Zhao.
                        </div>
                );
                
        }
});

/*==============================更新组件===================================*/

var CommentBox = React.createClass({
        render: function() {
                return (
                        <div className="commentBox">
                                <h1>Comments</h1>
                                <CommentList />
                                <CommentForm />
                        </div>
                );
        }
});


/*==============================使用道具=======================================*/

var Comment = React.createClass({
        render: function() {
                return (
                        <div>
                                <h2 className="commentAuthor">
                                        {this.props.author}
                                </h2>
                                {this.props.children}
                        </div>
                );
        }
});

/*===============================组件属性===========================================*/

var CommentList = React.createClass({
        render: function() {
                return (
                        <div className="commentList">
                                <Comment author="Zhao Gaosheng">This is one comment.</Comment>
                                <Comment author="Gaosheng">This is *another*comment.</Comment>
                        </div>
                );
        }
});

　　　　这里只是简单让大家感受一下JSX的语法氛围。