React Example 2

/* EXAMPLE 2 */

//Parent component
class App extends React.Component {
  
  render() {
    return <div>
            <First/>
            <Second />
           </div>;
  }
}

//Child 1
class First extends React.Component {
  click(){
    actions.clicked();
  }
  render() {
    return <div onClick={click}>FIRST</div>;
  }
}

//Child 2
class Second extends React.Component {
  constructor(props){
    super(props)
    this.state = { clicked: true;}
  }
  componentWillMount(){
    
  }
  render() {
    return <div>SECOND {clicked ? 'CLICKED' : 'OHOH'}</div>;
  }
  
  AppDispatcher.register(function(action)){
    switch(action.type){
      case 'clickedAction':
        this.setState({clicked: !this.state.clicked})
        break;
    }
  }
}


React.render(<App />, document.getElementById('parentToChild'));



//actions.js
actions = {
  clicked: function(){
    AppDispatcher.dispatch({
      actionType: 'clickedAction',
    });
  },
  
  //anotherActions
}

//Dispatcher.js
let AppDispatcher = new Dispatcher()