Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 28, 2016 22:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/95055f29c1d5a1067a8e955985dbab79 to your computer and use it in GitHub Desktop.
Save anonymous/95055f29c1d5a1067a8e955985dbab79 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/tagisubado
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://rawgit.com/baconjs/bacon.js/master/dist/Bacon.js"></script>
</head>
<body>
<script id="jsbin-javascript">
// BaconJS (store)
const nameBus = new Bacon.Bus()
const fullData = Bacon.combineTemplate({
name: nameBus.toProperty("")
})
// Event handlers (actions)
// this listener function is used below in the HelloWorld component whenever the text box changes
const buttonChange = (e) => {
nameBus.push(e.target.value)
}
// Function component (view)
// (react component)
const HelloWorld = (props) =>
(React.createElement("div", null,
React.createElement("h1", null, "Hello ", props.name),
React.createElement("input", {type: "text", onChange: buttonChange})
));
// Tie everything in a bow
// (arg) => {} is ES6 shorthand of a function
// the ... (spread) operator in ES6 passes all of the properties of the object to the react component
fullData.onValue((data) => {
ReactDOM.render(React.createElement(HelloWorld, React.__spread({}, data)), document.body);
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">// BaconJS (store)
const nameBus = new Bacon.Bus()
const fullData = Bacon.combineTemplate({
name: nameBus.toProperty("")
})
// Event handlers (actions)
// this listener function is used below in the HelloWorld component whenever the text box changes
const buttonChange = (e) => {
nameBus.push(e.target.value)
}
// Function component (view)
// (react component)
const HelloWorld = (props) =>
(<div>
<h1>Hello {props.name}</h1>
<input type="text" onChange={buttonChange} />
</div>);
// Tie everything in a bow
// (arg) => {} is ES6 shorthand of a function
// the ... (spread) operator in ES6 passes all of the properties of the object to the react component
fullData.onValue((data) => {
ReactDOM.render(<HelloWorld {...data} />, document.body);
})
</script></body>
</html>
Raw
jsbin.tagisubado.js
// BaconJS (store)
const nameBus = new Bacon.Bus()
const fullData = Bacon.combineTemplate({
name: nameBus.toProperty("")
})
// Event handlers (actions)
// this listener function is used below in the HelloWorld component whenever the text box changes
const buttonChange = (e) => {
nameBus.push(e.target.value)
}
// Function component (view)
// (react component)
const HelloWorld = (props) =>
(React.createElement("div", null,
React.createElement("h1", null, "Hello ", props.name),
React.createElement("input", {type: "text", onChange: buttonChange})
));
// Tie everything in a bow
// (arg) => {} is ES6 shorthand of a function
// the ... (spread) operator in ES6 passes all of the properties of the object to the react component
fullData.onValue((data) => {
ReactDOM.render(React.createElement(HelloWorld, React.__spread({}, data)), document.body);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment