React

by samur3

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

.container {
    border: 1px solid black;
  	height: 150px;
  	width: 150px;
}

input {
  margin-right: 5px;
}

.hide{
  visibility: hidden;
}

.show{
  visibility: visible;
}

React

this.store = {};  
   
function getMountNode(uid) {
    if (!this.store[uid]) {
      store[uid] = {
        mountNode: document.createElement('div'),
        inUse: true
      };
    } else {
      this.store[uid].inUse = true;
    }
    return this.store[uid].mountNode;
  }

function removeMountNode(uid) {
    const record = this.store[uid];
    record.inUse = false;

    setTimeout(() => {
      if (!this.store[uid].inUse) {
        ReactDOM.unmountComponentAtNode(this.store[uid].mountNode);
        delete this.store[uid];
      }
    }, 0);
  }
  
class Reparentable extends React.Component {
  /*static propTypes = {
    uid: PropTypes.string.isRequired,
    children: PropTypes.element.isRequired
  }*/
  constructor(props){
  	super(props);
    //this.state = {showContainer: this.props.showContainer}
  }

  componentDidMount() {
    const mountNode = getMountNode(this.props.uid);
    this.el.appendChild(mountNode);

    this.renderChildrenIntoNode(mountNode);
  }

  componentDidUpdate() {
    const mountNode = getMountNode(this.props.uid);
    this.renderChildrenIntoNode(mountNode);
  }

  componentWillUnmount() {
    removeMountNode(this.props.uid);
  }

  renderChildrenIntoNode(node) {
    // We use this instead of `render` because this also handles
    // passing the context
    ReactDOM.unstable_renderSubtreeIntoContainer(this, this.props.children, node);
  }

  render() {
    return (<div ref={(el) => { this.el = el; }}></div>);
  }
}

//<Reparentable uid="1" showContainer="this.state.showContainer">
//          <Counter />
        //</Reparentable>

//this.props.children.map((child, idx) => (
  //<Reparentable uid={idx}>{child}</Reparentable>
//));

class Counter extends React.Component{
	constructor(props) {
  	super(props);    
    this.inc = this.inc.bind(this);
    this.dec = this.dec.bind(this);
    this.state = {counter: 0};
  }
  
  inc() {
    this.setState({counter: this.state.counter + 1});
  }
  
  dec(){
  	this.setState({counter:...