chore(i18n,curriculum): update translations (#43463)
This commit is contained in:
camperbot
GitHub
@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome 是一個非常便利的圖標庫。 我們可以通過 webfont 或矢量圖的方式來使用這些圖標。 這些圖標就和字體一樣， 不僅能通過像素單位指定它們的大小，它們也同樣會繼承父級 HTML 元素的字體大小。
|
||||
Font Awesome 是一個非常便利的圖標庫。 我們可以通過 webfont 或矢量圖的方式來使用這些圖標。 這些圖標就和字體一樣， 不僅能通過像素單位指定它們的大小，它們也同樣會繼承父級 HTML 元素的字號。
|
||||
|
||||
可以將 Font Awesome 圖標庫添加至任何一個 web app 中，方法很簡單，只需要在 HTML head 標籤中添加以下代碼即可：
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Bootstrap 有着豐富的預定義按鈕顏色。 淺藍色的 `btn-info` class
|
||||
|
||||
在 `Like` 按鈕下方創建包含文本 `Info` 的塊級 Bootstrap 按鈕，然後爲該按鈕添加 Bootstrap 的 `btn-info` 和 `btn-block` classes。
|
||||
|
||||
注意：這些按鈕仍然需要 `btn` 和 `btn-block` classes。
|
||||
注意：這些按鈕仍然需要 `btn` 和 `btn-block` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
保證所有 `button` 元素都有一個閉合標籤。
|
||||
確保所有 `button` 元素都有閉合標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/XpKrrW> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 如果使用建議的技術棧完成這個項目，我們會接受並嘗試修復相關的問題反饋。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該能看到一個具有`id="break-label"`屬性的元素，這個元素的內容應該是一個字符串（例如："Break Length"）。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/MJyNMd> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該可以看到一個具有 `id="drum-machine"` 屬性的外層容器，該容器包含了其它所有元素。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/wgGVVX> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 計算器應該包含一個具有 `id="equals"` 屬性的可以點擊的元素，元素的文本內容爲 `=`（等於符號）。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/GrZVVO> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該能看到一個具有 `id="editor"` 屬性的 `textarea` 元素。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/qRZeGZ> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該能看到一個具有 `id="quote-box"` 屬性的包裹元素。
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
應該僅用 jQuery 給元素添加 class。
|
||||
應該僅用 jQuery 給標籤添加 class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -33,7 +33,7 @@ $("button").addClass("animated bounce");
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
應該僅用 jQuery 給元素添加 class。
|
||||
應該僅用 jQuery 給標籤添加 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -18,7 +18,7 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
# --hints--
|
||||
|
||||
`AppWrapper` 應渲染該頁面上。
|
||||
`AppWrapper` 應該渲染該到頁面上。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational` 組件應該渲染到頁面上。
|
||||
`Presentational` 應該渲染到頁面上.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational` 組件應接收創建 action 的函數 `submitMessage` 屬性。
|
||||
`Presentational` 組件應接收創建 action 的函數的 `submitMessage` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -31,7 +31,6 @@ JSX 元素使用 `style` 屬性，但是鑑於 JSX 的編譯方式，不能將
|
||||
在代碼編輯器中給 `div` 添加一個 `style` 屬性，將文本顏色設置爲紅色，字體大小設置爲 `72px`。
|
||||
|
||||
請注意，可以選擇將字體大小設置爲數字，省略單位 `px`，或者將其寫爲 `72px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
組件應該渲染一個 `div` 元素。
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: render-conditionally-from-props
|
||||
|
||||
# --description--
|
||||
|
||||
到目前爲止，你已經看到如何使用 `if/else`、`&&` 以及三元運算符（`condition ? expressionIfTrue : expressionIfFalse`）在不同條件下運行不同的代碼。 然而，還有一個重要的話題需要討論，將這些概念中的任何一個或所有概念與另一個強大的 React 功能 props 結合起來。 使用 props 有條件地渲染代碼在 React 開發人員中很常見——也就是說：他們使用給定 prop 的值來自動決定渲染什麼。
|
||||
到目前爲止，已經看到了如何使用 `if/else`、`&&`和三元運算符（`condition ? expressionIfTrue : expressionIfFalse`）對渲染什麼和何時渲染做出有條件的判定。 然而，還有一個重要的話題需要討論，將這些概念中的任何一個或所有概念與另一個強大的 React 功能 props 結合起來。 使用 props 有條件地渲染代碼在 React 開發人員中很常見——也就是說：他們使用給定 prop 的值來自動決定渲染什麼。
|
||||
|
||||
在這個挑戰中，將設置一個子組件來根據 props 做出渲染決定。 可以使用三元運算符，但是可以看到過去幾個挑戰中涵蓋的其他幾個概念在這種情況下可能同樣有用。
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ ReactDOM 提供了一個簡單的方法來將 React 元素呈現給 DOM，如下
|
||||
|
||||
# --instructions--
|
||||
|
||||
代碼編輯器有一個簡單的 JSX 組件。 使用 `ReactDOM.render()` 方法將該組件渲染到頁面。 可以將定義好的 JSX 元素直接作爲第一個參數傳入，然後使用 `document.getElementById()` 來選擇要渲染到的 DOM 節點， 在這個挑戰中，請渲染到 `id='challenge-node'` 的 `div` 中。 確保沒有修改 `JSX` 常量。
|
||||
代碼編輯器有一個簡單的 JSX 組件。 使用 `ReactDOM.render()` 方法將該組件渲染到頁面。 可以將定義好的 JSX 元素直接作爲第一個參數傳入，然後使用 `document.getElementById()` 來選擇要渲染到的 DOM 節點， 在這個挑戰中，請渲染到 `id='challenge-node'`的 `div` 中。 確保沒有修改 `JSX` 常量。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ MyComponent 的 state 中包含一個 `boolean`（布爾值），用於跟蹤是
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` 應該存在並被渲染。
|
||||
`MyComponent` 應該存在並渲染。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
當 `display` 被設置爲 `true` 時，`div`、`button` 和 `h1` 標籤應該被渲染。
|
||||
當 `display` 被設置爲 `true` 時，`div`、`button` 和 `h1` 標籤應該渲染。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -50,7 +50,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
當 `display` 被設置爲 `false` 時，只有 `div` 和 `button` 應該被渲染。
|
||||
當 `display` 被設置爲 `false` 時，只有 `div` 和 `button` 應該渲染。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036185
|
||||
title: Use && for a More Concise Conditional
|
||||
title: 使用 && 獲得更簡潔的條件
|
||||
challengeType: 6
|
||||
forumTopicId: 301413
|
||||
dashedName: use--for-a-more-concise-conditional
|
||||
@ -8,7 +8,7 @@ dashedName: use--for-a-more-concise-conditional
|
||||
|
||||
# --description--
|
||||
|
||||
`if/else` 語句在上一次挑戰中是有效的，但是有一種更簡潔的方法可以達到同樣的結果。 假設正在跟蹤組件中的幾個條件，並且希望根據這些條件中的每一個來渲染不同的元素。 如果你寫了很多 `else if` 語句來返回稍微不同的 UI，你可能會寫很多重複代碼，這就留下了出錯的空間。 相反，你可以使用 `&&` 邏輯運算符以更簡潔的方式執行條件邏輯。 這是完全可行的，因爲你希望檢查條件是否爲 `true`。如果是，則返回一些標記。 這裏有一個例子：
|
||||
`if/else` 語句在上一次挑戰中是有效的，但是有一種更簡潔的方法可以達到同樣的結果。 假設正在跟蹤組件中的幾個條件，並且希望根據這些條件中的每一個來渲染不同的元素。 如果你寫了很多 `else if` 語句來返回稍微不同的 UI，你可能會寫很多重複代碼，這就留下了出錯的空間。 相反，你可以使用 `&&` 邏輯運算符以更簡潔的方式執行條件邏輯。 這是完全可行的，因爲你希望檢查條件是否爲 `true`。如果是，則返回一些標記。 下面是一個示例：
|
||||
|
||||
```jsx
|
||||
{condition && <p>markup</p>}
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-advanced-javascript-in-react-render-method
|
||||
|
||||
# --description--
|
||||
|
||||
在之前的挑戰中，學習瞭如何使用大括號 `{ }` 將 JavaScript 代碼插入到 JSX 代碼中，用於訪問 props、傳遞 props、訪問 state、在代碼中插入註釋以及最近學習的定製組件樣式等任務。 這些都是將 JavaScript 放在 JSX 中的常見用例，但是在 React 組件中使用 JavaScript 代碼還有其他方式。
|
||||
在之前的挑戰中，你學習瞭如何使用大括號 `{ }` 將 JavaScript 代碼插入到 JSX 代碼中，用於訪問 props、傳遞 props、訪問 state、在代碼中插入註釋以及最近學習的定製組件樣式等任務。 這些都是將 JavaScript 放在 JSX 中的常見用例，但是在 React 組件中使用 JavaScript 代碼還有其他方式。
|
||||
|
||||
在 `render` 方法中編寫 JavaScript，可以把 JavaScript 直接放在 `return` 語句之前，而***不必***將其插入大括號中。 這是因爲它還不在 JSX 代碼中。 如果之後想在 `return` 語句中的 JSX 代碼*裏面*使用變量時，可以將變量名放在大括號中。
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
最後幾個挑戰適用於數組，但是當狀態是 `object` 時，有一些方法可以實現狀態不變性。 處理對象的一個常用的方法是 `Object.assign()`。 `Object.assign()` 獲取目標對象和源對象，並將源對象中的屬性映射到目標對象。 任何匹配的屬性都會被源對象中的屬性覆蓋。 通常用於通過傳遞一個空對象作爲第一個參數，然後是要用複製的對象來製作對象的淺表副本。 這是一個例子：
|
||||
最後幾個挑戰適用於數組，但是當狀態是 `object` 時，有一些方法可以實現狀態不變性。 處理對象的一個常用的方法是 `Object.assign()`。 `Object.assign()` 獲取目標對象和源對象，並將源對象中的屬性映射到目標對象。 任何匹配的屬性都會被源對象中的屬性覆蓋。 通常用於通過傳遞一個空對象作爲第一個參數，然後是要用複製的對象來製作對象的淺表副本。 下面是一個示例：
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: define-an-action-creator
|
||||
|
||||
# --description--
|
||||
|
||||
創建 action 後要將 action 發送到 Redux store，以便它可以更新其狀態。 在 Redux 中，可以定義動作創建器來完成此任務， action creator 只是一個返回動作的 JavaScript 函數， 換句話說，action creator 創建表示動作事件的對象。
|
||||
創建 action 後要將 action 發送到 Redux store，以便它可以更新其狀態。 在 Redux 中，可以定義動作創建器來完成此任務， action creator 只是一個返回動作的 JavaScript 函數。 換句話說，action creator 創建表示動作事件的對象。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ dashedName: use-each-to-map-over-items-in-a-list
|
||||
}
|
||||
```
|
||||
|
||||
map 的語法略有不同。 這是一個例子：
|
||||
map 的語法略有不同。 這是一個示例：
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
Reference in New Issue
Block a user