这是一篇记录，把 React 的官网的入门教程过一遍，这个项目非常好，官网最后没有贴出最终的代码，我把最后操作成功的代码贴下来了，可以多看看琢磨。

一、React 代码

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import './index.css'
  5. function Square(props) {
  6.   return (
  7.     <button className="square" onClick={props.onClick}>
  8.       {props.value}
  9.     </button>
  10.   )
  11. }
  13. class Board extends React.Component {
  14.   renderSquare(i) {
  15.     return (
  16.       <Square
  17.         value={this.props.squares[i]}
  18.         onClick={() => {
  19.           this.props.onClick(i)
  20.         }}
  21.       />
  22.     )
  23.   }
  25.   render() {
  26.     return (
  27.       <div>
  28.         <div className="board-row">
  29.           {this.renderSquare(0)}
  30.           {this.renderSquare(1)}
  31.           {this.renderSquare(2)}
  32.         </div>
  33.         <div className="board-row">
  34.           {this.renderSquare(3)}
  35.           {this.renderSquare(4)}
  36.           {this.renderSquare(5)}
  37.         </div>
  38.         <div className="board-row">
  39.           {this.renderSquare(6)}
  40.           {this.renderSquare(7)}
  41.           {this.renderSquare(8)}
  42.         </div>
  43.       </div>
  44.     )
  45.   }
  46. }
  48. class Game extends React.Component {
  49.   constructor(props) {
  50.     super(props)
  51.     this.state = {
  52.       history: [
  53.         {
  54.           squares: Array(9).fill(null)
  55.         }
  56.       ],
  57.       xIsNext: true,
  58.       stepNumber: 0
  59.     }
  60.   }
  62.   handleClick(i) {
  63.     const history = this.state.history.slice(0, this.state.stepNumber + 1)
  64.     const current = history[history.length - 1]
  65.     const squares = current.squares.slice()
  66.     if (calculateWinner(squares) || squares[i]) {
  67.       return
  68.     }
  69.     squares[i] = this.state.xIsNext ? 'X' : 'O'
  70.     this.setState({
  71.       history: history.concat([
  72.         {
  73.           squares: squares
  74.         }
  75.       ]),
  76.       stepNumber: history.length,
  77.       xIsNext: !this.state.xIsNext
  78.     })
  79.   }
  81.   jumpTo(step) {
  82.     this.setState({
  83.       stepNumber: step,
  84.       xIsNext: step % 2 === 0
  85.     })
  86.   }
  88.   render() {
  89.     const history = this.state.history
  90.     const current = history[this.state.stepNumber]
  91.     const winner = calculateWinner(current.squares)
  92.     const moves = history.map((step, move) => {
  93.       const desc = move ? 'Go to move #' + move : 'Go to game start'
  94.       return (
  95.         <li key={move}>
  96.           <button onClick={() => this.jumpTo(move)}>{desc}</button>
  97.         </li>
  98.       )
  99.     })
  100.     let status
  102.     if (winner) {
  103.       status = 'Winner' + winner
  104.     } else {
  105.       status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O')
  106.     }
  107.     return (
  108.       <div className="game">
  109.         <div className="game-board">
  110.           <Board
  111.             onClick={(i) => {
  112.               this.handleClick(i)
  113.             }}
  114.             squares={current.squares}
  115.           />
  116.         </div>
  117.         <div className="game-info">
  118.           <div>{status}</div>
  119.           <ol>{moves}</ol>
  120.         </div>
  121.       </div>
  122.     )
  123.   }
  124. }
  126. // ========================================
  128. ReactDOM.render(<Game/>, document.getElementById('root'))
  130. function calculateWinner(squares) {
  131.   const lines = [
  132.     [0, 1, 2],
  133.     [3, 4, 5],
  134.     [6, 7, 8],
  135.     [0, 3, 6],
  136.     [1, 4, 7],
  137.     [2, 5, 8],
  138.     [0, 4, 8],
  139.     [2, 4, 6]
  140.   ]
  141.   for (let i = 0; i < lines.length; i++) {
  142.     const [a, b, c] = lines[i]
  143.     if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
  144.       return squares[a]
  145.     }
  146.   }
  147.   return null
  148. }

二、参考链接

认识 React：https://react.docschina.org/tutorial/tutorial.html#making-an-interactive-component