React training

by cirossmonteiro

HTML

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

CSS

div.square {
  display: inline-block;
  width: 20px;
  height: 20px;
  /*margin-bottom: -5px;*/
  /*margin: 0px;*/
}

React

class Square extends React.Component {
	constructor(props) {
    super(props);
    this.style = {
    	backgroundColor: 'yellow',
    	borderStyle: 'solid',
      borderWidth: 1
      }
  }
	render () {
		return (<div class = "square" style = {this.style}></div>);
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
  	var ret = [];
    for (var i = 0; i < this.props.m; i++) {
    	for (var j = 0; j < this.props.n; j++) {
      	ret.push(<Square />);
      }
      ret.push(<br />);
    }
    return ret;
  }
}

ReactDOM.render(<App m = "10" n = "10" />, document.querySelector("#app"));