src/index.js
/**
   * Updates the state of the game when a square is clicked.
   *
   * @param {*} i - the square that is updated
   */
Updates the state of the game when a square is clicked.
@param {*} i - the square that is updated
Updates the state of the game when a square is clicked . @param { * } i - the square that is updated
handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (getWinner(squares) || squares[i]) return;
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }
handleClick ( i ) { const history = this . state . history . slice ( 0 , this . state . stepNumber + 1 ) ; const current = history [ history . length - 1 ] ; const squares = current . squares . slice ( ) ; if ( getWinner ( squares ) || squares [ i ] ) return ; squares [ i ] = this . state . xIsNext ? 'X' : 'O' ; this . setState ( { history : history . concat ( [ { squares : squares } ] ) , stepNumber : history . length , xIsNext : ! this . state . xIsNext } ) ; }
Updates the state of the game when a square is clicked.
Updates the state of the game when a square is clicked .
/**
     * When going back to a previous state, this ensures that all states after the selected one are discarded.
     */ /**
     * Uses a copy of the squares array rather than modifying the existing array.
     *
     * Immutability = replace the data with a new copy with the desired changes
     * Benefits of immutability:
     * -> complex features are easier to implement (e.g. ability to undo and redo previous moves)
     * -> keeping previous versions of the game's history intact (can reuse them later)
     * -> easier to detect changes in immutable objects
     * -> easy to determine when a component requires re-rendering (when changes are made)
     * -> helps you build pure components
     */ /**
     * If the game is finished or if the square is not empty, the click is ignored.
     */ /**
     * Ternary statement:
     * If xIsNext is true, set 'X', else set 'O'.
     */ /**
       * Updates the step number both for normal moves and when going back to a previous state.
       */ /**
       * At each turn, the player is changed ('X' or 'O').
       */