JSFiddle - React, Tailwind, and code Playground

by neosoyn

HTML

<script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
<script src="http://fb.me/react-with-addons-0.11.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://fooo.fr/~vjeux/irc-logger/jquery-1.10.2.min.js"></script>

CSS

.src, .dest {
    margin: 10px;
    background: red;
}

JavaScript 1.7

/** @jsx React.DOM */
var Wrapper = React.createClass({
    getInitialState: function () {
        return {
            destStyle: {height: '0px'}
        };
    },
    componentDidMount: function () {
        var height = $(this.getDOMNode).find('.src').height();
        // this will make dom render 2 times, which make me uneasy.
        this.setState({
            destStyle: {height: height * 3 + 1}
        });
    },
    render: function() {
        return (
            <div>
                <div className='src'>height1</div>
                <div className='dest' style={this.state.destStyle}>height*3+1</div>
            </div>
        );
    }
});

React.renderComponent(<Wrapper />, document.body);