chore(i18n,curriculum): processed translations (#42581)

curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md

@@ -17,7 +17,7 @@ Animal.prototype.eat = function() {
 };
 ```
 
-在這一節以及下一節挑戰中我們將學習如何在 `Bird` 和 `Dog` 中重用 `Animal's` 中的方法，而無需重新定義它們。 這裏我們會用到構造函數的繼承特性。 這一節挑戰中我們學習第一步：創建一個超類 `supertype`（或者叫父類）的實例。 你已經學會了一種創建 `Animal` 實例的方法，即使用 `new` 操作符：
+在這一節以及下一節挑戰中我們將學習如何在 `Bird` 和 `Dog` 中重用 `Animal` 中的方法，而無需重新定義它們。 這裏我們會用到構造函數的繼承特性。 這一節挑戰中我們學習第一步：創建一個超類 `supertype`（或者叫父類）的實例。 你已經學會了一種創建 `Animal` 實例的方法，即使用 `new` 操作符：
 
 ```js
 let animal = new Animal();
@@ -29,7 +29,7 @@ let animal = new Animal();
 let animal = Object.create(Animal.prototype);
 ```
 
-`Object.create(obj)` 創建了一個新對象，並指定了 `obj` 作爲新對象的 `prototype`。 回憶一下，我們之前說過 `prototype` 就像是創建對象的“配方”。 如果我們把 `animal` 的 `prototype` 設置爲與 `Animal's` 構造函數的 `prototype` 一樣，那麼就相當於讓 `animal` 這個實例的配方與 `Animal` 其他實例的配方一樣了。
+`Object.create(obj)` 創建了一個新對象，並指定了 `obj` 作爲新對象的 `prototype`。 回憶一下，我們之前說過 `prototype` 就像是創建對象的“配方”。 如果我們把 `animal` 的 `prototype` 設置爲與 `Animal` 構造函數的 `prototype` 一樣，那麼就相當於讓 `animal` 這個實例具有與 `Animal` 的其他實例相同的“配方”了。
 
 ```js
 animal.eat();

curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md

@@ -36,7 +36,7 @@ Bird.prototype.eat = function() {
 };
 ```
 
-如果你有一個實例：`let duck = new Bird();`，然後你調用了 `duck.eat()`，以下就是 JavaScript 在 `duck’s` 的 `prototype` 鏈上尋找方法的過程：
+如果你有一個實例：`let duck = new Bird();`，然後你調用了 `duck.eat()`，以下就是 JavaScript 在 `duck` 的 `prototype` 鏈上尋找方法的過程：
 
 1.  `duck` => `eat()` 是定義在這裏嗎？ 不是。
 2.  `Bird` => `eat()` 是定義在這裏嗎？ => 是的。 執行它並停止往上搜索。

curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md

@@ -19,7 +19,7 @@ let duck = new Bird();
 duck.constructor
 ```
 
-但是 `duck` 和其他所有 `Bird` 的實例都應該表明它們是由 `Bird` 創建的，而不是由 `Animal` 創建的。 爲此，你可以手動把 `Bird's` 的 constructor 屬性設置爲 `Bird` 對象：
+但是 `duck` 和其他所有 `Bird` 的實例都應該表明它們是由 `Bird` 創建的，而不是由 `Animal` 創建的。 爲此，你可以手動將 `Bird` 的構造函數屬性設置爲 `Bird` 對象：
 
 ```js
 Bird.prototype.constructor = Bird;

curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md

@@ -12,7 +12,7 @@ dashedName: use-prototype-properties-to-reduce-duplicate-code
 
 當只有兩個實例時可能並不是什麼問題，但想象一下如果有數百萬個實例。 這將會產生許許多多重複的變量。
 
-這裏有一個更好的方法可以解決上述問題，那就是使用 `Bird’s` 的 `prototype`。 `prototype` 是一個可以在所有 `Bird` 實例之間共享的對象。 以下是一個在 `Bird prototype` 中添加 `numLegs` 屬性的示例：
+更好的方法是使用 `Bird` 的 `prototype`。 `prototype` 是一個可以在所有 `Bird` 實例之間共享的對象。 以下是一個在 `Bird prototype` 中添加 `numLegs` 屬性的示例：
 
 ```js
 Bird.prototype.numLegs = 2;
@@ -45,7 +45,7 @@ assert(beagle.numLegs !== undefined);
 assert(typeof beagle.numLegs === 'number');
 ```
 
-`numLegs` 應該是一個 `prototype` 屬性而不是一個 `own` 屬性。
+`numLegs` 應該是一個 `prototype` 屬性，而不是一個自身屬性。
 
 ```js
 assert(beagle.hasOwnProperty('numLegs') === false);

curriculum/challenges/chinese-traditional/03-front-end-libraries/react/create-a-controlled-form.md

@@ -16,7 +16,7 @@ dashedName: create-a-controlled-form
 
 我們增加了一個提交表單的按鈕。 可以看到它的 `type` 被設置爲 `submit`，表明它是控制表單提交的按鈕。 在 `form` 中添加 `input` 元素，並像上個挑戰一樣設置其 `value` 和 `onChange()` 屬性。 然後，應該完成 `handleSubmit` 方法，以便將組件 state 屬性 `submit` 設置爲本地 `state` 下的當前輸入值。
 
-**注意：** 還必須在提交處理程序中調用 `event.preventDefault()`，以防止默認的表單提交行爲刷新網頁。
+**注意：** 還必須在提交處理程序中調用 `event.preventDefault()`，以防止將會刷新網頁的默認的表單提交行爲。 爲了便於學員操作，默認行爲在這裏被禁用，以防止重置挑戰的代碼。
 
 最後，在 `form` 元素之後創建一個 `h1` 標籤，該標籤從組件的 `state` 渲染 `submit` 的值。 然後，可以在表單中鍵入任何內容，然後單擊按鈕（或按 enter 鍵），輸入會渲染到頁面上。
 
@@ -98,7 +98,26 @@ assert(
 })();
 ```
 
-`h1` 標題應該從組件的 state 渲染 `submit` 字段的值。
+`handleSubmit` 應該調用 `event.preventDefault`。
+
+```js
+const handleSubmit = MyForm.prototype.handleSubmit.toString();
+const allMatches = handleSubmit.match(/\bevent\.preventDefault\(\s*?\)/g) ?? [];
+const blockCommented = handleSubmit.match(
+  /\/\*.*?\bevent\.preventDefault\(\s*?\).*?\*\//gs
+);
+const lineCommented = handleSubmit.match(
+  /\/\/.*?\bevent\.preventDefault\(\s*?\)/g
+);
+const commentedMatches = [...(blockCommented ?? []), ...(lineCommented ?? [])];
+
+assert(
+  // At least one event.preventDefault() call exists and is not commented out
+  allMatches.length > commentedMatches.length
+);
+```
+
+`h1` 標頭應該從組件的 state 渲染 `submit` 字段的值。
 
 ```js
 (() => {

curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/personal-library.md

@@ -18,8 +18,7 @@ dashedName: personal-library
 
 # --instructions--
 
-1.  將的 MongoDB 連接字符串添加到 `.env` 中（沒有引號），`DB`  
+1.  將你的 MongoDB 連接字符串添加到 `.env` 中，作爲 `DB` 示例：`DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
-   示例： `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
 2.  在 `.env` 文件中設置 `NODE_ENV` 爲 `test`中，沒有引號
 3.  需要在 `routes/api.js` 中創建所有路由
 4.  在 `tests/2_functional-tests.js` 中創建所有的功能測試
@@ -66,7 +65,7 @@ async (getUserInput) => {
     let a = $.post(url, { title: 'Faux Book A' });
     let b = $.post(url, { title: 'Faux Book B' });
     let c = $.post(url, { title: 'Faux Book C' });
-    Promise.all([a, b, c]).then(async () => {
+    await Promise.all([a, b, c]).then(async () => {
       let data = await $.get(url);
       assert.isArray(data);
       assert.isAtLeast(data.length, 3);
@@ -214,8 +213,8 @@ async (getUserInput) => {
 
 ```js
 /**
-  Backend challenges don't need solutions, 
+  Backend challenges don't need solutions,
-  because they would need to be tested against a full working project. 
+  because they would need to be tested against a full working project.
   Please check our contributing guidelines to learn more.
 */
 ```

curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md

@@ -17,7 +17,7 @@ Animal.prototype.eat = function() {
 };
 ```
 
-在这一节以及下一节挑战中我们将学习如何在 `Bird` 和 `Dog` 中重用 `Animal's` 中的方法，而无需重新定义它们。 这里我们会用到构造函数的继承特性。 这一节挑战中我们学习第一步：创建一个超类 `supertype`（或者叫父类）的实例。 你已经学会了一种创建 `Animal` 实例的方法，即使用 `new` 操作符：
+在这一节以及下一节挑战中我们将学习如何在 `Bird` 和 `Dog` 中重用 `Animal` 中的方法，而无需重新定义它们。 这里我们会用到构造函数的继承特性。 这一节挑战中我们学习第一步：创建一个超类 `supertype`（或者叫父类）的实例。 你已经学会了一种创建 `Animal` 实例的方法，即使用 `new` 操作符：
 
 ```js
 let animal = new Animal();
@@ -29,7 +29,7 @@ let animal = new Animal();
 let animal = Object.create(Animal.prototype);
 ```
 
-`Object.create(obj)` 创建了一个新对象，并指定了 `obj` 作为新对象的 `prototype`。 回忆一下，我们之前说过 `prototype` 就像是创建对象的“配方”。 如果我们把 `animal` 的 `prototype` 设置为与 `Animal's` 构造函数的 `prototype` 一样，那么就相当于让 `animal` 这个实例的配方与 `Animal` 其他实例的配方一样了。
+`Object.create(obj)` 创建了一个新对象，并指定了 `obj` 作为新对象的 `prototype`。 回忆一下，我们之前说过 `prototype` 就像是创建对象的“配方”。 如果我们把 `animal` 的 `prototype` 设置为与 `Animal` 构造函数的 `prototype` 一样，那么就相当于让 `animal` 这个实例具有与 `Animal` 的其他实例相同的“配方”了。
 
 ```js
 animal.eat();

curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md

@@ -36,7 +36,7 @@ Bird.prototype.eat = function() {
 };
 ```
 
-如果你有一个实例：`let duck = new Bird();`，然后你调用了 `duck.eat()`，以下就是 JavaScript 在 `duck’s` 的 `prototype` 链上寻找方法的过程：
+如果你有一个实例：`let duck = new Bird();`，然后你调用了 `duck.eat()`，以下就是 JavaScript 在 `duck` 的 `prototype` 链上寻找方法的过程：
 
 1.  `duck` => `eat()` 是定义在这里吗？ 不是。
 2.  `Bird` => `eat()` 是定义在这里吗？ => 是的。 执行它并停止往上搜索。

curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md

@@ -19,7 +19,7 @@ let duck = new Bird();
 duck.constructor
 ```
 
-但是 `duck` 和其他所有 `Bird` 的实例都应该表明它们是由 `Bird` 创建的，而不是由 `Animal` 创建的。 为此，你可以手动把 `Bird's` 的 constructor 属性设置为 `Bird` 对象：
+但是 `duck` 和其他所有 `Bird` 的实例都应该表明它们是由 `Bird` 创建的，而不是由 `Animal` 创建的。 为此，你可以手动将 `Bird` 的构造函数属性设置为 `Bird` 对象：
 
 ```js
 Bird.prototype.constructor = Bird;

curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md

@@ -12,7 +12,7 @@ dashedName: use-prototype-properties-to-reduce-duplicate-code
 
 当只有两个实例时可能并不是什么问题，但想象一下如果有数百万个实例。 这将会产生许许多多重复的变量。
 
-这里有一个更好的方法可以解决上述问题，那就是使用 `Bird’s` 的 `prototype`。 `prototype` 是一个可以在所有 `Bird` 实例之间共享的对象。 以下是一个在 `Bird prototype` 中添加 `numLegs` 属性的示例：
+更好的方法是使用 `Bird` 的 `prototype`。 `prototype` 是一个可以在所有 `Bird` 实例之间共享的对象。 以下是一个在 `Bird prototype` 中添加 `numLegs` 属性的示例：
 
 ```js
 Bird.prototype.numLegs = 2;
@@ -45,7 +45,7 @@ assert(beagle.numLegs !== undefined);
 assert(typeof beagle.numLegs === 'number');
 ```
 
-`numLegs` 应该是一个 `prototype` 属性而不是一个 `own` 属性。
+`numLegs` 应该是一个 `prototype` 属性，而不是一个自身属性。
 
 ```js
 assert(beagle.hasOwnProperty('numLegs') === false);

curriculum/challenges/chinese/03-front-end-libraries/react/create-a-controlled-form.md

@@ -16,7 +16,7 @@ dashedName: create-a-controlled-form
 
 我们增加了一个提交表单的按钮。 可以看到它的 `type` 被设置为 `submit`，表明它是控制表单提交的按钮。 在 `form` 中添加 `input` 元素，并像上个挑战一样设置其 `value` 和 `onChange()` 属性。 然后，应该完成 `handleSubmit` 方法，以便将组件 state 属性 `submit` 设置为本地 `state` 下的当前输入值。
 
-**注意：** 还必须在提交处理程序中调用 `event.preventDefault()`，以防止默认的表单提交行为刷新网页。
+**注意：** 还必须在提交处理程序中调用 `event.preventDefault()`，以防止将会刷新网页的默认的表单提交行为。 为了便于学员操作，默认行为在这里被禁用，以防止重置挑战的代码。
 
 最后，在 `form` 元素之后创建一个 `h1` 标签，该标签从组件的 `state` 渲染 `submit` 的值。 然后，可以在表单中键入任何内容，然后单击按钮（或按 enter 键），输入会渲染到页面上。
 
@@ -98,7 +98,26 @@ assert(
 })();
 ```
 
-`h1` 标题应该从组件的 state 渲染 `submit` 字段的值。
+`handleSubmit` 应该调用 `event.preventDefault`。
+
+```js
+const handleSubmit = MyForm.prototype.handleSubmit.toString();
+const allMatches = handleSubmit.match(/\bevent\.preventDefault\(\s*?\)/g) ?? [];
+const blockCommented = handleSubmit.match(
+  /\/\*.*?\bevent\.preventDefault\(\s*?\).*?\*\//gs
+);
+const lineCommented = handleSubmit.match(
+  /\/\/.*?\bevent\.preventDefault\(\s*?\)/g
+);
+const commentedMatches = [...(blockCommented ?? []), ...(lineCommented ?? [])];
+
+assert(
+  // At least one event.preventDefault() call exists and is not commented out
+  allMatches.length > commentedMatches.length
+);
+```
+
+`h1` 标头应该从组件的 state 渲染 `submit` 字段的值。
 
 ```js
 (() => {

curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/personal-library.md

@@ -18,8 +18,7 @@ dashedName: personal-library
 
 # --instructions--
 
-1.  将的 MongoDB 连接字符串添加到 `.env` 中（没有引号），`DB`  
+1.  将你的 MongoDB 连接字符串添加到 `.env` 中，作为 `DB` 示例：`DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
-   示例： `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
 2.  在 `.env` 文件中设置 `NODE_ENV` 为 `test`中，没有引号
 3.  需要在 `routes/api.js` 中创建所有路由
 4.  在 `tests/2_functional-tests.js` 中创建所有的功能测试
@@ -66,7 +65,7 @@ async (getUserInput) => {
     let a = $.post(url, { title: 'Faux Book A' });
     let b = $.post(url, { title: 'Faux Book B' });
     let c = $.post(url, { title: 'Faux Book C' });
-    Promise.all([a, b, c]).then(async () => {
+    await Promise.all([a, b, c]).then(async () => {
       let data = await $.get(url);
       assert.isArray(data);
       assert.isAtLeast(data.length, 3);
@@ -214,8 +213,8 @@ async (getUserInput) => {
 
 ```js
 /**
-  Backend challenges don't need solutions, 
+  Backend challenges don't need solutions,
-  because they would need to be tested against a full working project. 
+  because they would need to be tested against a full working project.
   Please check our contributing guidelines to learn more.
 */
 ```

curriculum/challenges/espanol/03-front-end-libraries/react/add-inline-styles-in-react.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036182
-title: Agrega estilos en línea en React
+title: Agrega inline styles en React
 challengeType: 6
 forumTopicId: 301378
 dashedName: add-inline-styles-in-react
@@ -8,7 +8,7 @@ dashedName: add-inline-styles-in-react
 
 # --description--
 
-Es posible que hayas notado en el último desafío que había otras diferencias de sintaxis con respecto a los estilos en línea de HTML, además del atributo `style` establecido en un objeto de JavaScript. En primer lugar, los nombres de ciertas propiedades de estilo CSS utilizan camel case. Por ejemplo, el último desafío establece el tamaño de la fuente con `fontSize` en lugar de `font-size`. Palabras que incluyen guion como `font-size` son sintaxis inválidas para propiedades de objetos de JavaScript, por lo que React utiliza camel case. Como regla, cualquier propiedad de estilo que usa guion se escribe usando camel case en JSX.
+Es posible que hayas notado en el último desafío que había otras diferencias de sintaxis con respecto a los "inline styles" de HTML, además del atributo `style` establecido en un objeto de JavaScript. En primer lugar, los nombres de ciertas propiedades de estilo CSS utilizan camel case. Por ejemplo, el último desafío establece el tamaño de la fuente con `fontSize` en lugar de `font-size`. Palabras que incluyen guion como `font-size` son sintaxis inválidas para propiedades de objetos de JavaScript, por lo que React utiliza camel case. Como regla, cualquier propiedad de estilo que usa guion se escribe usando camel case en JSX.
 
 Todas las unidades de longitud del valor de la propiedad (como `height`, `width`, y `fontSize`) se supone que están en `px` a menos que se especifique lo contrario. Si quieres utilizar `em`, por ejemplo, debes envolver el valor y las unidades entre comillas, como `{fontSize: "4em"}`. Aparte de los valores de longitud que por defecto son `px`, todos los demás valores de las propiedades deben estar envueltos entre comillas.
 

curriculum/challenges/espanol/03-front-end-libraries/react/bind-this-to-a-class-method.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036174
-title: Bind 'this' to a Class Method
+title: Vincula 'this' a un método de clase
 challengeType: 6
 forumTopicId: 301379
 dashedName: bind-this-to-a-class-method
@@ -8,23 +8,23 @@ dashedName: bind-this-to-a-class-method
 
 # --description--
 
-In addition to setting and updating `state`, you can also define methods for your component class. A class method typically needs to use the `this` keyword so it can access properties on the class (such as `state` and `props`) inside the scope of the method. There are a few ways to allow your class methods to access `this`.
+Además de configurar y actualizar `state`, también puedes definir métodos para tu componente de clase. Un método de clase normalmente necesita usar la palabra clave `this` para que pueda acceder a propiedades de la clase (como `state` y `props`) dentro del ámbito del método. Hay algunas maneras de permitir que los métodos de tu clase accedan a `this`.
 
-One common way is to explicitly bind `this` in the constructor so `this` becomes bound to the class methods when the component is initialized. You may have noticed the last challenge used `this.handleClick = this.handleClick.bind(this)` for its `handleClick` method in the constructor. Then, when you call a function like `this.setState()` within your class method, `this` refers to the class and will not be `undefined`.
+Una forma común es enlazar explícitamente `this` en el constructor para que `this` se vincule a los métodos de clase cuando el componente es inicializado. Habrás notado que el último desafío utilizó `this.handleClick = this.handleClick.bind(this)` para su método `handleClick` en el constructor. Luego, cuando llamas a una función como `this.setState()` dentro de su método de clase, `this` se refiere a la clase y no será `undefined`.
 
-**Note:** The `this` keyword is one of the most confusing aspects of JavaScript but it plays an important role in React. Although its behavior here is totally normal, these lessons aren't the place for an in-depth review of `this` so please refer to other lessons if the above is confusing!
+**Nota:** La palabra clave `this` es uno de los aspectos más confusos de JavaScript pero juega un papel importante en React. Aunque su comportamiento aquí es totalmente normal, estas lecciones no son el lugar para una revisión a profundidad de `this`, así que por favor, ¡consulta otras lecciones si lo anterior es confuso!
 
 # --instructions--
 
-The code editor has a component with a `state` that keeps track of the text. It also has a method which allows you to set the text to `"You clicked!"`. However, the method doesn't work because it's using the `this` keyword that is undefined. Fix it by explicitly binding `this` to the `handleClick()` method in the component's constructor.
+El editor de código tiene un componente con un `state` que mantiene un seguimiento del texto. También tiene un método que le permite establecer el texto a `You clicked!`. Sin embargo, el método no funciona porque está utilizando la palabra clave `this` que no está definida. Arréglalo explícitamente ligando `this` al método `handleClick()` en el constructor del componente.
 
-Next, add a click handler to the `button` element in the render method. It should trigger the `handleClick()` method when the button receives a click event. Remember that the method you pass to the `onClick` handler needs curly braces because it should be interpreted directly as JavaScript.
+A continuación, añade un click handler al elemento `button` en el método render. Debes activar el método `handleClick()` cuando el botón recibe un evento de clic. Recuerda que el método que pasas al `onClick` handler necesita llaves porque debe ser interpretado directamente como JavaScript.
 
-Once you complete the above steps you should be able to click the button and see `You clicked!`.
+Una vez que completes los pasos anteriores debes poder hacer clic en el botón y ver `You clicked!`.
 
 # --hints--
 
-`MyComponent` should return a `div` element which wraps two elements, a button and an `h1` element, in that order.
+`MyComponent` debe devolver un elemento `div` que envuelve dos elementos, un botón y un elemento `h1`, en ese orden.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-The state of `MyComponent` should initialize with the key value pair `{ text: "Hello" }`.
+El estado de `MyComponent` debe inicializarse con el par de clave valor `{ text: "Hello" }`.
 
 ```js
 assert(
@@ -48,7 +48,7 @@ assert(
 );
 ```
 
-Clicking the `button` element should run the `handleClick` method and set the state `text` to `"You clicked!"`.
+Al hacer clic en el botón `button` se debe ejecutar el método `handleClick` y establecer el estado `text` en `You clicked!`.
 
 ```js
 async () => {

curriculum/challenges/espanol/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036189
-title: Change Inline CSS Conditionally Based on Component State
+title: Cambia el CSS inline condicionalmente según el estado del componente
 challengeType: 6
 forumTopicId: 301380
 dashedName: change-inline-css-conditionally-based-on-component-state
@@ -8,17 +8,17 @@ dashedName: change-inline-css-conditionally-based-on-component-state
 
 # --description--
 
-At this point, you've seen several applications of conditional rendering and the use of inline styles. Here's one more example that combines both of these topics. You can also render CSS conditionally based on the state of a React component. To do this, you check for a condition, and if that condition is met, you modify the styles object that's assigned to the JSX elements in the render method.
+Hasta ahora has visto varias aplicaciones de renderizado condicional y el uso de inline styles. Aquí va un ejemplo más que combina los dos temas. También puedes renderizar CSS condicionalmente según el estado de un componente de React. Para hacer esto, tienes que verificar una condición, y si esa condición se cumple, modificas el objeto de estilos que está asignado a los elementos JSX del método render.
 
-This paradigm is important to understand because it is a dramatic shift from the more traditional approach of applying styles by modifying DOM elements directly (which is very common with jQuery, for example). In that approach, you must keep track of when elements change and also handle the actual manipulation directly. It can become difficult to keep track of changes, potentially making your UI unpredictable. When you set a style object based on a condition, you describe how the UI should look as a function of the application's state. There is a clear flow of information that only moves in one direction. This is the preferred method when writing applications with React.
+Este paradigma es importante entenderlo porque es un cambio dramático del enfoque más tradicional de aplicar estilos modificando elementos del DOM directamente (muy común con jQuery, por ejemplo). Con ese enfoque, debes hacer un seguimiento de cuándo cambian los elementos y también hacer una manipulación real directa. Puede resultar difícil hacer un seguimiento de los cambios, lo que podría hacer que tu interfaz de usuario sea impredecible. Cuando configuras un objeto de estilo en función de una condición, estás describiendo cómo debería verse la interfaz de usuario en función del estado de la aplicación. Existe un flujo claro de información que sólo se mueve en una dirección. Este es el método preferido para escribir aplicaciones con React.
 
 # --instructions--
 
-The code editor has a simple controlled input component with a styled border. You want to style this border red if the user types more than 15 characters of text in the input box. Add a condition to check for this and, if the condition is valid, set the input border style to `3px solid red`. You can try it out by entering text in the input.
+El editor de código tiene un simple componente de entrada controlado, con un estilo de borde. Quieres aplicar un estilo rojo a este borde si el usuario escribe más de 15 caracteres de texto en la casilla de entrada. Agrega una condición para verificarlo y, si la condición es válida, establece el estilo del borde de la casilla de entrada como `3px solid red`. Puedes probarlo introduciendo texto en la casilla de entrada.
 
 # --hints--
 
-The `GateKeeper` component should render a `div` element.
+El componente `GateKeeper` debe renderizar un elemento `div`.
 
 ```js
 assert(
@@ -29,7 +29,7 @@ assert(
 );
 ```
 
-The `GateKeeper` component should be initialized with a state key `input` set to an empty string.
+El componente `GateKeeper` debe inicializarse con una clave de estado `input` establecida con una cadena vacía.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-The `GateKeeper` component should render an `h3` tag and an `input` tag.
+El componente `GateKeeper` debe renderizar una etiqueta `h3` y una etiqueta `input`.
 
 ```js
 assert(
@@ -54,7 +54,7 @@ assert(
 );
 ```
 
-The `input` tag should initially have a style of `1px solid black` for the `border` property.
+La etiqueta `input`, inicialmente debe tener un estilo `1px solid black` para la propiedad `border`.
 
 ```js
 assert(
@@ -67,7 +67,7 @@ assert(
 );
 ```
 
-The `input` tag should be styled with a border of `3px solid red` if the input value in state is longer than 15 characters.
+La etiqueta `input` debe tener un estilo de borde de `3px solid red` si el valor de entrada en el estado tiene más de 15 caracteres.
 
 ```js
 async () => {

curriculum/challenges/espanol/03-front-end-libraries/react/compose-react-components.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036166
-title: Compose React Components
+title: Compón componentes de React
 challengeType: 6
 forumTopicId: 301381
 dashedName: compose-react-components
@@ -8,17 +8,17 @@ dashedName: compose-react-components
 
 # --description--
 
-As the challenges continue to use more complex compositions with React components and JSX, there is one important point to note. Rendering ES6 style class components within other components is no different than rendering the simple components you used in the last few challenges. You can render JSX elements, stateless functional components, and ES6 class components within other components.
+A medida que los desafíos continúan utilizando composiciones más complejas con componentes de React y JSX, hay un una cosa importante a tener en cuenta. Renderizar componentes de clase de estilo ES6 dentro de otros componentes es igual que renderizar los componentes simples que usaste en los últimos desafíos. Puedes renderizar elementos JSX, componentes funcionales sin estado y componentes de clase ES6, dentro de otros componentes.
 
 # --instructions--
 
-In the code editor, the `TypesOfFood` component is already rendering a component called `Vegetables`. Also, there is the `Fruits` component from the last challenge.
+En el editor de código, el componente `TypesOfFood` ya está incluyendo (renderizando) un componente llamado `Vegetables`. Además, también está el componente `Fruits` del último desafío.
 
-Nest two components inside of `Fruits` — first `NonCitrus`, and then `Citrus`. Both of these components are provided for you behind the scenes. Next, nest the `Fruits` class component into the `TypesOfFood` component, below the `h1` header and above `Vegetables`. The result should be a series of nested components, which uses two different component types.
+Anida dos componentes dentro de `Fruits` - primero `NonCitrus` y luego `Citrus`. Ambos componentes se te proporcionan en segundo plano. A continuación, anida el componente de clase `Fruits` en el componente `TypesOfFood`, debajo del encabezado (header) `h1` y encima de `Vegetables`. El resultado debe ser una serie de componentes anidados, que utiliza dos tipos de componentes diferentes.
 
 # --hints--
 
-The `TypesOfFood` component should return a single `div` element.
+El componente `TypesOfFood` debe devolver un solo elemento `div`.
 
 ```js
 assert(
@@ -29,7 +29,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should return the `Fruits` component.
+El componente `TypesOfFood` debe devolver el componente `Fruits`.
 
 ```js
 assert(
@@ -40,7 +40,7 @@ assert(
 );
 ```
 
-The `Fruits` component should return the `NonCitrus` component and the `Citrus` component.
+El componente `Fruits` debe devolver el componente `NonCitrus` y el componente `Citrus`.
 
 ```js
 assert(
@@ -55,7 +55,7 @@ assert(
 );
 ```
 
-The `TypesOfFood` component should return the `Vegetables` component below the `Fruits` component.
+El componente `TypesOfFood` debe devolver el componente `Vegetables` debajo del componente `Fruits`.
 
 ```js
 assert(

curriculum/challenges/espanol/03-front-end-libraries/react/create-a-complex-jsx-element.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24bbe0dba28a8d3cbd4c5d
-title: Create a Complex JSX Element
+title: Crea un elemento JSX complejo
 challengeType: 6
 forumTopicId: 301382
 dashedName: create-a-complex-jsx-element
@@ -8,17 +8,17 @@ dashedName: create-a-complex-jsx-element
 
 # --description--
 
-The last challenge was a simple example of JSX, but JSX can represent more complex HTML as well.
+El último desafío fue un ejemplo sencillo de JSX, pero JSX también puede representar HTML más complejo.
 
-One important thing to know about nested JSX is that it must return a single element.
+Una cosa importante que debes saber sobre JSX anidado es que debe devolver un solo elemento.
 
-This one parent element would wrap all of the other levels of nested elements.
+Este elemento principal contendría a todos los demás niveles de elementos anidados.
 
-For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.
+Por ejemplo, varios elementos JSX escritos al mismo nivel sin elemento contenedor principal no se transpilarán.
 
-Here's an example:
+Aquí va un ejemplo:
 
-**Valid JSX:**
+**JSX válido:**
 
 ```jsx
 <div>
@@ -28,7 +28,7 @@ Here's an example:
 </div>
 ```
 
-**Invalid JSX:**
+**JSX inválido:**
 
 ```jsx
 <p>Paragraph One</p>
@@ -38,39 +38,39 @@ Here's an example:
 
 # --instructions--
 
-Define a new constant `JSX` that renders a `div` which contains the following elements in order:
+Define una nueva constante `JSX` que renderice un `div` que contenga los siguientes elementos en orden:
 
-An `h1`, a `p`, and an unordered list that contains three `li` items. You can include any text you want within each element.
+Un `h1`, un `p` y una lista desordenada que contiene tres elementos `li`. Puedes incluir cualquier texto que desees dentro de cada elemento.
 
-**Note:** When rendering multiple elements like this, you can wrap them all in parentheses, but it's not strictly required. Also notice this challenge uses a `div` tag to wrap all the child elements within a single parent element. If you remove the `div`, the JSX will no longer transpile. Keep this in mind, since it will also apply when you return JSX elements in React components.
+**Nota: **Al renderizar varios elementos de esta forma, puedes envolverlos todos entre paréntesis, pero no es estrictamente necesario. Observa también que este desafío usa una etiqueta `div` para envolver a todos los elementos hijos dentro de un solo elemento principal. Si eliminas el `div`, JSX ya no se podrá transpilar. Ten esto en cuenta, ya que también será así cuando devuelvas elementos JSX en los componentes de React.
 
 # --hints--
 
-The constant `JSX` should return a `div` element.
+La constante `JSX` debe devolver un elemento `div`.
 
 ```js
 assert(JSX.type === 'div');
 ```
 
-The `div` should contain an `h1` tag as the first element.
+El `div` debe contener una etiqueta `h1` como primer elemento.
 
 ```js
 assert(JSX.props.children[0].type === 'h1');
 ```
 
-The `div` should contain a `p` tag as the second element.
+El `div` debe contener una etiqueta `p` como segundo elemento.
 
 ```js
 assert(JSX.props.children[1].type === 'p');
 ```
 
-The `div` should contain a `ul` tag as the third element.
+El `div` debe contener una etiqueta `ul` como tercer elemento.
 
 ```js
 assert(JSX.props.children[2].type === 'ul');
 ```
 
-The `ul` should contain three `li` elements.
+El `ul` debe contener tres elementos `li`.
 
 ```js
 assert(
@@ -89,7 +89,9 @@ ReactDOM.render(JSX, document.getElementById('root'))
 ```
 
 ## --seed-contents--
+
 ```jsx
+
 ```
 
 # --solutions--

curriculum/challenges/espanol/03-front-end-libraries/react/create-a-component-with-composition.md

@@ -1,6 +1,6 @@
 ---
 id: 5a24c314108439a4d4036164
-title: Create a Component with Composition
+title: Crear un componente con composición
 challengeType: 6
 forumTopicId: 301383
 dashedName: create-a-component-with-composition
@@ -8,9 +8,9 @@ dashedName: create-a-component-with-composition
 
 # --description--
 
-Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a `Navbar`, `Dashboard`, and `Footer`.
+Ahora veremos cómo podemos componer múltiples componentes de React juntos. Imagina que estás construyendo una aplicación y has creado tres componentes: un `Navbar`, `Dashboard` y `Footer`.
 
-To compose these components together, you could create an `App` *parent* component which renders each of these three components as *children*. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the `render` method you could write:
+Para componer estos componentes juntos, se podría crear un componente `App` *parent* que renderiza cada uno de estos tres componentes como *children*. Para renderizar un componente como hijo en un componente React, se incluye el nombre del componente escrito como una etiqueta HTML personalizada en el JSX. Por ejemplo, en el método `render` se puede escribir:
 
 ```jsx
 return (
@@ -22,17 +22,17 @@ return (
 )
 ```
 
-When React encounters a custom HTML tag that references another component (a component name wrapped in `< />` like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the `App` component and the `Navbar`, `Dashboard`, and `Footer`.
+Cuando React encuentra una etiqueta HTML personalizada que hace referencia a otro componente (un nombre de componente envuelto en `< />` como en este ejemplo), renderiza el marcado de ese componente en la ubicación de la etiqueta. Esto debería ilustrar la relación padre/hijo entre el componente `App` y `Navbar`, `Dashboard`, y `Footer`.
 
 # --instructions--
 
-In the code editor, there is a simple functional component called `ChildComponent` and a class component called `ParentComponent`. Compose the two together by rendering the `ChildComponent` within the `ParentComponent`. Make sure to close the `ChildComponent` tag with a forward slash.
+En el editor de código, hay un componente funcional simple llamado `ChildComponent` y un componente de clase llamado `ParentComponent`. Compón los dos juntos renderizando el `ChildComponent` dentro del `ParentComponent`. Asegúrate de cerrar la etiqueta `ChildComponent` con una barra diagonal.
 
-**Note:** `ChildComponent` is defined with an ES6 arrow function because this is a very common practice when using React. However, know that this is just a function. If you aren't familiar with the arrow function syntax, please refer to the JavaScript section.
+**Nota:** `ChildComponent` se define con una función de flecha ES6 porque es una práctica muy común al usar React. Sin embargo, has de saber que se trata de una función simple. Si no estás familiarizado con la sintaxis de la función flecha, consulta la sección de JavaScript.
 
 # --hints--
 
-The React component should return a single `div` element.
+El componente React debe devolver un único elemento `div`.
 
 ```js
 assert(
@@ -43,7 +43,7 @@ assert(
 );
 ```
 
-The component should return two nested elements.
+El componente debe devolver dos elementos anidados.
 
 ```js
 assert(
@@ -54,7 +54,7 @@ assert(
 );
 ```
 
-The component should return the ChildComponent as its second child.
+El componente debe devolver el `ChildComponent` como un segundo hijo.
 
 ```js
 assert(

curriculum/challenges/portuguese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md

@@ -26,7 +26,7 @@ Um exemplo:
 
 # --instructions--
 
-É hora de fazer uma pausa com o Camper Cat e conhecer o colega Zersiax (@zersiax), um campeão de acessibilidade e também usuário de leitor de tela. Para ouvir um clipe de seu leitor de tela em ação, adicione um elemento `audio` após o elemento `p`. Inclua o atributo `controls`. Em seguida, coloque uma tag `source` dentro da tag `audio` com o atributo `src` definido como `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` e o atributo `type` definido como `"audio/mpeg"`.
+É hora de fazer uma pausa com o Camper Cat e conhecer o colega Zersiax (@zersiax), um campeão de acessibilidade e também usuário de leitor de tela. Para ouvir um clipe de seu leitor de tela em ação, adicione o elemento `audio` após o elemento `p`. Inclua o atributo `controls`. Em seguida, coloque uma tag `source` dentro da tag `audio` com o atributo `src` definido como `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` e o atributo `type` definido como `"audio/mpeg"`.
 
 **Observação:** o clipe de áudio pode parecer rápido e difícil de entender, mas é uma velocidade normal para usuários de leitores de tela.