Skip to content

Instantly share code, notes, and snippets.

@leebyron

leebyron/index.html

Created January 14, 2015 00:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leebyron/2ddac694be896dff55b7 to your computer and use it in GitHub Desktop.
Save leebyron/2ddac694be896dff55b7 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({displayName: 'TodoApp',
getInitialState: function () {
return { todos: [] }
},
render: function () {
return React.createElement("div", null,
React.createElement("h1", null, "TODO"),
React.createElement(TodoList, {todos: this.state.todos}),
React.createElement(TodoInput, {onNewTodo: this.addTodo})
)
},
addTodo: function (todo) {
this.setState({ todos: this.state.todos.concat(todo) })
}
});
var TodoList = React.createClass({displayName: 'TodoList',
render: function () {
return React.createElement("ul", null,
this.props.todos.map(function (todo) {
return React.createElement(TodoItem, {label: todo})
})
)
}
});
var TodoItem = React.createClass({displayName: 'TodoItem',
getInitialState: function () {
return { completed: false }
},
render: function () {
return React.createElement("li", {onClick: this.toggle},
this.state.completed ?
React.createElement("s", null, this.props.label) :
this.props.label
)
},
toggle: function () {
this.setState({ completed: !this.state.completed });
}
});
var TodoInput = React.createClass({displayName: 'TodoInput',
getInitialState: function () {
return { text: "" }
},
render: function () {
return React.createElement("div", null,
React.createElement("input", {value: this.state.text,
onChange: this.handleChangeText}),
React.createElement("button", {onClick: this.clickAdd,
disabled: this.state.text === ""},
"Add"
)
)
},
handleChangeText: function (event) {
this.setState({ text: event.target.value });
},
clickAdd: function () {
this.props.onNewTodo(this.state.text);
this.setState({ text: "" });
}
});
React.render(
React.createElement(TodoApp, null),
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({displayName: 'TodoApp',
getInitialState: function () {
return { todos: [] }
},
render: function () {
return React.createElement("div", null,
React.createElement("h1", null, "TODO"),
React.createElement(TodoList, {todos: this.state.todos}),
React.createElement(TodoInput, {onNewTodo: this.addTodo})
)
},
addTodo: function (todo) {
this.setState({ todos: this.state.todos.concat(todo) })
}
});
var TodoList = React.createClass({displayName: 'TodoList',
render: function () {
return React.createElement("ul", null,
this.props.todos.map(function (todo) {
return React.createElement(TodoItem, {label: todo})
})
)
}
});
var TodoItem = React.createClass({displayName: 'TodoItem',
getInitialState: function () {
return { completed: false }
},
render: function () {
return React.createElement("li", {onClick: this.toggle},
this.state.completed ?
React.createElement("s", null, this.props.label) :
this.props.label
)
},
toggle: function () {
this.setState({ completed: !this.state.completed });
}
});
var TodoInput = React.createClass({displayName: 'TodoInput',
getInitialState: function () {
return { text: "" }
},
render: function () {
return React.createElement("div", null,
React.createElement("input", {value: this.state.text,
onChange: this.handleChangeText}),
React.createElement("button", {onClick: this.clickAdd,
disabled: this.state.text === ""},
"Add"
)
)
},
handleChangeText: function (event) {
this.setState({ text: event.target.value });
},
clickAdd: function () {
this.props.onNewTodo(this.state.text);
this.setState({ text: "" });
}
});
React.render(
React.createElement(TodoApp, null),
document.documentElement
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment