1 function Square(props) {
3 <button className="square" onClick={props.onClick}>
9 class Board extends React.Component {
13 value={this.props.squares[i]}
14 onClick={() => this.props.onClick(i)}
22 <div className="board-row">
23 {this.renderSquare(0)}
24 {this.renderSquare(1)}
25 {this.renderSquare(2)}
27 <div className="board-row">
28 {this.renderSquare(3)}
29 {this.renderSquare(4)}
30 {this.renderSquare(5)}
32 <div className="board-row">
33 {this.renderSquare(6)}
34 {this.renderSquare(7)}
35 {this.renderSquare(8)}
42 class Game extends React.Component {
48 squares: Array(9).fill(null)
57 const history = this.state.history.slice(0, this.state.stepNumber + 1);
58 const current = history[history.length - 1];
59 const squares = current.squares.slice();
60 if (calculateWinner(squares) || squares[i]) {
63 squares[i] = this.state.xIsNext ? "X" : "O";
65 history: history.concat([
70 stepNumber: history.length,
71 xIsNext: !this.state.xIsNext
78 xIsNext: (step % 2) === 0
83 const history = this.state.history;
84 const current = history[this.state.stepNumber];
85 const winner = calculateWinner(current.squares);
87 const moves = history.map((step, move) => {
89 'Go to move #' + move :
93 <button onClick={() => this.jumpTo(move)}>{desc}</button>
100 status = "Winner: " + winner;
102 status = "Next player: " + (this.state.xIsNext ? "X" : "O");
106 <div className="game">
107 <div className="game-board">
109 squares={current.squares}
110 onClick={i => this.handleClick(i)}
113 <div className="game-info">
122 // ========================================
124 ReactDOM.render(<Game />, document.getElementById("tictactoe"));
126 function calculateWinner(squares) {
137 for (let i = 0; i < lines.length; i++) {
138 const [a, b, c] = lines[i];
139 if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {