Scientists
+科學家列表
- {listItems}
Amazing scientists
+驚人的科學家們
Amazing scientists
+驚人的科學家們
Hedy Lamarr's Todos
+ // 這個寫法沒辦法正常運作！ +Hedy Lamarr 的待辦事項
-If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx):
+如果你有像這樣的現成 HTML，你可以用這個 [轉換工具](https://transform.tools/html-to-jsx) 來修復他。
Hedy Lamarr's Todos
+Hedy Lamarr 的待辦事項
-Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX.
+閱讀 **[用 JSX 來撰寫 Markup 語法](/learn/writing-markup-with-jsx)** 來學習如何撰寫正確的 JSX 語法。
-## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/}
+## 在 JSX 中使用 Javascript 的語法 {/*javascript-in-jsx-with-curly-braces*/}
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript:
+JSX 讓你可以在 Javascript 檔案中使用類似 HTML 的語法，這讓我們把渲染邏輯和內容能夠寫在同一個地方。有時候你可能想要在 Markup 中使用一些 Javascript 的邏輯或是引入一個動態的變數。
+
+在這種情況，你可以在 JSX 語法中使用 **大括號** 來「打開一個 Javascript 的視窗」：
- 
div > div { padding: 20px; }
-Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX.
+閱讀 **[在 JSX 中使用 Javascript 的語法](/learn/javascript-in-jsx-with-curly-braces)** 來學習如何在 JSX 語法中存取 JavaScript 的資料。
-## Passing props to a component {/*passing-props-to-a-component*/}
+## 傳遞 Props 到一個 Component 中 {/*passing-props-to-a-component*/}
+
+React components 使用 *props* 來互相傳遞資訊。每個上層的 Component 都可以藉由賦予他們 Props 的方式來傳遞一些資訊到他的下層 Component 中。
-React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
+Props 可能會讓你想起 HTML 語法中的 attributes，但你可以傳遞任何 JavaScript 的變數到 Props 中，包括物件、陣列、函數，甚至是 JSX！
@@ -310,15 +317,15 @@ export function getImageUrl(person, size = 's') {
-Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props.
+閱讀 **[傳遞 Props 到 Component 中](/learn/passing-props-to-a-component)** 來學習如何傳入 Props 到 Component 中並使用他。
-## Conditional rendering {/*conditional-rendering*/}
+## 條件渲染 {/*conditional-rendering*/}
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+有時候你的 Component 會需要根據不同的條件來展示不同的內容。在 React 中，你可以使用 JavaScript 語法中的 `if` 陳述式，`&&` 以及 `? :` 運算子來根據條件渲染不同的 JSX。
-In this example, the JavaScript `&&` operator is used to conditionally render a checkmark:
+在下面的範例中，我們用 JavaScript 的 `&&` 運算子來根據條件渲染打勾符號：
@@ -358,15 +365,15 @@ export default function PackingList() {
-Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally.
+閱讀 **[條件渲染](/learn/conditional-rendering)** 來學習各種根據條件來渲染內容的方法。
-## Rendering lists {/*rendering-lists*/}
+## 列表渲染 {/*rendering-lists*/}
-You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components.
+你經常會需要用多個相似的 Component 來展示一系列的資料。這個時候你可以在 React 中使用 JavaScript 的 `filter()` 和 `map()` 來篩選資料並轉換成包含多個 Component 的陣列。
-For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes.
+對轉換後的陣列中的每個物件，你必須要幫他們指定一個 `key`。 一般來說，你可以用他們在資料庫中的 ID 來作為 `key`。 Key 可以讓 React 知道列表中每個物件當前的位置，即便你的列表發生了改動也沒關係。
@@ -390,7 +397,7 @@ export default function List() {
);
return (
-
);
@@ -458,18 +465,18 @@ h2 { font-size: 20px; }
-Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key.
+閱讀 **[列表渲染](/learn/rendering-lists)** 來學習如何一次把一個陣列渲染成多個 Component，以及如何幫每個 Component 選擇一個 key。
-## Keeping components pure {/*keeping-components-pure*/}
+## 把 Component 寫成「純函數」 {/*keeping-components-pure*/}
-Some JavaScript functions are *pure.* A pure function:
+我們說一個 JavaScript 的函數是一個 *純函數* (Pure Function) ，如果他滿足這些條件：
-* **Minds its own business.** It does not change any objects or variables that existed before it was called.
-* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
+* **不多管閒事** : 這個函數不會修改任何在他被呼叫之前就已經存在的物件或變數。
+* **一樣的輸入，一樣的輸出** : 只要我們輸入相同的參數，這個函數總是回傳一個相同的輸出。
-By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
+如果我們嚴格地把 Component 都寫成純函數，就可以在隨著專案規模越來越大的過程中避免一系列不可預期的問題出現。這裡給出了一個「不純的函數」作為例子：
@@ -495,7 +502,7 @@ export default function TeaSet() {
-You can make this component pure by passing a prop instead of modifying a preexisting variable:
+你可以藉由改成 Props 傳入資料的方式，而不是直接從外部讀取，來將函數改造為純函數：
@@ -519,12 +526,12 @@ export default function TeaSet() {
-Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions.
+閱讀 **[把 Component 寫成「純函數」](/learn/keeping-components-pure)** 來學習如何用「純函數」且「行為可預測」的寫法來撰寫 Component。
-## What's next? {/*whats-next*/}
+## 下一步 {/*whats-next*/}
-Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
+出發前往 [你的第一個 Component](/learn/your-first-component) 來一頁一頁閱讀這個章節的內容！
-Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?
+或是，如果你已經熟悉這些主題了，不妨瞭解看看 [加入可互動性](/learn/adding-interactivity) ?
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
index c01e96842..a957647b0 100644
--- a/beta/src/sidebarLearn.json
+++ b/beta/src/sidebarLearn.json
@@ -38,40 +38,40 @@
}]
},
{
- "title": "Describing the UI",
+ "title": "描述使用者介面",
"tags": [],
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "你的第一個 Component",
"path": "/learn/your-first-component"
},
{
- "title": "Importing and Exporting Components",
+ "title": "導入及導出 Component",
"path": "/learn/importing-and-exporting-components"
},
{
- "title": "Writing Markup with JSX",
+ "title": "用 JSX 撰寫 Markup",
"path": "/learn/writing-markup-with-jsx"
},
{
- "title": "JavaScript in JSX with Curly Braces",
+ "title": "在 JSX 中使用 JavaScript 的語法",
"path": "/learn/javascript-in-jsx-with-curly-braces"
},
{
- "title": "Passing Props to a Component",
+ "title": "傳遞 Props 到 Component 中",
"path": "/learn/passing-props-to-a-component"
},
{
- "title": "Conditional Rendering",
+ "title": "條件渲染",
"path": "/learn/conditional-rendering"
},
{
- "title": "Rendering Lists",
+ "title": "列表渲染",
"path": "/learn/rendering-lists"
},
{
- "title": "Keeping Components Pure",
+ "title": "把 Component 寫成「純函數」",
"path": "/learn/keeping-components-pure"
}
]
{person.name}'s Todos
+{person.name} 的待辦事項
div > div { padding: 20px; }