Skip to content

Instantly share code, notes, and snippets.

@leebyron

leebyron/index.html

Created January 14, 2015 00:53
Show Gist options
  • Save leebyron/4dc41d5d1775702259cb to your computer and use it in GitHub Desktop.
Save leebyron/4dc41d5d1775702259cb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
var TodoApp = React.createClass({
getInitialState: function () {
return { todos: [] }
},
render: function () {
return <div>
<h1>TODO</h1>
<TodoList todos={this.state.todos} />
<TodoInput onNewTodo={this.addTodo} />
</div>
},
addTodo: function (todo) {
this.setState({ todos: this.state.todos.concat(todo) })
}
});
var TodoList = React.createClass({
render: function () {
return <ul>
{this.props.todos.map(function (todo) {
return <TodoItem label={todo} />
})}
</ul>
}
});
var TodoItem = React.createClass({
getInitialState: function () {
return { completed: false }
},
render: function () {
return <li onClick={this.toggle}>
{this.state.completed ?
<s>{this.props.label}</s> :
this.props.label
}
</li>
},
toggle: function () {
this.setState({ completed: !this.state.completed });
}
});
var TodoInput = React.createClass({
getInitialState: function () {
return { text: "" }
},
render: function () {
return <div>
<input value={this.state.text}
onChange={this.handleChangeText} />
<button onClick={this.clickAdd}
disabled={this.state.text === ""}>
Add
</button>
</div>
},
handleChangeText: function (event) {
this.setState({ text: event.target.value });
},
clickAdd: function () {
this.props.onNewTodo(this.state.text);
this.setState({ text: "" });
}
});
React.render(
<TodoApp />,
document.documentElement
);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.12.0.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var TodoApp = React.createClass({
getInitialState: function () {
return { todos: [] }
},
render: function () {
return <div>
<h1>TODO</h1>
<TodoList todos={this.state.todos} />
<TodoInput onNewTodo={this.addTodo} />
</div>
},
addTodo: function (todo) {
this.setState({ todos: this.state.todos.concat(todo) })
}
});
var TodoList = React.createClass({
render: function () {
return <ul>
{this.props.todos.map(function (todo) {
return <TodoItem label={todo} />
})}
</ul>
}
});
var TodoItem = React.createClass({
getInitialState: function () {
return { completed: false }
},
render: function () {
return <li onClick={this.toggle}>
{this.state.completed ?
<s>{this.props.label}</s> :
this.props.label
}
</li>
},
toggle: function () {
this.setState({ completed: !this.state.completed });
}
});
var TodoInput = React.createClass({
getInitialState: function () {
return { text: "" }
},
render: function () {
return <div>
<input value={this.state.text}
onChange={this.handleChangeText} />
<button onClick={this.clickAdd}
disabled={this.state.text === ""}>
Add
</button>
</div>
},
handleChangeText: function (event) {
this.setState({ text: event.target.value });
},
clickAdd: function () {
this.props.onNewTodo(this.state.text);
this.setState({ text: "" });
}
});
React.render(
<TodoApp />,
document.documentElement
);</script></body>
</html>
Raw
jsbin.gexaruxatu.js
var TodoApp = React.createClass({
getInitialState: function () {
return { todos: [] }
},
render: function () {
return <div>
<h1>TODO</h1>
<TodoList todos={this.state.todos} />
<TodoInput onNewTodo={this.addTodo} />
</div>
},
addTodo: function (todo) {
this.setState({ todos: this.state.todos.concat(todo) })
}
});
var TodoList = React.createClass({
render: function () {
return <ul>
{this.props.todos.map(function (todo) {
return <TodoItem label={todo} />
})}
</ul>
}
});
var TodoItem = React.createClass({
getInitialState: function () {
return { completed: false }
},
render: function () {
return <li onClick={this.toggle}>
{this.state.completed ?
<s>{this.props.label}</s> :
this.props.label
}
</li>
},
toggle: function () {
this.setState({ completed: !this.state.completed });
}
});
var TodoInput = React.createClass({
getInitialState: function () {
return { text: "" }
},
render: function () {
return <div>
<input value={this.state.text}
onChange={this.handleChangeText} />
<button onClick={this.clickAdd}
disabled={this.state.text === ""}>
Add
</button>
</div>
},
handleChangeText: function (event) {
this.setState({ text: event.target.value });
},
clickAdd: function () {
this.props.onNewTodo(this.state.text);
this.setState({ text: "" });
}
});
React.render(
<TodoApp />,
document.documentElement
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment