React Tutorial New

React official tutorial demo program

by Ouyang Chao

HTML

<title>React 06 Official Tutorial</title>

<!-- react core code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

<div id="container"></div>

CSS

.square{
  float: left;
  height:38px;
  width:38px;
  padding: 0px 0px;
  background-color: #fff;
  border: 1px solid #999;
  font-weight: bold;
  font-size: 24px;
  margin-right: -1px;
  margin-bottom: -1px;
}
.square{
  outline: none;
}
.board{
  float: left;
  width: 120px;
  height: 120px;
}

Babel + JSX

let Square = (props) => (
  <button className="square" onClick={props.handleClick}>
    {props.player}
  </button>
);

let Board = (props) => {
  const squares = props.squares.map((val, idx) => {
    return (
      <Square key={val + idx} player={val}
              handleClick={
                () => {
                  props.handleClick(idx);
                }
              }/>
    );
  });
  return (
    <div className="board">
      {squares}
    </div>
  );
}

class Game extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
    let curIsX = false;
    let history = [Array(9).fill(null)];
    let winner = null;
    let curStep = 1;
    this.state = {
      curIsX,
      history,
      winner,
      curStep,
    };
  }

  render() {
    const {curIsX, history, winner, curStep} = this.state;
    const boardState = history[curStep - 1];
    let historySteps = history.map((val, idx) => (
      <li key={idx}>
        <a href="javascript:;" onClick={() => {
          this.jumpTo(idx);
        }}>
          # {idx === 0 ? "Game Start" : `Step ${idx}`}
        </a>
      </li>
    ));
    let status = `Next Player: ${curIsX ? 'X' : 'O'}`;
    status = winner ? `Winner is ${winner}` : status;
    return (
      <div>
        <Board squares={boardState}
               handleClick={this.handleClick}/>
        <div style={{float: 'left'}}>
          <h5>{status}</h5>
          <ol style={{paddingLeft: 20}}>
            {historySteps}
          </ol>
        </div>
      </div>
    );
  }

  handleClick(index) {
    let {curIsX, history, winner, curStep} = this.state;
    if (curStep === 10 || winner !== null) {
      throw new Error('Game Over.');
      return;
    }
    let boardState = JSON.parse(JSON.stringify(history[curStep - 1]));
		if(boardState[index] != null){
		  return;
		}
    boardState[index] = curIsX ? 'X' : 'O';
    winner = Game.calcWinner(boardState);
    curIsX = !curIsX;
   ...