JSFiddle - React, Tailwind, and code Playground

by monjer

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var SubComponent = React.createClass({
    render:function(){
        return (
            <div><h1>SubComponent to be unmouned</h1></div>
        );
    },
    componentWillMount:function(){
        console.log("componentWillMount");
    },
    componentDidMount:function(){
        console.log("componentDidMount");
    },
    componentWillUnmount:function(){
        console.log("componentWillUnmount");
    }
    
});

var App = React.createClass({
    
    unmountSubComponent:function(){
        var node = this.subCom.getDOMNode();
        var container = node.parentNode;
        React.unmountComponentAtNode(container);
        container.parentNode.removeChild(container)
    },
    
    componentDidMount:function(){
        var el = this.getDOMNode();
        var container = el.querySelector('.container');
        this.subCom = React.render(<SubComponent/> ,  container);
    },
    
    render:function(){
        
        return (
            <div className="app">
            <div className="container"></div>
            <button onClick={this.unmountSubComponent}>Unmount</button>
            </div>
        )
    }
});

React.render(<App/> , document.body);