chore(i18n,curriculum): update translations (#42568)
This commit is contained in:
camperbot
GitHub
@@ -11,7 +11,7 @@ dashedName: create-a-bulleted-unordered-list
|
||||
|
||||
HTML tiene un elemento especial para crear <dfn>listas no ordenadas</dfn>, o listas con estilo de viñetas.
|
||||
|
||||
Las listas no ordenadas comienzan con un elemento `<ul>` de apertura, seguido de cualquier número de elementos `<li>`. Por último, las listas no ordenadas cierran con un `</ul>`
|
||||
Las listas no ordenadas comienzan con un elemento `<ul>` de apertura, seguido de cualquier número de elementos `<li>`. Por último, las listas no ordenadas cierran con un `</ul>`.
|
||||
|
||||
Por ejemplo:
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Tu formulario `form` debe tener un atributo `action` que esté establecido como `https://www.freecatphotoapp.com/submit-cat-photo`
|
||||
Tu formulario `form` debe tener un atributo `action` que esté establecido como `https://www.freecatphotoapp.com/submit-cat-photo`.
|
||||
|
||||
```js
|
||||
const action = $('form').attr('action');
|
||||
|
||||
@@ -42,7 +42,7 @@ El texto, `link to www.freecodecamp.org`, dentro de un elemento `a` se llama <df
|
||||
|
||||
El resultado final del ejemplo se verá así:
|
||||
|
||||
Aquí hay un enlace <a href="https://www.freecodecamp.org" target="_blank">a www.freecodecamp.org</a> para que lo sigas.
|
||||
Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.freecodecamp.org</a> for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: global-vs--local-scope-in-functions
|
||||
|
||||
# --description--
|
||||
|
||||
Es posible tener variables <dfn>locales</dfn> y <dfn>globales</dfn> con el mismo nombre. Cuando haces esto, la variable `local` tiene precedencia sobre la variable `global`.
|
||||
Es posible tener variables <dfn>locales</dfn> y <dfn>globales</dfn> con el mismo nombre. Cuando haces esto, la variable local tiene precedencia sobre la variable global.
|
||||
|
||||
En este ejemplo:
|
||||
|
||||
@@ -21,7 +21,7 @@ function myFun() {
|
||||
}
|
||||
```
|
||||
|
||||
La función `myFun` devolverá la cadena `Head` porque está presente la versión `local` de la variable.
|
||||
La función `myFun` devolverá la cadena `Head` porque está presente la versión local de la variable.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -19,23 +19,23 @@ var sandwich = ["peanut butter", "jelly", "bread"]
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modifica el nuevo arreglo `myArray` para que contenga tanto una `string` como un `number` (en ese orden).
|
||||
Modifica el nuevo arreglo `myArray` para que contenga tanto una cadena como un número (en ese orden).
|
||||
|
||||
# --hints--
|
||||
|
||||
`myArray` debe ser un arreglo (`array`).
|
||||
`myArray` debe ser un arreglo.
|
||||
|
||||
```js
|
||||
assert(typeof myArray == 'object');
|
||||
```
|
||||
|
||||
El primer elemento en `myArray` debe ser una cadena (`string`).
|
||||
El primer elemento en `myArray` debe ser una cadena.
|
||||
|
||||
```js
|
||||
assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string');
|
||||
```
|
||||
|
||||
El segundo elemento en `myArray` debe ser un número (`number`).
|
||||
El segundo elemento en `myArray` debe ser un número.
|
||||
|
||||
```js
|
||||
assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number');
|
||||
|
||||
@@ -17,7 +17,7 @@ Animal.prototype.eat = function() {
|
||||
};
|
||||
```
|
||||
|
||||
Este desafío y el siguiente cubrirán como reutilizar los métodos de `Animal's` dentro de `Bird` y `Dog` sin tener que definirlos otra vez. Se utiliza una técnica llamada herencia. Este desafío cubre el primer paso: crear una instancia del `supertype` (o objecto padre). Ya conoces una forma de crear una instancia de `Animal` utilizando el operador `new`:
|
||||
Este desafío y el siguiente cubrirán como reutilizar los métodos de `Animal` dentro de `Bird` y `Dog` sin tener que definirlos otra vez. Se utiliza una técnica llamada herencia. Este desafío cubre el primer paso: crear una instancia del `supertype` (o objecto padre). Ya conoces una forma de crear una instancia de `Animal` utilizando el operador `new`:
|
||||
|
||||
```js
|
||||
let animal = new Animal();
|
||||
@@ -29,7 +29,7 @@ Hay algunas desventajas cuando se utiliza esta sintaxis para la herencia, pero s
|
||||
let animal = Object.create(Animal.prototype);
|
||||
```
|
||||
|
||||
`Object.create(obj)` crea un objeto nuevo y establece `obj` como el `prototype` del nuevo objeto. Recuerda que `prototype` es como la "receta" para crear un objecto. Al establecer el `prototype` de `animal` como el `prototype` de `Animal's`, estás dándole a la instancia `animal` la misma “receta" que a cualquier otra instancia de `Animal`.
|
||||
`Object.create(obj)` crea un objeto nuevo y establece `obj` como el `prototype` del nuevo objeto. Recuerda que `prototype` es como la "receta" para crear un objecto. Al establecer el `prototype` de `animal` como el `prototype` de `Animal`, estás dándole a la instancia `animal` la misma “receta" que a cualquier otra instancia de `Animal`.
|
||||
|
||||
```js
|
||||
animal.eat();
|
||||
|
||||
@@ -36,10 +36,10 @@ Bird.prototype.eat = function() {
|
||||
};
|
||||
```
|
||||
|
||||
Si tienes una instancia de `let duck = new Bird();` y llamas a `duck.eat()`, de esta manera es como JavaScript busca el método en la cadena de `duck’s` `prototype`:
|
||||
Si tienes una instancia de `let duck = new Bird();` y llamas a `duck.eat()`, así es como JavaScript busca el método en la cadena `prototype` de `duck`:
|
||||
|
||||
1. `duck` => ¿Está `eat()` definido aquí? No.
|
||||
2. `Bird` => ¿Está `eat()` definido aquí? => Sí. Ejecutala y detén la búsqueda.
|
||||
2. `Bird` => ¿Está `eat()` definido aquí? => Sí. Ejecútala y detén la búsqueda.
|
||||
3. `Animal` => `eat()` también está definido, pero JavaScript dejó de buscar antes de llegar a este nivel.
|
||||
4. Object => JavaScript dejó de buscar antes de llegar a este nivel.
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ let duck = new Bird();
|
||||
duck.constructor
|
||||
```
|
||||
|
||||
Pero `duck` y todas las instancias de `Bird` deberían mostrar que fueron construidas por `Bird` y no `Animal`. Para hacer esto, puedes establecer de forma manual la propiedad constructor `Bird's` al objeto `Bird`:
|
||||
Pero `duck` y todas las instancias de `Bird` deberían mostrar que fueron construidas por `Bird` y no `Animal`. Para ello, puedes establecer manualmente la propiedad del constructor de `Bird` al objeto `Bird`:
|
||||
|
||||
```js
|
||||
Bird.prototype.constructor = Bird;
|
||||
|
||||
@@ -12,7 +12,7 @@ Dado que `numLegs` probablemente tendrán el mismo valor para todas las instanci
|
||||
|
||||
Esto puede que no sea un problema cuando sólo hay dos instancias, pero imagina si hay millones de instancias. Eso sería un montón de variables duplicadas.
|
||||
|
||||
Una mejor manera es usar `Bird’s` `prototype`. Las propiedades del `prototype` se comparten entre TODAS las instancias de `Bird`. A continuación se explica cómo añadir `numLegs` al prototipo `Bird prototype`:
|
||||
Una mejor forma es utilizar el `prototype` de `Bird`. Las propiedades del `prototype` se comparten entre TODAS las instancias de `Bird`. A continuación se explica cómo añadir `numLegs` al prototipo `Bird prototype`:
|
||||
|
||||
```js
|
||||
Bird.prototype.numLegs = 2;
|
||||
@@ -45,7 +45,7 @@ assert(beagle.numLegs !== undefined);
|
||||
assert(typeof beagle.numLegs === 'number');
|
||||
```
|
||||
|
||||
`numLegs` debe ser una propiedad `prototype`, no una propiedad `own`.
|
||||
`numLegs` debe ser una propiedad `prototype`, no una propiedad directa.
|
||||
|
||||
```js
|
||||
assert(beagle.hasOwnProperty('numLegs') === false);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616e
|
||||
title: Access Props Using this.props
|
||||
title: Accede a propiedades "props" usando this.props
|
||||
challengeType: 6
|
||||
forumTopicId: 301375
|
||||
dashedName: access-props-using-this-props
|
||||
@@ -8,17 +8,17 @@ dashedName: access-props-using-this-props
|
||||
|
||||
# --description--
|
||||
|
||||
The last several challenges covered the basic ways to pass props to child components. But what if the child component that you're passing a prop to is an ES6 class component, rather than a stateless functional component? The ES6 class component uses a slightly different convention to access props.
|
||||
Los últimos desafíos cubrieron las formas básicas de pasar propiedades a un componente hijo. Pero, ¿qué pasa si el componente hijo al que se le pasa una propiedad es un componente de clase ES6, en lugar de un componente funcional sin estado? Los componentes de clase ES6 usan una convención un poco diferente para acceder a las propiedades.
|
||||
|
||||
Anytime you refer to a class component within itself, you use the `this` keyword. To access props within a class component, you preface the code that you use to access it with `this`. For example, if an ES6 class component has a prop called `data`, you write `{this.props.data}` in JSX.
|
||||
Cada vez que se hace referencia a un componente de clase en sí mismo, se utiliza la palabra clave `this`. Para acceder a las propiedades dentro de un componente de clase, se antepone al código que se utiliza para acceder a él con `this`. Por ejemplo, si un componente de clase de ES6 tiene una propiedad llamada `data`, se escribirá `{this.props.data}` en JSX.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Render an instance of the `ReturnTempPassword` component in the parent component `ResetPassword`. Here, give `ReturnTempPassword` a prop of `tempPassword` and assign it a value of a string that is at least 8 characters long. Within the child, `ReturnTempPassword`, access the `tempPassword` prop within the `strong` tags to make sure the user sees the temporary password.
|
||||
Renderiza una instancia del componente `ReturnTempPassword` en el componente padre `ResetPassword`. Aquí, dale a `ReturnTempPassword` una propiedad de `tempPassword` y asígnale un valor de una cadena que tenga al menos 8 caracteres. Dentro del componente hijo, `ReturnTempPassword`, accede a la propiedad `tempPassword` dentro de las etiquetas `strong` para asegurarte que el usuario vea una contraseña temporal.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `ResetPassword` component should return a single `div` element.
|
||||
El componente `ResetPassword` debe devolver un único elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fourth child of `ResetPassword` should be the `ReturnTempPassword` component.
|
||||
El cuarto componente hijo de `ResetPassword` debe ser el componente `ReturnTempPassword`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `ReturnTempPassword` component should have a prop called `tempPassword`.
|
||||
El componente `ReturnTempPassword` debe tener una propiedad llamada `tempPassword`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `tempPassword` prop of `ReturnTempPassword` should be equal to a string of at least `8` characters.
|
||||
La propiedad `tempPassword` de `ReturnTempPassword` debe ser igual a una cadena de al menos 8 caracteres.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -66,7 +66,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `ReturnTempPassword` component should display the password you create as the `tempPassword` prop within `strong` tags.
|
||||
El componente `ReturnTempPassword` debe mostrar la contraseña creada en la propiedad `tempPassword` dentro de las etiquetas `strong`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24bbe0dba28a8d3cbd4c5e
|
||||
title: Add Comments in JSX
|
||||
title: Agrega comentarios en JSX
|
||||
challengeType: 6
|
||||
forumTopicId: 301376
|
||||
dashedName: add-comments-in-jsx
|
||||
@@ -8,35 +8,35 @@ dashedName: add-comments-in-jsx
|
||||
|
||||
# --description--
|
||||
|
||||
JSX is a syntax that gets compiled into valid JavaScript. Sometimes, for readability, you might need to add comments to your code. Like most programming languages, JSX has its own way to do this.
|
||||
JSX es una sintaxis que se compila en JavaScript válido. A veces, para facilitar la lectura, es necesario añadir comentarios al código. Como la mayoría de los lenguajes de programación, JSX tiene su propia manera de hacerlo.
|
||||
|
||||
To put comments inside JSX, you use the syntax `{/* */}` to wrap around the comment text.
|
||||
Para agregar comentarios dentro de JSX, se utiliza la sintaxis `{/* */}` para envolver el texto del comentario.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a JSX element similar to what you created in the last challenge. Add a comment somewhere within the provided `div` element, without modifying the existing `h1` or `p` elements.
|
||||
El editor de código tiene un elemento JSX similar al que creaste en el último desafío. Agrega un comentario en algún lugar dentro del elemento `div`, sin modificar los elementos `h1` o `p`.
|
||||
|
||||
# --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 elemento `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 elemento `div` debe contener una etiqueta `p` como segundo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[1].type === 'p');
|
||||
```
|
||||
|
||||
The existing `h1` and `p` elements should not be modified.
|
||||
Los elementos `h1` y `p` existentes no deben ser modificados.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `JSX` should use valid comment syntax.
|
||||
El elemento`JSX` debe usar una sintaxis de comentario válida.
|
||||
|
||||
```js
|
||||
assert(/<div>[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036182
|
||||
title: Add Inline Styles in React
|
||||
title: Agrega estilos en línea en React
|
||||
challengeType: 6
|
||||
forumTopicId: 301378
|
||||
dashedName: add-inline-styles-in-react
|
||||
@@ -8,41 +8,41 @@ dashedName: add-inline-styles-in-react
|
||||
|
||||
# --description--
|
||||
|
||||
You may have noticed in the last challenge that there were several other syntax differences from HTML inline styles in addition to the `style` attribute set to a JavaScript object. First, the names of certain CSS style properties use camel case. For example, the last challenge set the size of the font with `fontSize` instead of `font-size`. Hyphenated words like `font-size` are invalid syntax for JavaScript object properties, so React uses camel case. As a rule, any hyphenated style properties are written using camel case in JSX.
|
||||
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.
|
||||
|
||||
All property value length units (like `height`, `width`, and `fontSize`) are assumed to be in `px` unless otherwise specified. If you want to use `em`, for example, you wrap the value and the units in quotes, like `{fontSize: "4em"}`. Other than the length values that default to `px`, all other property values should be wrapped in quotes.
|
||||
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.
|
||||
|
||||
# --instructions--
|
||||
|
||||
If you have a large set of styles, you can assign a style `object` to a constant to keep your code organized. Initialize a `styles` constant and assign an `object` with three style properties and their values to it. Give the `div` a color of `"purple"`, a font-size of `40`, and a border of `"2px solid purple"`. Then set the `style` attribute equal to the `styles` constant.
|
||||
Si tienes una gran cantidad de estilos, puedes asignar un `object` de estilos a una constante para mantener tu código organizado. Declara tu constante "styles" como una variable global al principio del archivo. Inicializa la constante `styles` y asígnale un `object` con tres propiedades de estilo y sus valores. Dale al `div` un color `purple`, un tamaño de fuente de `40` y un borde `2px solid purple`. Luego asigna al atributo `style` la constante `styles`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `styles` variable should be an `object` with three properties.
|
||||
La variable `styles` debe ser un `object` con tres propiedades.
|
||||
|
||||
```js
|
||||
assert(Object.keys(styles).length === 3);
|
||||
```
|
||||
|
||||
The `styles` variable should have a `color` property set to a value of `purple`.
|
||||
La variable `styles` debe contener una propiedad `color` con el valor de `purple`.
|
||||
|
||||
```js
|
||||
assert(styles.color === 'purple');
|
||||
```
|
||||
|
||||
The `styles` variable should have a `fontSize` property set to a value of `40`.
|
||||
La variable `styles` debe contener una propiedad `fontSize` con el valor de `40`.
|
||||
|
||||
```js
|
||||
assert(styles.fontSize === 40);
|
||||
```
|
||||
|
||||
The `styles` variable should have a `border` property set to a value of `2px solid purple`.
|
||||
La variable `styles` debe contener una propiedad `border` con el valor de `2px solid purple`.
|
||||
|
||||
```js
|
||||
assert(styles.border === '2px solid purple');
|
||||
```
|
||||
|
||||
The component should render a `div` element.
|
||||
El componente debe renderizar un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have its styles defined by the `styles` object.
|
||||
El elemento `div` debe tener sus estilos definidos en el objeto `styles`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user