Building a Todo app with React.js
这是我首次尝试用React-JS建立一个待办事项应用。React-JS是一个JavaScript库，用于构建用户界面，主要是因为它是由Facebook的建立。我们将学习如何使用。
让我们开始.您可以按照从GitHub库的步骤本教程
在本文中，我们将使用建立一个非常的应用程序Facebook的 react.js. 如果你不熟悉这个库，那么我会强烈建议阅读使用React构建了完整的Comment system教程.
Thinking in components
建设React.js应用的根本出路在于您的应用程序分解成一堆有用的组件，然后你的工作方式向后分别构建它们。一旦各个部件都是准备就绪，可以它们连接起来，以在组件之间交换数据。例如，我们的Todo应用程序可以分解为以下组件和层次结构，
- TODO APP
- TODO BANNER
- TODO FORM
- TODO LIST
- TODO LIST ITEM #1
- TODO LIST ITEM #2
...
- TODO LIST ITEM #n
Basic Skeleton
/* [TODO APP] */
var TodoApp = React.createClass({ ... });
/* [TODO BANNER] && [TODO LIST] */
var TodoBanner = React.createClass({ ... });
/* [TODO FORM] */
var TodoForm = React.createClass({ ... });
var TodoList = React.createClass({ ... });
/* [TODO LIST ITEM] */
var TodoListItem = React.createClass({ ... });
React.render(<TodoApp/>, document.body);
Component 1 - TodoApp
这个组件将持有将由它的子组件以各种形式来共享待办事项列表。 items的初始状态将是一个空白列表。该列表将尽快作为一个新的项目通过TodoForm组件添加更新。
/* [TODO APP] */
var TodoApp = React.createClass({
getInitialState: function(){
return {items: []};
},
updateItems: function(newItem){
var allItems = this.state.items.concat([newItem]);
this.setState({items: allItems});
},
render: function(){
return (
<div>
<TodoBanner/>
<TodoForm onFormSubmit={this.updateItems}/>
<TodoList items={this.state.items}/>
</div>
);
}
});
Component 2 - TodoBanner
它只是包含了一个标题标签。
/* [TODO BANNER] */
var TodoBanner = React.createClass({
render: function(){
return (
<h3>TODO....react.js</h3>
);
}
});
Component 3 - TodoList
它接受的项目的列表和环绕一个TodoListItem组件的每个项目。最终的结果，然后以<ul>标签包裹。
/* [TODO LIST] */
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return (
<TodoListItem>{itemText}</TodoListItem>
);
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
Component 4 - TodoListItem
它以<li>标签列出所有项目 ,以便它呈现为在最终的HTML的列表的块。 this.props.children预见包含传递给TodoListItem标签从其父组件的所有后代。
/* [TODO LISTITEM] */
var TodoListItem = React.createClass({
render: function(){
return (
<li data-id={this.props.value} key={this.props.value}>{this.props.children}</li>
);
}
});
Component 5 - TodoForm
它包含一个文本字段后跟一个按钮，触发在待办事项列表中的另外的项目。此组件将保持当前的项目在文本框输入并且两者都使用onChange事件保持同步。由于作为提交按钮被按下很快，该项目被传递给其父组件，焦点返回到文本框。
/* [TODO FORM] */
var TodoForm = React.createClass({
getInitialState: function() {
return {item: ''};
},
handleSubmit: function(e){
e.preventDefault();
this.props.onFormSubmit(this.state.item);
this.setState({item: ''});
ReactDOM.findDOMNode(this.refs.item).focus();
return;
},
onChange: function(e){
this.setState({
item: e.target.value
});
},
render: function(){
return (
<div className="row">
<form onSubmit={this.handleSubmit}>
<div className="form-group col-sm-10">
<input type='text' className="todoField form-control" ref='item' onChange={this.onChange} value={this.state.item}/>
<input type='submit' className="btn btn-default" style={{"float":"left","marginLeft":"5px"}} value='Add'/>
</div>
</form>
</div>
);
}
});
Render - TodoApp
最后一步是绘制 TodoApp
ReactDOM.render(
<TodoApp/>,
document.getElementById('todo')
);
当你完成，你可以看到 TodoApp.
The complete working demo can be found here .
##Building a Todo app with React.js (1) - A simple todos list
##Building a Todo app with React.js (2) - Improve Component & Remove Component