​

const FlexItem = (props)=>{

  return( 

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

                   'display':'flex',

                   'alignItems':'center',

                   'justifyContent':'center',

                   'fontSize':'18px',

                   'color':'white',

                   'margin':'10px 5px',

                   'backgroundColor':props.backColor }} > 

       { props.children } 

     </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 {

  render() {

     return( 

       <FlexColumn>

          <FlexItem backColor="red"><div>Top</div></FlexItem>

         <FlexRow> 

           <FlexItem backColor="blue"><div>Left</div></FlexItem>

           <FlexItem backColor="purple"><div>Right</div></FlexItem>

         </FlexRow> 

          <FlexItem backColor="black"><div>Bottom</div></FlexItem>

       </FlexColumn>)

    }

}

​

​

​

ReactDOM.render(<MyComponent />, 

       document.getElementById('root'));