chore(i18n,curriculum): update translations (#42742)
This commit is contained in:
camperbot
GitHub
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403618b
|
||||
title: Give Sibling Elements a Unique Key Attribute
|
||||
title: Proporciona a los elementos hermanos un atributo de clave única
|
||||
challengeType: 6
|
||||
forumTopicId: 301394
|
||||
dashedName: give-sibling-elements-a-unique-key-attribute
|
||||
@@ -8,19 +8,19 @@ dashedName: give-sibling-elements-a-unique-key-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed how the `map` method is used to dynamically render a number of elements based on user input. However, there was an important piece missing from that example. When you create an array of elements, each one needs a `key` attribute set to a unique value. React uses these keys to keep track of which items are added, changed, or removed. This helps make the re-rendering process more efficient when the list is modified in any way.
|
||||
El último desafío mostró cómo el método `map` es usado para representar dinámicamente un número de elementos según la entrada del usuario. Sin embargo, faltaba una pieza importante de ese ejemplo. Cuando creas un arreglo de elementos, cada uno necesita un atributo `key` establecido en un valor único. React usa estas claves para realizar un seguimiento de los elementos que se agregan, cambian o eliminan. Esto ayuda a que el proceso de re-renderización sea más eficiente cuando la lista se modifica de alguna manera.
|
||||
|
||||
**Note:** Keys only need to be unique between sibling elements, they don't need to be globally unique in your application.
|
||||
**Nota:** Las claves solo necesitan ser únicas entre elementos hermanos, no es necesario que sean únicas globalmente en tu aplicación.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has an array with some front end frameworks and a stateless functional component named `Frameworks()`. `Frameworks()` needs to map the array to an unordered list, much like in the last challenge. Finish writing the `map` callback to return an `li` element for each framework in the `frontEndFrameworks` array. This time, make sure to give each `li` a `key` attribute, set to a unique value. The `li` elements should also contain text from `frontEndFrameworks`.
|
||||
El editor de código tiene un arreglo con algunos frameworks frontend y un componente funcional sin estado llamado `Frameworks()`. `Frameworks()` necesita mapear el arreglo a una lista desordenada, como en el último desafío. Finaliza la escritura del callback `map` para devolver un elemento `li` por cada framework en el arreglo `frontEndFrameworks`. Esta vez, debes asegurarte de dar a cada elemento `li` un atributo `key`, establecido a un valor único. Los elementos `li` también deben contener texto de `frontEndFrameworks`.
|
||||
|
||||
Normally, you want to make the key something that uniquely identifies the element being rendered. As a last resort the array index may be used, but typically you should try to use a unique identification.
|
||||
Normalmente, deseas hacer que la clave sea algo que identifique de manera única el elemento que se está procesando. Como último recurso se puede utilizar el índice del arreglo, pero normalmente se debe intentar usar una identificación única.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Frameworks` component should exist and render to the page.
|
||||
El componente `Frameworks` debe de existir y renderizar a la página.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -28,19 +28,19 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Frameworks` should render an `h1` element.
|
||||
`Frameworks` debe renderizar un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
|
||||
```
|
||||
|
||||
`Frameworks` should render a `ul` element.
|
||||
`Frameworks` debe renderizar un elemento `ul`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
|
||||
```
|
||||
|
||||
The `ul` tag should render 6 child `li` elements.
|
||||
La etiqueta `ul` debe renderizar 6 elementos hijos `li`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -54,7 +54,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each list item element should have a unique `key` attribute.
|
||||
Cada elemento de la lista de elementos debe tener un atributo `key` único.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -73,7 +73,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Each list item element should contain text from `frontEndFrameworks`.
|
||||
Cada elemento de la lista de elementos debe contener un texto de `frontEndFrameworks`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036181
|
||||
title: Introducing Inline Styles
|
||||
title: Introducción a los estilos en línea
|
||||
challengeType: 6
|
||||
forumTopicId: 301395
|
||||
dashedName: introducing-inline-styles
|
||||
@@ -8,29 +8,33 @@ dashedName: introducing-inline-styles
|
||||
|
||||
# --description--
|
||||
|
||||
There are other complex concepts that add powerful capabilities to your React code. But you may be wondering about the more simple problem of how to style those JSX elements you create in React. You likely know that it won't be exactly the same as working with HTML because of [the way you apply classes to JSX elements](/learn/front-end-libraries/react/define-an-html-class-in-jsx).
|
||||
Hay otros conceptos complejos que añaden poderosas capacidades a tu código de React. Pero tal vez te estés preguntando sobre el problema más sencillo de cómo dar estilo a esos elementos JSX que creas en React. Probablemente sepas que no será exactamente lo mismo que trabajar con HTML debido a [la manera en que aplicas clases a los elementos JSX](/learn/front-end-libraries/react/define-an-html-class-in-jsx).
|
||||
|
||||
If you import styles from a stylesheet, it isn't much different at all. You apply a class to your JSX element using the `className` attribute, and apply styles to the class in your stylesheet. Another option is to apply inline styles, which are very common in ReactJS development.
|
||||
Si importas estilos desde una hoja de estilos, esto no es muy diferente. Aplica una clase a tu elemento JSX usando el atributo `className`, y aplica estilos a la clase en tu hoja de estilos. Otra opción es aplicar estilos en línea, los cuales son muy comunes en el desarrollo de ReactJS.
|
||||
|
||||
You apply inline styles to JSX elements similar to how you do it in HTML, but with a few JSX differences. Here's an example of an inline style in HTML:
|
||||
Los estilos en línea se aplican a los elementos JSX de forma similar a como se hace en HTML, pero con algunas diferencias en JSX. Aquí hay un ejemplo de un estilo en línea en HTML:
|
||||
|
||||
`<div style="color: yellow; font-size: 16px">Mellow Yellow</div>`
|
||||
```jsx
|
||||
<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
|
||||
```
|
||||
|
||||
JSX elements use the `style` attribute, but because of the way JSX is transpiled, you can't set the value to a `string`. Instead, you set it equal to a JavaScript `object`. Here's an example:
|
||||
Los elementos JSX usan el atributo `style`, pero debido a la forma en que JSX es transpilado, no puede establecer el valor a un `string`. Es su lugar, lo establece igual a un `object` de JavaScript. Aquí un ejemplo:
|
||||
|
||||
`<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>`
|
||||
```jsx
|
||||
<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
|
||||
```
|
||||
|
||||
Notice how we camelCase the "fontSize" property? This is because React will not accept kebab-case keys in the style object. React will apply the correct property name for us in the HTML.
|
||||
¿Notas cómo ponemos en camelCase la propiedad `fontSize`? Esto es porque React no aceptará claves kebab-case en el objeto de estilo. React aplicará el nombre correcto de la propiedad por nosotros en el HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `style` attribute to the `div` in the code editor to give the text a color of red and font size of 72px.
|
||||
Agrega un atributo `style` al `div` en el editor de código para darle al texto un color rojo y un tamaño de fuente de `72px`.
|
||||
|
||||
Note that you can optionally set the font size to be a number, omitting the units "px", or write it as "72px".
|
||||
Ten en cuenta que puedes establecer opcionalmente el tamaño de la fuente para que sea un número, omitiendo las unidades `px`, o escribirlo como `72px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The component should render a `div` element.
|
||||
El componente debe renderizar un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -41,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a color of `red`.
|
||||
El elemento `div` debe tener un color de `red`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -52,7 +56,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `div` element should have a font size of `72px`.
|
||||
El elemento `div` debe tener un tamaño de fuente de `72px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036161
|
||||
title: Learn About Self-Closing JSX Tags
|
||||
title: Aprende sobre las etiquetas JSX auto-cerradas
|
||||
challengeType: 6
|
||||
forumTopicId: 301396
|
||||
dashedName: learn-about-self-closing-jsx-tags
|
||||
@@ -8,35 +8,35 @@ dashedName: learn-about-self-closing-jsx-tags
|
||||
|
||||
# --description--
|
||||
|
||||
So far, you’ve seen how JSX differs from HTML in a key way with the use of `className` vs. `class` for defining HTML classes.
|
||||
Hasta ahora, has visto cómo JSX difiere de HTML de una manera clave con el uso de `className` vs. `class` para definir clases HTML.
|
||||
|
||||
Another important way in which JSX differs from HTML is in the idea of the self-closing tag.
|
||||
Otra forma importante en la que JSX difiere de HTML está en la idea de la etiqueta de auto-cierre.
|
||||
|
||||
In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.
|
||||
En HTML, casi todas las etiquetas tienen una etiqueta de apertura y cierre: `<div></div>`; la etiqueta de cierre siempre tiene una barra inclinada antes del nombre de la etiqueta que está cerrando. Sin embargo, hay instancias especiales en HTML llamadas “etiquetas auto-cerradas”, o etiquetas que no requieren una etiqueta de apertura y cierre antes de que otra etiqueta pueda comenzar.
|
||||
|
||||
For example the line-break tag can be written as `<br>` or as `<br />`, but should never be written as `<br></br>`, since it doesn't contain any content.
|
||||
Por ejemplo, la etiqueta salto de línea puede escribirse como `<br>` o como `<br />`, pero nunca debería escribirse como `<br></br>`, ya que no contiene ningún contenido.
|
||||
|
||||
In JSX, the rules are a little different. Any JSX element can be written with a self-closing tag, and every element must be closed. The line-break tag, for example, must always be written as `<br />` in order to be valid JSX that can be transpiled. A `<div>`, on the other hand, can be written as `<div />` or `<div></div>`. The difference is that in the first syntax version there is no way to include anything in the `<div />`. You will see in later challenges that this syntax is useful when rendering React components.
|
||||
En JSX, las reglas son un poco diferentes. Cualquier elemento JSX se puede escribir con una etiqueta de auto-cierre, y cada elemento debe ser cerrado. La etiqueta de salto de línea, por ejemplo, siempre debe escribirse como `<br />` para ser un JSX válido que puede ser transpilado. Por otra parte, un `<div>` puede escribirse como `<div />` o `<div></div>`. La diferencia es que en la primera versión de sintaxis no hay forma de incluir nada en la `<div />`. Verás en desafíos posteriores que esta sintaxis es útil al renderizar componentes de React.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fix the errors in the code editor so that it is valid JSX and successfully transpiles. Make sure you don't change any of the content - you only need to close tags where they are needed.
|
||||
Corrige los errores en el editor de código para que sea JSX válido y se transpile exitosamente. Asegúrate de no cambiar nada del contenido: sólo tienes que cerrar las etiquetas donde se necesite.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return a `div` element.
|
||||
La constante `JSX` debe devolver un elemento `div`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(JSX.type, 'div');
|
||||
```
|
||||
|
||||
The `div` should contain a `br` tag.
|
||||
El `div` debe contener una etiqueta `br`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(JSX).find('br').length === 1);
|
||||
```
|
||||
|
||||
The `div` should contain an `hr` tag.
|
||||
El `div` debe contener una etiqueta `hr`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(JSX).find('hr').length === 1);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036180
|
||||
title: Optimize Re-Renders with shouldComponentUpdate
|
||||
title: Optimiza re-renderizadores con shouldComponentUpdate
|
||||
challengeType: 6
|
||||
forumTopicId: 301398
|
||||
dashedName: optimize-re-renders-with-shouldcomponentupdate
|
||||
@@ -8,17 +8,17 @@ dashedName: optimize-re-renders-with-shouldcomponentupdate
|
||||
|
||||
# --description--
|
||||
|
||||
So far, if any component receives new `state` or new `props`, it re-renders itself and all its children. This is usually okay. But React provides a lifecycle method you can call when child components receive new `state` or `props`, and declare specifically if the components should update or not. The method is `shouldComponentUpdate()`, and it takes `nextProps` and `nextState` as parameters.
|
||||
Hasta ahora, si cualquier componente recibe un nuevo `state` o un nuevo `props`, se vuelve a renderizar a sí mismo y a todos sus hijos. Normalmente, esto está bien. Pero React proporciona un método de ciclo de vida al que puedes llamar cuando los componentes hijos reciben nuevos `state` o `props`, y declarar específicamente si los componentes deben actualizarse o no. El método es `shouldComponentUpdate()`y toma `nextProps` y `nextState` como parámetros.
|
||||
|
||||
This method is a useful way to optimize performance. For example, the default behavior is that your component re-renders when it receives new `props`, even if the `props` haven't changed. You can use `shouldComponentUpdate()` to prevent this by comparing the `props`. The method must return a `boolean` value that tells React whether or not to update the component. You can compare the current props (`this.props`) to the next props (`nextProps`) to determine if you need to update or not, and return `true` or `false` accordingly.
|
||||
Este método es una forma útil de optimizar el rendimiento. Por ejemplo, el comportamiento predeterminado es que el componente re-renderiza cuando recibe nuevos `props`, incluso si los `props` no han cambiado. Puedes usar `shouldComponentUpdate()` para evitar esto comparando los `props`. El método debe devolver un valor `boolean` que le diga a React si actualizar o no el componente. Puedes comparar los "props" actuales (`this.props`) a los siguientes "props" (`nextProps`) para determinar si necesita actualizar o no, y devuelve `true` o `false` en consecuencia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `shouldComponentUpdate()` method is added in a component called `OnlyEvens`. Currently, this method returns `true` so `OnlyEvens` re-renders every time it receives new `props`. Modify the method so `OnlyEvens` updates only if the `value` of its new props is even. Click the `Add` button and watch the order of events in your browser's console as the lifecycle hooks are triggered.
|
||||
El método `shouldComponentUpdate()` se añade en un componente llamado `OnlyEvens`. Actualmente, este método devuelve `true`, así que `OnlyEvens` re-renderizar cada vez que recibe nuevos `props`. Modifica el método para que `OnlyEvens` se actualice sólo si el `value` de sus nuevos accesorios es par. Haz clic en el botón `Add` y observa el orden de los eventos en la consola de tu navegador mientras se activan los "hooks" del ciclo de vida.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Controller` component should render the `OnlyEvens` component as a child.
|
||||
El componente `Controller` debe renderizar el componente `OnlyEvens` como un componente hijo.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `shouldComponentUpdate` method should be defined on the `OnlyEvens` component.
|
||||
El método `shouldComponentUpdate` debe definirse en el componente `OnlyEvens`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `OnlyEvens` component should return an `h1` tag which renders the value of `this.props.value`.
|
||||
El componente `OnlyEvens` debe devolver una etiqueta `h1` que renderiza el valor de `this.props.value`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@@ -64,7 +64,7 @@ The `OnlyEvens` component should return an `h1` tag which renders the value of `
|
||||
})();
|
||||
```
|
||||
|
||||
`OnlyEvens` should re-render only when `nextProps.value` is even.
|
||||
`OnlyEvens` debe re-renderizar sólo cuando `nextProps.value` sea par.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616c
|
||||
title: Override Default Props
|
||||
title: Reemplaza las "props" predeterminadas
|
||||
challengeType: 6
|
||||
forumTopicId: 301399
|
||||
dashedName: override-default-props
|
||||
@@ -8,17 +8,17 @@ dashedName: override-default-props
|
||||
|
||||
# --description--
|
||||
|
||||
The ability to set default props is a useful feature in React. The way to override the default props is to explicitly set the prop values for a component.
|
||||
La capacidad de establecer valores por defecto para las props es una característica útil en React. La manera de reemplazar las props predeterminadas es establecer explícitamente los valores de las props para un componente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `ShoppingCart` component now renders a child component `Items`. This `Items` component has a default prop `quantity` set to the integer `0`. Override the default prop by passing in a value of `10` for `quantity`.
|
||||
El componente `ShoppingCart` ahora renderiza un componente hijo `Items`. Este componente `Items` tiene una prop predeterminada `quantity` establecida al entero `0`. Reemplaza la prop predeterminada pasando un valor de `10` para `quantity`.
|
||||
|
||||
**Note:** Remember that the syntax to add a prop to a component looks similar to how you add HTML attributes. However, since the value for `quantity` is an integer, it won't go in quotes but it should be wrapped in curly braces. For example, `{100}`. This syntax tells JSX to interpret the value within the braces directly as JavaScript.
|
||||
**Nota:** Recuerda que la sintaxis para agregar una prop a un componente se parece a la sintaxis para agregar atributos en un elemento HTML. Sin embargo, dado que el valor de `quantity` es un entero, no irá entre comillas pero debe estar envuelto entre llaves. Por ejemplo, `{100}`. Esta sintaxis le dice a JSX que interprete el valor dentro de las llaves directamente como JavaScript.
|
||||
|
||||
# --hints--
|
||||
|
||||
The component `ShoppingCart` should render.
|
||||
El componente `ShoppingCart` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The component `Items` should render.
|
||||
El componente `Items` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Items` component should have a prop of `{ quantity: 10 }` passed from the `ShoppingCart` component.
|
||||
El componente `Items` debe tener una prop de `{ quantity: 10 }` heredada desde el componente `ShoppingCart`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617b
|
||||
title: Pass a Callback as Props
|
||||
title: Pasa un callback como "props"
|
||||
challengeType: 6
|
||||
forumTopicId: 301400
|
||||
dashedName: pass-a-callback-as-props
|
||||
@@ -8,17 +8,17 @@ dashedName: pass-a-callback-as-props
|
||||
|
||||
# --description--
|
||||
|
||||
You can pass `state` as props to child components, but you're not limited to passing data. You can also pass handler functions or any method that's defined on a React component to a child component. This is how you allow child components to interact with their parent components. You pass methods to a child just like a regular prop. It's assigned a name and you have access to that method name under `this.props` in the child component.
|
||||
Puedes pasar `state` como "props" a los componentes hijos, pero no estás limitado a pasar datos. También puedes pasar funciones manejadoras o cualquier método que se defina en un componente React a un componente hijo. Así es como tú permites que los componentes hijos interactúen con sus componentes padres. Pasas métodos a un hijo igual que un "prop" normal. Se le asigna un nombre y tienes acceso a ese nombre de método en `this.props` en el componente hijo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are three components outlined in the code editor. The `MyApp` component is the parent that will render the `GetInput` and `RenderInput` child components. Add the `GetInput` component to the render method in `MyApp`, then pass it a prop called `input` assigned to `inputValue` from `MyApp`'s `state`. Also create a prop called `handleChange` and pass the input handler `handleChange` to it.
|
||||
Hay tres componentes descritos en el editor de código. El componente `MyApp` es el padre que renderizará los componentes hijos `GetInput` y `RenderInput`. Añade el componente `GetInput` al método de renderizar en `MyApp`, luego pásale un "prop" llamado `input` asignado a `inputValue` desde el estado `state` de `MyApp`. También crea un "prop" llamado `handleChange` y pasa el controlador de entrada `handleChange` a este.
|
||||
|
||||
Next, add `RenderInput` to the render method in `MyApp`, then create a prop called `input` and pass the `inputValue` from `state` to it. Once you are finished you will be able to type in the `input` field in the `GetInput` component, which then calls the handler method in its parent via props. This updates the input in the `state` of the parent, which is passed as props to both children. Observe how the data flows between the components and how the single source of truth remains the `state` of the parent component. Admittedly, this example is a bit contrived, but should serve to illustrate how data and callbacks can be passed between React components.
|
||||
A continuación, añade `RenderInput` al método de renderizar en `MyApp`, luego crea un "prop" llamado `input` y pasa él `inputValue` desde el estado `state` a este. Una vez que hayas terminado podrás escribir en el campo `input` en el componente `GetInput`, que luego llama al método manejador en su padre a través de "props". Esto actualiza la entrada en el `state` del padre, que se pasa como "props" a ambos hijos. Observa cómo fluyen los datos entre los componentes y cómo la única fuente de verdad sigue siendo el `state` del componente padre. Es cierto que este ejemplo es un poco inventado, pero debe servir para ilustrar cómo los datos y los callbacks pueden ser pasados entre componentes React.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `MyApp` component should render.
|
||||
El componente `MyApp` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `GetInput` component should render.
|
||||
El componente `GetInput` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `RenderInput` component should render.
|
||||
El componente `RenderInput` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -51,7 +51,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `GetInput` component should receive the `MyApp` state property `inputValue` as props and contain an `input` element which modifies `MyApp` state.
|
||||
El componente `GetInput` debe recibir la propiedad de estado `MyApp` `inputValue` como "props" y contener un elemento `input` que modifica el estado de `MyApp`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@@ -74,7 +74,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The `RenderInput` component should receive the `MyApp` state property `inputValue` as props.
|
||||
El componente `RenderInput` debe recibir la propiedad de estado `MyApp` `inputValue` como "props".
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036169
|
||||
title: Pass Props to a Stateless Functional Component
|
||||
title: Pasa props a un componente funcional sin estado
|
||||
challengeType: 6
|
||||
forumTopicId: 301402
|
||||
dashedName: pass-props-to-a-stateless-functional-component
|
||||
@@ -8,7 +8,7 @@ dashedName: pass-props-to-a-stateless-functional-component
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: **props**. In React, you can pass props, or properties, to child components. Say you have an `App` component which renders a child component called `Welcome` which is a stateless functional component. You can pass `Welcome` a `user` property by writing:
|
||||
Los desafíos anteriores cubrieron varios casos de creación y composición de elementos de JSX, componentes funcionales y componentes de clase estilo ES6 en React. Con estos cimientos, ha llegado la hora de observar otro patrón de uso muy común en React: **props**. En React, se pueden pasar props, o propiedades a componentes hijos. Digamos, que tienes un componente `App` que devuelve un componente hijo llamado `Welcome`, el cual es un componente funcional sin estado. Puedes pasarle una propiedad llamada `user` a `Welcome` escribiendo:
|
||||
|
||||
```jsx
|
||||
<App>
|
||||
@@ -16,21 +16,21 @@ The previous challenges covered a lot about creating and composing JSX elements,
|
||||
</App>
|
||||
```
|
||||
|
||||
You use **custom HTML attributes** created by you and supported by React to be passed to the component. In this case, the created property `user` is passed to the component `Welcome`. Since `Welcome` is a stateless functional component, it has access to this value like so:
|
||||
Puedes utilizar **atributos personalizados de HTML** creados por ti y soportados por React para ser pasados por props a tu componente. En este caso, la propiedad creada `user` es pasada como atributo al componente `Welcome`. Dado que `Welcome` es un componente funcional sin estado, tiene acceso a este valor de la siguiente manera:
|
||||
|
||||
```jsx
|
||||
const Welcome = (props) => <h1>Hello, {props.user}!</h1>
|
||||
```
|
||||
|
||||
It is standard to call this value `props` and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.
|
||||
Este valor es llamado `props` por convención y, cuando se trata de componentes funcionales sin estado, se lo considera como un argumento pasado a una función que retorna JSX. Puedes acceder el valor del argumento en el cuerpo de la función. En los componentes de clase, verás que esto es un poco diferente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are `Calendar` and `CurrentDate` components in the code editor. When rendering `CurrentDate` from the `Calendar` component, pass in a property of `date` assigned to the current date from JavaScript's `Date` object. Then access this `prop` in the `CurrentDate` component, showing its value within the `p` tags. Note that for `prop` values to be evaluated as JavaScript, they must be enclosed in curly brackets, for instance `date={Date()}`.
|
||||
Hay componentes `Calendar` y `CurrentDate` en el editor de código. Al prensentar `CurrentDate` desde el componente `Calendar`, pasa una propiedad de `date` asignada a la fecha actual desde el objeto `Date` de JavaScript. Luego, accede a este `prop` dentro del componente `CurrentDate`, mostrando su valor dentro de las etiquetas `p`. Tenga en cuenta que los valores `prop` se evalúen como JavaScript, deben estar encerrados dentro de corchetes, por ejemplo `date={Date()}`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Calendar` component should return a single `div` element.
|
||||
El componente `Calendar` debe retornar un único elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -41,7 +41,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second child of the `Calendar` component should be the `CurrentDate` component.
|
||||
El segundo componente hijo del componente `Calendar` debe ser el componente `CurrentDate`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -52,7 +52,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `CurrentDate` component should have a prop called `date`.
|
||||
El componente `CurrentDate` debe tener una propiedad llamada `date`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -63,7 +63,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `date` prop of the `CurrentDate` should contain a string of text.
|
||||
La propiedad `date` del componente `CurrentDate` debe contener una cadena de texto.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -75,13 +75,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `date` prop should be generated by calling `Date()`
|
||||
La propiedad `date` debe ser generada invocando el método `Date()`
|
||||
|
||||
```js
|
||||
assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)));
|
||||
```
|
||||
|
||||
The `CurrentDate` component should render the value from the `date` prop in the `p` tag.
|
||||
El componente `CurrentDate` debe mostrar el valor del prop `date` dentro de la etiqueta `p`.
|
||||
|
||||
```js
|
||||
let date = 'dummy date';
|
||||
|
||||
Reference in New Issue
Block a user