按照菜鸟教程的实例，学习的第一个reactjs组件。以下红色字体是我记录的学习过程中遇到的坑或者知识点。
var TodoList = React.createClass({//只是用来渲染Ul，他的props.items改变后会触发重新渲染；
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;//该方法遍历props.Items中的item，使他们被createItem调用。items.forEach(function(i){createItem(i)})
}
});
var TodoApp = React.createClass({
getInitialState: function() {//创建初始state
return {items: [], text: ‘‘};
},
onChange: function(e) {
this.setState({text: e.target.value});//通过事件获取值
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextText = ‘‘;
this.setState({items: nextItems, text: nextText});//动态绑定，state中的值改变后，会触发 <input onChange={this.onChange} value={this.state.text} />
},
render: function() {//最终渲染出口，需要用()包住元素
return (
<div>
<h3>TODO</h3>//切记闭合/
<TodoList items={this.state.items} />//调用其他组件
<form onSubmit={this.handleSubmit}>//所有事件名需要严格地使用驼峰
<input onChange={this.onChange} value={this.state.text} />//state相关要加上{}包住
<button>{‘Add #‘ + (this.state.items.length + 1)}</button>//这个button默认就带上了提交
</form>
</div>
);
}
});
React.render(<TodoApp />, document.getElementById("container"));
hello reactjs
原文：http://www.cnblogs.com/saac/p/5161887.html
