Written by Anonymous
<!DOCTYPE html> <html> <head> <title>react!</title> <script src="https://unpkg.com/[email protected]/dist/react.js"></script> <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="https://npmcdn.com/[email protected]/umd/ReactRouter.min.js"></script> <style> body { padding: 50px; background-color: #66CCFF; font-family: sans-serif; } .todoListMain .header input { padding: 10px; font-size: 16px; border: 2px solid #FFF; } .todoListMain .header button { padding: 10px; font-size: 16px; margin: 10px; background-color: #0066FF; color: #FFF; border: 2px solid #0066FF; } .todoListMain .header button:hover { background-color: #003399; border: 2px solid #003399; cursor: pointer; } .todoListMain .theList { list-style: none; padding-left: 0; width: 255px; } .todoListMain .theList li { color: #333; background-color: rgba(255,255,255,.5); padding: 15px; margin-bottom: 15px; border-radius: 5px; } </style> </head> <body> <div id="container"></div> <script type="text/babel"> var destination = document.querySelector("#container"); var TodoItems = React.createClass({ render: function(){ var todoEntries = this.props.entries; function createTasks(item) { return <li key={item.key}>{item.text}</li> } var listItems = todoEntries.map(createTasks); return ( <ul className="theList"> {listItems} </ul> ); } }); var TodoList = React.createClass({ getInitialState: function() { return ( items: [] ); }, addItem: function(e) { var itemArray = this.state.items; itemArray.push( { text: this._inputElement.value, key: Date.now() } ); this.setState({ items: itemArray }); this._inputElement.value = ""; e.preventDefault(); }, render: function() { return ( <div className="todoListMain"> <div className="header"> <form onSubmit={this.addItem}> <input ref={(a) => this._inputElement = a} placeholder="enter task"></input> <button type="submit">add</button> </form> </div> <TodoItems entries={this.state.items}/> </div> ); } }); ReactDOM.render( <div> <TodoList/> </div>, destination ); </script> </body> </html>