chore(i18n,curriculum): processed translations (#43435)
This commit is contained in:
camperbot
GitHub
@@ -10,15 +10,15 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que se aprueben todas las pruebas. Dale tu estilo personal.
|
||||
Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue que pasen todas las pruebas. Dale tu propio estilo personal.
|
||||
|
||||
Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, y jQuery para completar este proyecto. Debe usar un framework de frontend (como React por ejemplo). Porque esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales a las indicadas anteriormente, su utilización, corre bajo tu propio riesgo. Estamos buscando dar soporte a otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el conjunto de tecnologías sugeridas para este proyecto. ¡Feliz programación!
|
||||
Puedes utilizar cualquier combinación de HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux y jQuery para completar este proyecto. Debe usar un framework frontend (como React por ejemplo), ya que esta sección trata sobre el aprendizaje de frameworks frontend. No se recomienda utilizar tecnologías adicionales que no estén enlistadas, su uso corre bajo tu propio riesgo. Estamos buscando apoyar otros frameworks de frontend como Angular y Vue, pero actualmente no están soportados. Aceptaremos e intentaremos arreglar todos los informes de problemas que utilicen el stack de tecnologías sugeridas para este proyecto. ¡Feliz codificación!
|
||||
|
||||
**Historia de usuario #1:** Debe ser capaz de ver un contenedor externo con un correspondiente `id="drum-machine"` que contiene todos los demás elementos.
|
||||
|
||||
**Historia de usuario #2:** Dentro de `#drum-machine` Puedo ver un elemento con un `id="display"` correspondiente.
|
||||
|
||||
**Historia de usuario #3:** Dentro de `#drum-machine` Puedo ver 9 elementos del panel de tambores clickables, cada una con un nombre de clase de `drum-pad`, un identificador único que describe el clip de audio que el pad de tambor será configurado para activar, y un texto interno que corresponde a una de las siguientes teclas del teclado: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Los pads de la batería DEBEN estar en este orden.
|
||||
**Historia de usuario #3:** Dentro de `#drum-machine`Puedo ver 9 elementos de drum pad en los que se puede hacer clic, cada uno con un nombre de clase de `drum-pad`, un identificador único que describe el clip de audio que el pad de tambor será configurado para activar, y un texto interno que corresponde a una de las siguientes teclas del teclado: `Q`, `W`, `E`, `A`, `S`, `D`, `Z`, `X`, `C`. Los pads de la batería DEBEN estar en este orden.
|
||||
|
||||
**Historia de usuario #4:** Dentro de cada `.drum-pad`, debe haber un elemento HTML5 `audio` que tenga un atributo `src` apuntando a un clip de audio, un nombre de clase `clip`, y un id correspondiente al texto interno de su padre `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
|
||||
|
||||
@@ -28,7 +28,7 @@ Puede utilizar cualquier mezcla de HTML, JavaScript, CSS, Bootstrap, SASS, React
|
||||
|
||||
**Historia de usuario #7:** Cuando es un `.drum-pad` es activado, una cadena que describe el clip de audio asociado se muestra como el texto interior del elemento `#display` (cada cadena debe ser única).
|
||||
|
||||
Puedes construir tu proyecto usando <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar las pruebas en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Puedes construir tu proyecto con <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio entorno. O puedes usar este enlace CDN(Red de distribución de contenidos) para ejecutar las pruebas en cualquier entorno de tu preferencia: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
Ahora que entiendes cómo usar `connect` para conectar React a Redux, puedes aplicar lo que has aprendido a tu componente React que maneja mensajes.
|
||||
|
||||
En la última lección, el componente que conectaste a Redux se llamó `Presentational`, y esto no fue arbitrario. Este término *generalmente* se refiere a componentes React que no están directamente conectados a Redux. Ellos simplemente son responsables de la presentación de la interfaz de usuario y lo hacen en función de las props que reciben. Por el contrario, los contenedores componentes están conectados a Redux. Estos son típicamente responsables de enviar acciones al store y a menudo pasan el estado del store a componentes secundarios como props.
|
||||
En la última lección, el componente que conectaste a Redux se llamó `Presentational`, y esto no fue arbitrario. Este término *generalmente* se refiere a componentes React que no están directamente conectados a Redux. Ellos simplemente son responsables de la presentación de la interfaz de usuario y lo hacen en función de las props que reciben. Por el contrario, los componentes contenedores están conectados a Redux. Estos son típicamente responsables de enviar acciones al store (almacén) y a menudo pasan el estado del store a componentes secundarios como props.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ Una vez realizados estos cambios, la aplicación seguirá funcionando igual, sal
|
||||
|
||||
# --hints--
|
||||
|
||||
`AppWrapper` debe renderizarse.
|
||||
El `AppWrapper` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
El componente `Presentational` debe renderizar los siguientes elementos: `h2`, `input`, `button` y `ul`.
|
||||
El componente `Presentational` debe renderizar los siguientes elementos: un `h2`, `input`, `button`, y `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
El componente `Presentational` debe recibir `messages` desde el almacenamiento de Redux como una propiedad.
|
||||
El componente `Presentational` debe recibir `messages` desde el store Redux como una prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
El componente `Presentational` debe recibir `submitMessage` como una propiedad.
|
||||
El componente `Presentational` debe recibir la acción `submitMessage` como una prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617e
|
||||
title: Agrega detector de eventos (Event Listeners)
|
||||
title: Agrega detectores de eventos (Event Listeners)
|
||||
challengeType: 6
|
||||
forumTopicId: 301377
|
||||
dashedName: add-event-listeners
|
||||
|
||||
@@ -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 "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.
|
||||
Es posible que hayas notado en el último desafío que había otras diferencias de sintaxis con respecto a los "inline styles" (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.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ dashedName: change-inline-css-conditionally-based-on-component-state
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
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 manejar directamente la manipulación. 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--
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ A medida que los desafíos continúan utilizando composiciones más complejas co
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
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--
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ Define una nueva constante `JSX` que renderice un `div` que contenga los siguien
|
||||
|
||||
Un `h1`, un `p` y una lista desordenada que contiene tres elementos `li`. Puedes incluir cualquier texto que desees dentro de cada elemento.
|
||||
|
||||
**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.
|
||||
**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--
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ Por último, crea una etiqueta `h1` después del `form` que renderiza el valor d
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyForm` debe retornar un elemento `div` que contiene un `form` y una etiqueta `h1`. El formulario debe incluir un `input` y un `button`.
|
||||
`MyForm` debe devolver un elemento `div` que contiene un `form` y una etiqueta `h1`. El formulario debe incluir un `input` y un `button`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -38,7 +38,7 @@ El componente React debe devolver un único elemento `div`.
|
||||
assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
|
||||
```
|
||||
|
||||
El `div` retornado debe renderizar un encabezado `h1` dentro de él.
|
||||
El `div` devuelto debe renderizar un encabezado `h1` dentro de él.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036162
|
||||
title: Crear un componente funcional sin estado
|
||||
title: Crea un componente funcional sin estado
|
||||
challengeType: 6
|
||||
forumTopicId: 301392
|
||||
dashedName: create-a-stateless-functional-component
|
||||
@@ -34,7 +34,7 @@ El editor de código tiene una función llamada `MyComponent`. Completa esta fun
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` debe retornar JSX.
|
||||
`MyComponent` debe devolver JSX.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -8,7 +8,7 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
Los últimos desafíos trabajaron con arreglos, pero hay maneras de ayudar a reforzar la inmutabilidad del estado cuando el estado es también un `object`. Una herramienta útil para el manejo de objetos es la utilidad `Object.assign()`. `Object.assign()` toma un objeto de destino y objetos de origen y asigna propiedades de los objetos de origen al objeto de destino. Las propiedades que coinciden se sobrescriben con las propiedades de los objetos de origen. Este comportamiento se utiliza comúnmente para hacer copias superficiales de objetos pasando un objeto vacío como primer argumento seguido por el/los objeto(s) que se desea(n) copiar. Aquí hay un ejemplo:
|
||||
Los últimos desafíos trabajaron con arreglos, pero hay maneras de ayudar a reforzar la inmutabilidad del estado cuando el estado es también un `object`. Una herramienta útil para el manejo de objetos es la utilidad `Object.assign()`. `Object.assign()` toma un objeto de destino y objetos de origen y asigna propiedades de los objetos de origen al objeto de destino. Las propiedades que coinciden se sobrescriben con las propiedades de los objetos de origen. Este comportamiento se utiliza comúnmente para hacer copias superficiales de objetos pasando un objeto vacío como primer argumento seguido por el/los objeto(s) que se desea(n) copiar. A continuación un ejemplo:
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
|
||||
@@ -16,7 +16,7 @@ Esto también significa que cada vez que cualquier pieza de tu aplicación quier
|
||||
|
||||
# --instructions--
|
||||
|
||||
El `store` de Redux es un objeto que guarda y gestiona el `state` de la aplicación. Hay un método llamado `createStore()` en el objeto Redux, que se utiliza para crear el `store` Redux. Este método toma una función `reducer` como argumento obligatorio. La función `reducer` se trata en un desafío posterior, y ya está definida para ti en el editor de código. Simplemente toma `state` como argumento y devuelve `state`.
|
||||
El `store` (almacén) de Redux es un objeto que guarda y gestiona el `state` (estado) de la aplicación. Hay un método llamado `createStore()` en el objeto Redux, que se utiliza para crear el `store` Redux. Este método toma una función `reducer` como argumento obligatorio. La función `reducer` se trata en un desafío posterior, y ya está definida para ti en el editor de código. Simplemente toma `state` como argumento y devuelve `state`.
|
||||
|
||||
Declara una variable `store` y asígnala al método `createStore()`, pasando el `reducer` como argumento.
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ Recuerda que estás pasando `dispatch` como parámetro a este creador de accione
|
||||
|
||||
# --instructions--
|
||||
|
||||
Escribe ambos envíos en el creador de acción `handleAsync()`. Envía `requestingData()` antes del `setTimeout()` (la llamada a la API simulada). A continuación, después de recibir los datos (fingidos), envía la acción `receivedData()`, pasando estos datos. Ahora ya sabes cómo manejar las acciones asíncronas en Redux. Todo lo demás sigue comportándose como antes.
|
||||
Escribe ambos envíos en el creador de acción `handleAsync()`. Envía `requestingData()` antes del `setTimeout()` (la llamada al API simulada). A continuación, después de recibir los datos (fingidos), envía la acción `receivedData()`, pasando estos datos. Ahora ya sabes cómo manejar las acciones asíncronas en Redux. Todo lo demás sigue comportándose como antes.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user