SO41667346

by mrlew

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<div id="app"></div>

CSS

.board {
  display: inline-block;
  width: auto;
  background-color: #000;
}

.board .board-row {
  width: 100%;
  display: flex;  
}

.board .board-row:last-child .board-cell {
  margin-bottom: 20px;
}

.board .board-row .board-cell {
  display: flex;
  align-items: center;
  justify-content: center;  
  background-color: #fff;  
  height: 50px;
  width: 50px;
  margin: 20px 0 0 20px;
  cursor: pointer;
 
}

.board .board-row .board-cell:last-child {
  margin-right: 20px;  
}

.board .board-row .board-cell.selected {
  background-color: #aaa;
}

.board .board-row .board-cell .board-cell-content {
  font-family: Arial, Helvetica, sans-serif;
  color: #0000dd;
  font-size: 20pt;
  font-weight: 600;
}

Babel + JSX

class Square extends React.Component {
	constructor(props) {
  	super(props)
    this.state = { selected: false }
  }
  
  onClick(e) {
  	this.setState({ selected: !this.state.selected })
  }
  
  render() {
  	return <div className="board-cell" onClick={this.onClick.bind(this)}>
       <span className="board-cell-content">{this.state.selected ? "X" : null}</span>
  	</div>
  }
}

class Board extends React.Component { 

  renderSquare(i) {
      return <div>x</div>;
  }


  render(){    
	
  	return (
    	<div className="board">
      {
      	[1,2,3].map( (row) => {
				 return <div key={row} className="board-row">
            {
            	[1,2,3].map( (col) => {
          			return <Square key={col}></Square>
          		})
            }
            </div>

      	})
      }
      </div>
    )

  }

}



ReactDOM.render( <Board />, document.getElementById('app') );