React官網里有很詳細的教程 ，也有在線沙盒，但是寫的東一榔頭西一棒槌的，不適合新手入門，所以我還是建議大家可以先去看看阮一峰大神的React博客或者某硅谷的網課，這個網課講的很詳細，甚至詳細到有些啰嗦，我大概是用20天把網課看完，然后再看的官方檔案，把這個小游戲做一下，我這里是采用在本地完成這個專案，

游戲預覽：

準備作業：

• 確保你安裝了較新版本的 Node.js，
• 按照 Create React App 安裝指南創建一個新的專案

npx create-react-app my-app

• 洗掉掉新專案中 src/ 檔案夾下的所有檔案，

注意：

不要洗掉整個 src 檔案夾，洗掉里面的源檔案，我們會在接下來的步驟中使用示例代碼替換默認源檔案，

1. 在 src/ 檔案夾中創建一個名為 index.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;
   }
   

2. 在 src/ 檔案夾下創建一個名為 index.js 的檔案，并拷貝

   import React from "react";
   import ReactDOM from "react-dom";
   import "./index.css";
   
   //每個小方塊組件 點擊顯示棋子
   function Square(props) {
     return (
       <button className="square" onClick={props.onClick}>
         {props.value}
       </button>
     );
   }
   //大方塊組件
   class Board extends React.Component {
     renderSquare(i) {
       return (
         <Square
           value={this.props.squares[i]}
           onClick={() => this.props.onClick(i)}
         />
       );
     }
   
     render() {
       return (
         <div>
           <div className="board-row">
             {this.renderSquare(0)}
             {this.renderSquare(1)}
             {this.renderSquare(2)}
           </div>
           <div className="board-row">
             {this.renderSquare(3)}
             {this.renderSquare(4)}
             {this.renderSquare(5)}
           </div>
           <div className="board-row">
             {this.renderSquare(6)}
             {this.renderSquare(7)}
             {this.renderSquare(8)}
           </div>
         </div>
       );
     }
   }
   
   //整個游戲組件
   class Game extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         //初始化歷史記錄 棋盤上都是空的
         history: [
           {
             squares: Array(9).fill(null),
           },
         ],
         stepNumber: 0, //游戲最開始步數為0
         xIsNext: true, //判斷下一個落子是O還是X
       };
     }
   
     handleClick(i) {
       const history = this.state.history.slice(0, this.state.stepNumber + 1);
       //使當前落子始終是最新落子
       const current = history[history.length - 1];
       const squares = current.squares.slice();
       //當有玩家勝出時，或者某個 Square 已經被填充時該函式不做任何處理直接回傳
       if (calculateWinner(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,
       });
     }
     //跳轉
     jumpTo(step) {
       this.setState({
         stepNumber: step,
         xIsNext: step % 2 === 0,
       });
     }
   
     render() {
       const history = this.state.history;
       const current = history[this.state.stepNumber];
       const winner = calculateWinner(current.squares);
       //map() 方法回傳一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理后的值
       const moves = history.map((step, move) => {
         //這里的move是索引值
         const desc = move ? "Go to move #" + move : "Go to game start";
         return (
           <li key={move}>
             <button onClick={() => this.jumpTo(move)}>{desc}</button>
           </li>
         );
       });
   
       let status;
       if (winner) {
         status = "Winner: " + winner;
       } else {
         status = "Next player: " + (this.state.xIsNext ? "X" : "O");
       }
   
       return (
         <div className="game">
           <div className="game-board">
             <Board
               squares={current.squares}
               onClick={(i) => this.handleClick(i)}
             />
           </div>
           <div className="game-info">
             <div>{status}</div>
             <ol>{moves}</ol>
           </div>
         </div>
       );
     }
   }
   
   // ========================================
   
   ReactDOM.render(<Game />, document.getElementById("root"));
   
   //判斷Winner
   function calculateWinner(squares) {
     const lines = [
       [0, 1, 2],
       [3, 4, 5],
       [6, 7, 8],
       [0, 3, 6],
       [1, 4, 7],
       [2, 5, 8],
       [0, 4, 8],
       [2, 4, 6],
     ];
     for (let i = 0; i < lines.length; i++) {
       const [a, b, c] = lines[i];
       if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
         return squares[a];
       }
     }
     return null;
   }
   

3. 拷貝以下三行代碼到 src/ 檔案夾下的 index.js 檔案的頂部：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

現在，在專案檔案夾下執行 npm start 命令，然后在瀏覽器訪問 http://localhost:3000，這樣你就可以在瀏覽器中看見一個空的井字棋的棋盤了，