Skip to content

Instantly share code, notes, and snippets.

Created May 28, 2016 22:42

Revisions

  1. @invalid-email-address Anonymous created this gist May 28, 2016.
    75 changes: 75 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    <!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>
    28 changes: 28 additions & 0 deletions jsbin.tagisubado.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    // 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);
    })