Tutorial #9

chloewlin · 2019-02-12T11:34:31Z

I am working on tutorial now. This is a long article, so I want to submit part of my work for someone else to review and to ensure that you like my style.

I try to be as colloquial as possible. I hope readers can feel the energy behind the tutorial. Let me know what you guys think.

content/tutorial/tutorial.md

netlify · 2019-02-18T09:17:26Z

Deploy preview for zh-hant-reactjs ready!

Built with commit e3b5a18

https://deploy-preview-9--zh-hant-reactjs.netlify.com

bugtender

What a long page. Good Job 👍

bugtender · 2019-02-18T12:47:01Z

content/tutorial/tutorial.md


-We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor.
+我們推薦你跟著[這份指南](https://babeljs.io/docs/editors/)來設定你的編輯器中的語法亮高。


語法亮高 should be 語法高亮
I am confused with that because it looks like a word from zh-hans.
Maybe 語法上色 or 語法凸顯？

ref: https://zh.wikipedia.org/wiki/%E8%AA%9E%E6%B3%95%E7%AA%81%E9%A1%AF

bugtender · 2019-02-18T16:53:10Z

content/tutorial/tutorial.md


-We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.
+在這份學習指南中，我們會練習做一個小遊戲。**也許你會很想跳過這份指南，因為你不是遊戲開發者 -- 但請試著跟著做做看。** 在這份學習指南中，你所學到的技術是你做任何 React 應用程式的基礎，掌握基礎後會讓你對 React 有更深入的了解。


Suggested change

在這份學習指南中，我們會練習做一個小遊戲。**也許你會很想跳過這份指南，因為你不是遊戲開發者 -- 但請試著跟著做做看。** 在這份學習指南中，你所學到的技術是你做任何 React 應用程式的基礎，掌握基礎後會讓你對 React 有更深入的了解。

在這份學習指南中，我們會練習做一個小遊戲。**也許你會很想跳過這份指南，因為你不是遊戲開發者 -- 但請試著跟著做做看。**在這份學習指南中，你所學到的技術是你做任何 React 應用程式的基礎，掌握基礎後會讓你對 React 有更深入的了解。

bugtender · 2019-02-18T16:53:53Z

content/tutorial/tutorial.md


-You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+當你稍微了解這個圈圈叉叉小遊戲是怎麼玩的之後，你就可以把它關掉了。 在這份指南中，我們會從更簡單的模板開始。我們的下一步是進行設定以幫助你開始開發這個遊戲。


Suggested change

當你稍微了解這個圈圈叉叉小遊戲是怎麼玩的之後，你就可以把它關掉了。在這份指南中，我們會從更簡單的模板開始。我們的下一步是進行設定以幫助你開始開發這個遊戲。

當你稍微了解這個圈圈叉叉小遊戲是怎麼玩的之後，你就可以把它關掉了。在這份指南中，我們會從更簡單的模板開始。我們的下一步是進行設定以幫助你開始開發這個遊戲。

bugtender · 2019-02-18T16:54:05Z

content/tutorial/tutorial.md


-Let's fill the Square component with an "X" when we click it. 
-First, change the button tag that is returned from the Square component's `render()` function to this:
+讓我們在點擊 Square component 時，能在方格中填入ㄧ個 X。 


Suggested change

讓我們在點擊 Square component 時，能在方格中填入ㄧ個 X。

讓我們在點擊 Square component 時，能在方格中填入ㄧ個 X。

bugtender · 2019-02-18T16:54:16Z

content/tutorial/tutorial.md

@@ -260,13 +261,13 @@ If we click on a Square now, we should get an alert in our browser.
 >}
 >```
 >
->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. It only fires after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders.
+>請注意在 `onClick={() => alert('click')}`中，我們會把一個 *function* 做為 `onClick` 的 prop 往下傳。這個 function 只會在被點擊後觸發。 把 `() =>` 寫成 `onClick={alert('click')}` 是一個常見的錯誤，這會造成 component 在每次重新 render 時都會觸發 alert。


Suggested change

>請注意在 `onClick={() => alert('click')}`中，我們會把一個 *function* 做為 `onClick` 的 prop 往下傳。這個 function 只會在被點擊後觸發。把 `() =>` 寫成 `onClick={alert('click')}` 是一個常見的錯誤，這會造成 component 在每次重新 render 時都會觸發 alert。

>請注意在 `onClick={() => alert('click')}`中，我們會把一個 *function* 做為 `onClick` 的 prop 往下傳。這個 function 只會在被點擊後觸發。把 `() =>` 寫成 `onClick={alert('click')}` 是一個常見的錯誤，這會造成 component 在每次重新 render 時都會觸發 alert。

bugtender · 2019-02-18T16:54:34Z

content/tutorial/tutorial.md

-First, change the button tag that is returned from the Square component's `render()` function to this:
+讓我們在點擊 Square component 時，能在方格中填入ㄧ個 X。 
+
+首先，把從 Square component 的 `render()` 中回傳的按鈕的標籤 ，修改成以下的程式：


Suggested change

首先，把從 Square component 的 `render()` 中回傳的按鈕的標籤，修改成以下的程式：

首先，把從 Square component 的 `render()` 中回傳的按鈕的標籤，修改成以下的程式：

bugtender · 2019-02-18T16:57:58Z

content/tutorial/tutorial.md


-Placing the `history` state into the Game component lets us remove the `squares` state from its child Board component. Just like we ["lifted state up"](#lifting-state-up) from the Square component into the Board component, we are now lifting it up from the Board into the top-level Game component. This gives the Game component full control over the Board's data, and lets it instruct the Board to render previous turns from the `history`.
+把 `history` state 放在 Game component 裡面也讓我們能夠把 `squares` 的 state 從它的 child Board component 中移除。如同我們把 state 從 Square component [「往上傳」](#lifting-state-up) 給 Board component ㄧ樣，我們現在也要把 state 從 Board 再度往上傳到最頂層的 Game component 中。這讓 Game component 能完全掌握 Board 的數據，並讓它能告訴 Board 何時該從 `history` 中 render 之前的動作。


Suggested change

把 `history` state 放在 Game component 裡面也讓我們能夠把 `squares` 的 state 從它的 child Board component 中移除。如同我們把 state 從 Square component [「往上傳」](#lifting-state-up) 給 Board component ㄧ樣，我們現在也要把 state 從 Board 再度往上傳到最頂層的 Game component 中。這讓 Game component 能完全掌握 Board 的數據，並讓它能告訴 Board 何時該從 `history` 中 render 之前的動作。

把 `history` state 放在 Game component 裡面也讓我們能夠把 `squares` 的 state 從它的 child Board component 中移除。如同我們把 state 從 Square component [「往上傳」](#lifting-state-up)給 Board component ㄧ樣，我們現在也要把 state 從 Board 再度往上傳到最頂層的 Game component 中。這讓 Game component 能完全掌握 Board 的數據，並讓它能告訴 Board 何時該從 `history` 中 render 之前的動作。

bugtender · 2019-02-18T17:00:56Z

content/tutorial/tutorial.md

-6. When no one wins, display a message about the result being a draw.
+1. 在歷史動作列表中，用（欄，列）的格式來顯示每個動作的位置。
+2. 在動作列表中，將目前被選取的項目加粗。
+3. 改寫 Board，用兩個 loop 創造方格，而非使用 hardcode。


Suggested change

3. 改寫 Board，用兩個 loop 創造方格，而非使用 hardcode。

3. 改寫 Board，使用兩個 loop 創造方格而不是寫死它。

bugtender · 2019-02-18T17:02:26Z

content/tutorial/tutorial.md


-We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
+我們假設你對 HTML 和 JavaScript 有一定的熟悉度，但即使你的背景是另一種程式語言，你應該也能游刃有餘地理解這份指南。我們也假設你對程式語言的中的某些概念，如 function、 object、array 以及（某種程度上）class，有一定的涉獵。


Suggested change

我們假設你對 HTML 和 JavaScript 有一定的熟悉度，但即使你的背景是另一種程式語言，你應該也能游刃有餘地理解這份指南。我們也假設你對程式語言的中的某些概念，如 function、 object、array 以及（某種程度上）class，有一定的涉獵。

我們假設你對 HTML 和 JavaScript 有一定的熟悉度，但即使你的背景是另一種程式語言，你應該也能游刃有餘地理解這份指南。我們也假設你對程式語言的中的某些概念，如 function、object、array 以及（某種程度上）class，有一定的涉獵。

bugtender · 2019-02-18T17:21:19Z

content/tutorial/tutorial.md


-If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX.
+如果你想了解更多 `createElement()`，在 [API 參考](/docs/react-api.html#createelement)中有更詳細的解釋，但我們不會在這份指南中用到它。我們會繼續使用 JSX。


Suggested change

如果你想了解更多 `createElement()`，在 [API 參考](/docs/react-api.html#createelement)中有更詳細的解釋，但我們不會在這份指南中用到它。我們會繼續使用 JSX。

如果你想了解更多 `createElement()`，在 [API 參考指南](/docs/react-api.html#createelement)中有更詳細的解釋，但我們不會在這份指南中用到它。我們會繼續使用 JSX。

Same as last line in this page.

chloewlin · 2019-02-19T11:11:19Z

@bugtender I fixed everything! Thank you. If no one else has problems with this, I am going to merge this in within 6 hours.

twk7890 · 2019-07-12T08:16:18Z

content/tutorial/tutorial.md


-This is the quickest way to get started!
+這是開始最快的方法！


i suggest change into

這是開始的最快方式

or

這是最快的開始方式

chloewlin added 3 commits February 12, 2019 03:10

Complete until inspecting-the-starter-code

f91771a

Fix typo

175882e

Fix babel link

c4f7472

tesseralis mentioned this pull request Feb 12, 2019

[OLD] Legacy Traditional Chinese Translation Progress #1

Closed

92 tasks

Work on complete-the-game

a6f35d0

neighborhood999 reviewed Feb 13, 2019

View reviewed changes

content/tutorial/tutorial.md Outdated Show resolved Hide resolved

chloewlin added 2 commits February 12, 2019 19:47

Fix all the anchor links

93d0a00

Add missing words

6dcee46

neighborhood999 reviewed Feb 13, 2019

View reviewed changes

tesseralis assigned chloewlin Feb 13, 2019

chloewlin added 2 commits February 13, 2019 21:09

Edit texts based on review

dc21742

Complete until immutability

9ce793d

neighborhood999 added the In Progress label Feb 15, 2019

chloewlin added 6 commits February 16, 2019 23:54

Complete until functional component

2f51388

Complete declaring a winner

5281297

Complete lifting state up again

36acd28

Complete through last section

d9f188c

Complete tutorial

fbf6cba

Proofread tutorial

788b5e6

chloewlin added 2 commits February 18, 2019 01:56

Fix typos, remove whitespaces, and refine words

ee574c1

Fix whitespaces

aac1221

chloewlin added Review Needed and removed In Progress labels Feb 18, 2019

bugtender reviewed Feb 18, 2019

View reviewed changes

Fix typos and whitespaces

1084053

chloewlin added In Review Currently under review and removed Review Needed labels Feb 19, 2019

Update immutability/mutation in tutorial

e3b5a18

chloewlin merged commit 805300b into reactjs:master Feb 19, 2019

chloewlin added Completed and removed In Review Currently under review labels Feb 19, 2019

twk7890 reviewed Jul 12, 2019

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tutorial #9

Tutorial #9

chloewlin commented Feb 12, 2019

netlify bot commented Feb 18, 2019 •

edited

Loading

bugtender left a comment

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

bugtender Feb 18, 2019

chloewlin commented Feb 19, 2019

twk7890 Jul 12, 2019


		We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor.
		我們推薦你跟著[這份指南](https://babeljs.io/docs/editors/)來設定你的編輯器中的語法亮高。


		We will build a small game during this tutorial. You might be tempted to skip it because you're not building games -- but give it a chance. The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.
		在這份學習指南中，我們會練習做一個小遊戲。也許你會很想跳過這份指南，因為你不是遊戲開發者 -- 但請試著跟著做做看。在這份學習指南中，你所學到的技術是你做任何 React 應用程式的基礎，掌握基礎後會讓你對 React 有更深入的了解。


		You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
		當你稍微了解這個圈圈叉叉小遊戲是怎麼玩的之後，你就可以把它關掉了。在這份指南中，我們會從更簡單的模板開始。我們的下一步是進行設定以幫助你開始開發這個遊戲。

	讓我們在點擊 Square component 時，能在方格中填入ㄧ個 X。
	讓我們在點擊 Square component 時，能在方格中填入ㄧ個 X。

	>請注意在 `onClick={() => alert('click')}`中，我們會把一個 function 做為 `onClick` 的 prop 往下傳。這個 function 只會在被點擊後觸發。把 `() =>` 寫成 `onClick={alert('click')}` 是一個常見的錯誤，這會造成 component 在每次重新 render 時都會觸發 alert。
	>請注意在 `onClick={() => alert('click')}`中，我們會把一個 function 做為 `onClick` 的 prop 往下傳。這個 function 只會在被點擊後觸發。把 `() =>` 寫成 `onClick={alert('click')}` 是一個常見的錯誤，這會造成 component 在每次重新 render 時都會觸發 alert。

	首先，把從 Square component 的 `render()` 中回傳的按鈕的標籤，修改成以下的程式：
	首先，把從 Square component 的 `render()` 中回傳的按鈕的標籤，修改成以下的程式：


		Placing the `history` state into the Game component lets us remove the `squares` state from its child Board component. Just like we ["lifted state up"](#lifting-state-up) from the Square component into the Board component, we are now lifting it up from the Board into the top-level Game component. This gives the Game component full control over the Board's data, and lets it instruct the Board to render previous turns from the `history`.
		把 `history` state 放在 Game component 裡面也讓我們能夠把 `squares` 的 state 從它的 child Board component 中移除。如同我們把 state 從 Square component [「往上傳」](#lifting-state-up) 給 Board component ㄧ樣，我們現在也要把 state 從 Board 再度往上傳到最頂層的 Game component 中。這讓 Game component 能完全掌握 Board 的數據，並讓它能告訴 Board 何時該從 `history` 中 render 之前的動作。

	3. 改寫 Board，用兩個 loop 創造方格，而非使用 hardcode。
	3. 改寫 Board，使用兩個 loop 創造方格而不是寫死它。


		We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
		我們假設你對 HTML 和 JavaScript 有一定的熟悉度，但即使你的背景是另一種程式語言，你應該也能游刃有餘地理解這份指南。我們也假設你對程式語言的中的某些概念，如 function、 object、array 以及（某種程度上）class，有一定的涉獵。


		If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX.
		如果你想了解更多 `createElement()`，在 [API 參考](/docs/react-api.html#createelement)中有更詳細的解釋，但我們不會在這份指南中用到它。我們會繼續使用 JSX。

	如果你想了解更多 `createElement()`，在 [API 參考](/docs/react-api.html#createelement)中有更詳細的解釋，但我們不會在這份指南中用到它。我們會繼續使用 JSX。
	如果你想了解更多 `createElement()`，在 [API 參考指南](/docs/react-api.html#createelement)中有更詳細的解釋，但我們不會在這份指南中用到它。我們會繼續使用 JSX。


		This is the quickest way to get started!
		這是開始最快的方法！

Tutorial #9

Tutorial #9

Conversation

chloewlin commented Feb 12, 2019

netlify bot commented Feb 18, 2019 • edited Loading

bugtender left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chloewlin commented Feb 19, 2019

Choose a reason for hiding this comment

netlify bot commented Feb 18, 2019 •

edited

Loading