React

by Jaikrat Tariyal

HTML

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
window.addEventListener('mousedown', function(e) {
  document.body.classList.add('mouse-navigation');
  document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    document.body.classList.add('kbd-navigation');
    document.body.classList.remove('mouse-navigation');
  }
});
window.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
    e.preventDefault();
  }
});
window.onerror = function(message, source, line, col, error) {
  var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
  errors.textContent += text + '\n';
  errors.style.display = '';
};
console.error = (function(old) {
  return function error() {
    errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
    errors.style.display = '';
    old.apply(this, arguments);
  }
})(console.error);
</script>

CSS

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

React

class Square extends React.Component {
 
  render() {
   // console.log("In Square render")
    return (<p>{this.props.name}</p>);
  }
  componentDidMount(){
   // console.log("In componentDidMount of Square")
  }
}


class Game extends React.Component {
  constructor(props) {
    super(props);
    console.log("In Game Constructor")
    this.state        = { name: '' } ;
    this.handleChange = this.handleChange.bind(this);
  }
  componentWillMount(){
    console.log("In componentWillMount")
  }
  componentDidMount(){
    console.log("In componentDidMount of Game")
  }
  componentWillReceiveProps(nxtprop) {
    console.log("In componentWillReceiveProps" + nxtprop);
  }  
  shouldComponentUpdate(nextProps, nextState){
    //console.log(nextState.name);
   /// console.log(Object.values(nextProps));
    console.log("In shouldComponentUpdate: ");
    return true;
  }
  componentWillUpdate() {
    console.log("In componentWillUpdate: ");
  }
  componentDidUpdate(prevProps, prevState) {
    console.log("In componentDidUpdate: ");
  }
  componentWillUnmount() {
    console.log("In componentWillUnmount: ");
  }
  handleChange(event) {
    this.setState({ name: event.currentTarget.value });    
  }
  render() {
    console.log("In render")
    return (
      <div className="game">
        <input type="text" onChange={ this.handleChange } />
        <Square name={ this.state.name } />
      </div>
    );
  }
}

ReactDOM.render(<Game />,document.getElementById('root') );