Tutorial: Tic-Tac-Toe
在這個教學中，你會打造一個簡易的井字遊戲，透過這個教學，你會學到可以用在任何React App的基本概念，也會對Reacr有更深的了解。
小提醒：
這篇是適合給想透過實作學習React的人使用，如果想按部就班的學習每個觀念，可以從Describing the UI開始。
這篇教學會區分成幾個部分
- Setup for the tutorial會給你一個這個教學的起始點去練習
- Overview會教你React的基礎知識：元件（components）, 參數（props）, 和狀態（state）
- Completing the game會教你React開發常用的技巧
- Adding time travel會帶你認識深入了解React的特點
What are you building?
這個教學會帶你完成一個互動式的井字遊戲，完成後的示範在底下。
不用擔心看不懂或是對語法不熟，這個教學的目標就是帶領你認識React和語法。
在教學開始前可以試玩上面的井字遊戲，你會注意到遊戲的右邊有一排數字列表，隨著遊戲進行會跟著紀錄遊戲上的每一步。
一但完成遊戲後，繼續往下滑，即將開始簡單的教學，下個步驟就是為打造遊戲做開發環境準備。
Setup for the tutorial
你可以在底下的線上程式編輯器的右上角按下fork，會打開一個CodeSandBox的網頁，可以讓你在瀏覽器上預覽你編輯的程式碼。
筆記區
你也可以在你的電腦上進行，需要做以下的準備工作
1.安裝Node.js
2.打開你剛剛的CodeSandBox，在左上角有個menu按鈕，點開後選擇 file>Export to ZIP ，將檔案下載下來。
3.解壓縮檔案，打開終端機，cd到你解壓縮的資料夾
4.在終端機輸入 npm install 安裝 dependencies
5.在終端機輸入 npm start 開啟本機伺服器，可以跟著指示看程式碼如何在瀏覽器運行
如果你卡住了，可以先試試線上程式編輯器，之後在嘗試電腦開發環境設定。
Overview
現在你已經準備好了，可以開始來快速認識React
Inspecting the starter code
你會在CodeSandBox看到三個主要區域
- 左邊的檔案區有
App.js,index.js,styles.css還有一個public資料 - 程式碼編輯的區域
- 看到你的程式碼如何運作的瀏覽器畫面
App.js是你在檔案選擇區的檔案，裡面的內容會呈現在程式碼編輯區
瀏覽器畫面會看到一個中間有X的正方形
現在我們來看看檔案裡的的程式碼
App.js
App.js的程式碼創造了一個元件。在React，使用者介面（user interface）是由元件建構的，而每個元件是由一段可重複使用的程式碼所組成。應用程式的使用者介面（UI）元素會被元件轉譯、管理與更新。
第一行定義了ㄧ個Squre函式，export 在JavaScript是用來讓函式可以在這個檔案以外被重複使用的用法。default是用來讓其他檔案分辨主要函式的位置。
第二行回傳了一個按鈕，return在JavaScript是表示函式之後會回傳一個值。<button> 是一個JSX元素，JSX元素是結合JavaScript 程式碼和 HTML 標籤來呈現畫面。classsName=”squre”是按鈕的屬性或是參數，用來告訴CSS如何調整按鈕樣式。X是在按鈕裡的文字，</button>用來表示按鈕這個JSX元素不會被其他程式碼影響。
styles.css
在CodeSandBox的檔案區點開styles.css ，這個檔案定義了你的React應用程式的樣式。前兩個CSS選擇器 * and body定義了大範圍的樣式，square 選擇器則是定義任何包含className 屬性的元件樣式。在App.js 裡的正方形元件（component）會和定義這些樣式的程式碼互相搭配。
index.js
在CodeSandBox的檔案區點開 index.js ，在這個教學裡都不需要去編輯這個檔案，不過他是你在App.js創造的元件和瀏覽器之間的橋樑。
1–5行程式碼已具備所有必要的元素
- React
- 能和瀏覽器溝通的React函式庫
- 元件的樣式
- 你在
App.js創造的元件
Building the board
讓我們回到App.js，接下來的教學都會著重在這裡。
現在正方形只有一個，但你需要九個，如果你只是嘗試複製貼上正方形，想要創造第二個正方形的話，會發現底下的錯誤訊息。
React元件需要回個一個單一的JSX元素，而不是多個相鄰的JSX元素，像是兩個按鈕。要解決這個錯誤訊息，你需要一組標籤 (<> and </>)去包住多個相鄰的JSX元素，像是底下這樣。
現在你有兩個正方形了
再來你只需要複製貼上幾次，讓九個正方形出現。
糟糕，現在正方形全部都在一直線上，而不是在你需要的網格上。你需要使用 div把正方形分成三組變成三行，然後增加CSS屬性。再來還需要把每一個正方形編號，來確定你能辨認每個正方形的位置。
在App.js檔案，更新完正方形元件後，會像底下這樣：
className屬性有board-row的divs樣式會被styles.css 的CSS定義。現在你獲得一個屬於你的tic-tac-toe board：
不過有個問題，雖然你的元件叫做Square，但現在已經不是了，要改名成 Board:
這時候你的程式碼會看起來像是這樣。
小提醒
在這個教學中使用複製貼上是可以的，不過如果你準備好接受多一點挑戰，會建議你複製你親手編寫的程式碼。
Passing data through props
接下來會需要改變正方形的值，讓使用者點選的空格的時候變成X。到目前為止，你需要複製貼上程式碼讓正方形可以變成九宮格，不過React的元件架構可以讓你打造可重複使用的元件，避免讓複製的程式碼雜亂。
首先，要複製第一行定義第一個正方形的程式碼 (<button className="square">1</button>) 讓你的 Board 元件變成Square 元件。
接下來使用JSX語法讓Square 元件替換原本的(<button className="square">1</button>)，來更新Board 元件。
特別要注意跟div 不一樣的地方，Board 和Square 元件，開頭都要大寫。
糟糕，現在上面的數字跟之前不一樣了，全部都是1。 你會需要使用參數（props）去傳遞數值，從父元件（Board 元件）傳遞到每一個子元件（Square元件）裡。
更新Square元件可以接收從Board 元件傳遞的value參數。
function Square({ value })表示Square元件可以傳遞value參數。
現在可以在每一個正方形使用value參來替代數字1，會長這樣：
但好像跟我們要的有點落差
你想要從元件轉譯JavaScript的value變數，而不是英文單詞“value”。為了要讓JSX可以使用JavaScript語法，你需要一個括號包住value變數。
現在，你會看到一個空的九宮格：
原因是Board 元件並不會傳遞value參數到每一個Square 元件，想解決這個問題你可以增加value參數在Board 元件裡的Square 元件上。
現在你應該可以看到原本的數字出現了
更新過的程式碼會長這樣
Making an interactive component
讓我們在Square 元件上，當點擊他的時候會出現X。在Square 元件裡面宣告一個handleClick 函式，然後，在Square 元件的button JSX元素裡增加一個 onClick參數。
如果你現在點擊正方形，應該會在CodeSandbox的瀏覽器底部，console 視窗看到一個 "clicked!"一直按就會一直看到"clicked!"，但重複按不會有很多行訊息，只會在第一行"clicked!"上面增加數量。
小提醒
如果在這個教學中使用自己的電腦開發環境，你需要打開瀏覽器的console視窗。舉例來說，你使用Chrome瀏覽器的話，可以按Shift + Ctrl + J (on Windows/Linux) or Option + ⌘ + J (on macOS)開啟console視窗。
接下來，會希望Square 元件記得被點擊過，然後顯示X。要記得事情，元件會使用裝態（state）。
React提供了特別的函式叫做 useState ，這個函式可以呼叫他來記得事情。讓我們來儲存Square 最近的值到狀態裡，當Square被點擊的時候，這個值就會改變。
在檔案的最上面匯入useState，移除Square 元件裡的value參數，並在Square 元件的第一行增加 useState，useState會回傳一個value狀態變數。
value是用來儲存值 setValue是一個函式用來改變值，useState傳入 null是用來代表狀態參數的初始值。因此在這裡的value值等於null。
因為Square 元件已經不再接受參數（props），你需要移除所有Square 元件裡的value參數。
現在需要調整一下，在點擊Square元件的時候顯示X，要將console.log("clicked!"); 換成 setValue('X');。
現在Square 元件會長這樣。
透過 onClick 呼叫 set 函式，會告訴 React每當<button> 被點擊的時候，重新轉譯Square 元件，如此一來，你會看到遊戲板上出現X了，點擊方框，X就會出現。
每一個方框都有自己的狀態，value獨立的存在每個方框裡。當你呼叫set 函式，React會自動更新子元件。
當你做了以上這些調整後，程式碼會長這樣。
React Developer Tools
React開發工具可以協助你檢查React元件的參數(props)跟狀態（state），可以在CodeSandBox的瀏覽器畫面最下面找到他。
React開發工具的左上角可以用來觀察特定的元件。
小提醒
如果使用自己的電腦開發環境，React開發工具可以在瀏覽器的擴充套件裡找到。安裝以後會出現在瀏覽器視窗的開發工具裡。
