​

const FlexItem = (props)=>{

  return( 

     <div style={{ 'flex':1,

                   'display':'flex',

                   'alignItems':'center',

                   'justifyContent':'center',

                   'fontSize':'18px',

                   'color': props.count % 2 ? 'white' : 'yellow',

                   'margin':'10px 5px',

                   'backgroundColor':props.backColor }} > 

       { props.count % 2  ? props.children : props.count } 

     </div>

  )

}

​

/*//////////////////////////////////////////*/

const FlexColumn=(props)=>{

  return (<div style={{ 'display':'flex', 

                     'flexDirection':'column',

                     'width':'400px',

                     'height':'600px',

                     'border':'1px solid gray'}}>

             { props.children }  

          </div> )

}

​

const FlexRow=(props)=>{

  return (<div style={{'flex':4, 

                     'display':'flex', 

                     'flexDirection':'row',

                     'border':'none'}}>

             { props.children }  

          </div> )

}

​

​

class MyComponent extends React.Component {

  constructor(props) {

      super(props);

      this.state = {

         count:0

      };

  }

  tick() {

    this.setState({count: this.state.count + 1});

  }

  componentDidMount() {

    this.interval = setInterval(() => this.tick(), 1000);

  }

​

  componentWillUnmount() {

    clearInterval(this.interval);

  }

  render() {

    const { count } = this.state;

     return( 

       <FlexColumn>

          <FlexItem count={count} backColor="red"><div>Top</div></FlexItem>

         <FlexRow> 

           <FlexItem count={count} backColor="blue"><div>Left</div></FlexItem>

           <FlexItem  count={count} backColor="purple"><div>Right</div></FlexItem>

         </FlexRow> 

          <FlexItem count={count} backColor="black"><div>Bottom</div></FlexItem>

       </FlexColumn>)

    }

}

​

​

​

ReactDOM.render(<MyComponent />, 

       document.getElementById('root'));