React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://rawgit.com/danawoodman/react-fontawesome/master/lib/index.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="main-container"></div>

CSS

[name="window-close-o"] {
    padding: 5px;
    background-color: #ddf;
}

JavaScript 1.7

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      show:true,
    };
  }

  closeComponent(){
      this.setState({ show: false });
  }

  componentDidMount() {
  }

  componentWillUnmount() {
    clearInterval(this.state);
  }

  render() {
  if (!this.state.show) return null;
    return (
      <div className="MyComponent">
        <h1>Mostrar componente {this.props.numero}</h1>
        <div name="window-close-o" onClick={this.closeComponent.bind(this)}>fechar</div>
      </div>
    );
  }

}

class ComponentFather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "Adicionar Categoria",
      key: 0,
      matchs: [],
    };
  }

  componentDidMount(){

  }

  componentWillUnmount(){
    clearInterval(this.state);
  }

  buttonClicked(){
    var mat = this.state.matchs;
    this.state.key ++;
    mat.push(<Match key={this.state.key}/>);
    console.log(mat);
    this.setState({
      matchs: mat
    });
  }

  render() {
    return (
      <div className="ComponentFather">
        <h1>Events Information</h1>
        <MyComponent numero={1} />
        <MyComponent numero={2} />
        <MyComponent numero={3} />
      </div>
    );
  }
}

ReactDOM.render(
  <ComponentFather />,
  document.getElementById('main-container')
);