React

by buckydroid

HTML

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

CSS

html,body {
    height: 100%!important;
}

.container {
    height: 100%;
    margin : 0px;
    padding: 0px;
}
.columnContainer {
    display: flex;
    height: 100%;

}

.leftContainer {
    height: 100%;
    flex : 1;
    margin: 10px;
    background-color: black;
}

.rightContainer {
    flex : 1;
    height: 800px;
    margin: 10px;
    background-color: black;
}

.middleContainer {
    flex : 2;
    height: 800px;
    margin: 10px;
    background-color: black;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    }
  }
  
  render() {
    return (
       <div className={'container'}>
        
        <div className={'columnContainer'}>
            <div className={'leftContainer'}>

            </div>
            <div className={'middleContainer'}>

            </div>
            <div className={'rightContainer'}>

            </div>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))