Simple Todo app demo using React + ES6
var React = require("react"); | |
var allItems = [] | |
allItems.push("Buy ingredients for Crock Pot"); | |
allItems.push("Pick up chair at IKEA"); | |
allItems.push("Go see mom"); | |
class TodoList extends React.Component { | |
constructor(props){ | |
super(props); | |
this.addEvent = this.addEvent.bind(this); | |
} | |
getInitialState() { | |
return { allItems }; | |
} | |
render() { | |
var items = this.props.items.map((item) => { | |
return <li><TodoItem item={item} /></li>; | |
}) | |
return( | |
<div> | |
<ul>{items}</ul> | |
<p><NewTodoItem addEvent={this.addEvent} /></p> | |
</div> | |
); | |
} | |
addEvent(todoItem){ | |
allItems.push(todoItem.newItem); | |
this.setState({ allItems }); | |
} | |
} | |
class TodoItem extends React.Component { | |
render(){ | |
return <div>{this.props.item}</div>; | |
} | |
} | |
class NewTodoItem extends React.Component { | |
constructor(props){ | |
super(props); | |
this.onSubmit = this.onSubmit.bind(this); | |
} | |
componentDidMount(){ | |
React.findDOMNode(this.refs.itemName).focus(); | |
} | |
render(){ | |
return (<form onSubmit={this.onSubmit}> | |
<input ref="itemName" type="text" /> | |
</form>); | |
} | |
onSubmit(event){ | |
event.preventDefault(); | |
var input = React.findDOMNode(this.refs.itemName) | |
var newItem = input.value; | |
this.props.addEvent({ newItem }); | |
input.value = ''; | |
} | |
} | |
React.render(<TodoList items={allItems} />, document.getElementById('example')); |
This comment has been minimized.
This comment has been minimized.
Same app in Vue.js: No components: Components: |
This comment has been minimized.
This comment has been minimized.
Thank u |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Running example http://jsfiddle.net/caike/vh1s3y3f/1/