03-003-index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="http://fb.me/react-with-addons-0.11.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

  <title>Held you for a little while</title>
</head>

<body>
<!--    container node-->
  <div id="app"></div>
    
    <!--    container node-->
  <div id="dom"></div>
    
    
    <script type="text/jsx">
        /** @jsx React.DOM */
            var App = React.createClass({
                mixins: [React.addons.LinkedStateMixin],

                getInitialState: function(){
                    return {
                        payment: 0,
                        payment2: 0
                    };
                },

            render: function() {
                var total = parseInt(this.state.payment, 10) + parseInt(this.state.payment2, 10);
                return (
                    <div>
                        <Payment valueLink={this.linkState('payment')} />
                        <Payment valueLink={this.linkState('payment2')} />
                        {total}
                    </div>
                );
            }
        });

var Payment = React.createClass({
    render: function(){
        return this.transferPropsTo(
            <input type="text" />
        );
    }
});

React.renderComponent(
    <App />,
    document.getElementById('app')
);

    </script>
</body>

</html>