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