这是本人初学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的语法氛围。