Skip to content

Instantly share code, notes, and snippets.

@sadeqzadeh

sadeqzadeh/index.html

Forked from anonymous/index.html
Last active May 28, 2016
Embed
What would you like to do?
Functional Reactive Programming (FRP) with Bacon.js - example 4 - JS Bin source: http://jsbin.com/tagisubado
<!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>
// 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);
})
@sadeqzadeh

This comment has been minimized.

Copy link
Owner Author

@sadeqzadeh sadeqzadeh commented May 28, 2016

Functional Reactive Programming (FRP) with Bacon.js - example 3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment