chore(i18n,curriculum): update translations (#42918)
This commit is contained in:
camperbot
GitHub
@@ -33,7 +33,7 @@ assert(result[0] == '<h1>');
|
||||
`myRegex` debe usar una coincidencia perezosa
|
||||
|
||||
```js
|
||||
assert(/\?/g.test(myRegex));
|
||||
assert(/[^\\][\*\+\?]\?/.test(myRegex));
|
||||
```
|
||||
|
||||
`myRegex` no debe incluir la cadena `h1`
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036147
|
||||
title: Connect Redux to React
|
||||
title: Conecta Redux a React
|
||||
challengeType: 6
|
||||
forumTopicId: 301426
|
||||
dashedName: connect-redux-to-react
|
||||
@@ -8,23 +8,23 @@ dashedName: connect-redux-to-react
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've written both the `mapStateToProps()` and the `mapDispatchToProps()` functions, you can use them to map `state` and `dispatch` to the `props` of one of your React components. The `connect` method from React Redux can handle this task. This method takes two optional arguments, `mapStateToProps()` and `mapDispatchToProps()`. They are optional because you may have a component that only needs access to `state` but doesn't need to dispatch any actions, or vice versa.
|
||||
Ahora que has escrito tanto la función `mapStateToProps()` como la función `mapDispatchToProps()`, puedes usarlos para asignar `state` y `dispatch` a las `props` de uno de tus componentes React. El método `connect` de React Redux puede manejar esta tarea. Este método toma dos argumentos opcionales, `mapStateToProps()` y `mapDispatchToProps()`. Son opcionales porque puedes tener un componente que solo necesita acceso al `state` pero no necesita enviar ninguna acción, o viceversa.
|
||||
|
||||
To use this method, pass in the functions as arguments, and immediately call the result with your component. This syntax is a little unusual and looks like:
|
||||
Para utilizar este método, pasa las funciones como argumentos, y llama inmediatamente al resultado con tu componente. Esta sintaxis es un poco inusual y se ve así:
|
||||
|
||||
```js
|
||||
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
|
||||
```
|
||||
|
||||
**Note:** If you want to omit one of the arguments to the `connect` method, you pass `null` in its place.
|
||||
**Nota:** Si deseas omitir uno de los argumentos del método `connect`, pasa `null` en su lugar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has the `mapStateToProps()` and `mapDispatchToProps()` functions and a new React component called `Presentational`. Connect this component to Redux with the `connect` method from the `ReactRedux` global object, and call it immediately on the `Presentational` component. Assign the result to a new `const` called `ConnectedComponent` that represents the connected component. That's it, now you're connected to Redux! Try changing either of `connect`'s arguments to `null` and observe the test results.
|
||||
El editor de código tiene las funciones `mapStateToProps()` y `mapDispatchToProps()` y un nuevo componente React llamado `Presentational`. Conecta este componente a Redux con el método `connect` del objeto global `ReactRedux`, y llámalo inmediatamente en el componente `Presentational`. Asigna el resultado a una nueva `const` llamada `ConnectedComponent` que representa el componente conectado. Eso es todo, ¡ahora estás conectado a Redux! Intenta cambiar cualquiera de los argumentos de `connect` a `null` y observa los resultados de la prueba.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `Presentational` component should render.
|
||||
El componente `Presentational` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive a prop `messages` via `connect`.
|
||||
El componente `Presentational` debe recibir una prop `messages` a través de `connect`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive a prop `submitNewMessage` via `connect`.
|
||||
El componente `Presentational` debe recibir una prop `submitNewMessage` a través de `connect`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036148
|
||||
title: Connect Redux to the Messages App
|
||||
title: Conecta Redux a la aplicación de mensajes
|
||||
challengeType: 6
|
||||
forumTopicId: 301427
|
||||
dashedName: connect-redux-to-the-messages-app
|
||||
@@ -8,17 +8,17 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you understand how to use `connect` to connect React to Redux, you can apply what you've learned to your React component that handles messages.
|
||||
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.
|
||||
|
||||
In the last lesson, the component you connected to Redux was named `Presentational`, and this wasn't arbitrary. This term *generally* refers to React components that are not directly connected to Redux. They are simply responsible for the presentation of UI and do this as a function of the props they receive. By contrast, container components are connected to Redux. These are typically responsible for dispatching actions to the store and often pass store state to child components as 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 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.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has all the code you've written in this section so far. The only change is that the React component is renamed to `Presentational`. Create a new component held in a constant called `Container` that uses `connect` to connect the `Presentational` component to Redux. Then, in the `AppWrapper`, render the React Redux `Provider` component. Pass `Provider` the Redux `store` as a prop and render `Container` as a child. Once everything is setup, you will see the messages app rendered to the page again.
|
||||
El editor tiene todo el código que has escrito hasta ahora en esta sección. El único cambio es que el componente React se renombra a `Presentational`. Crea un nuevo componente en una constante llamada `Container` que usa `connect` para conectar el componente `Presentational` a Redux. Luego, en el `AppWrapper`, renderiza el componente `Provider` de React Redux. Pasa a `Provider` el `store` Redux como una prop y renderiza `Container` como un hijo. Una vez que todo esté configurado, verás que los mensajes de la aplicación son visualizados nuevamente en la página.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `AppWrapper` should render to the page.
|
||||
El `AppWrapper` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render to page.
|
||||
El componente `Presentational` debe renderizarse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should render an `h2`, `input`, `button`, and `ul` elements.
|
||||
El componente `Presentational` debe renderizar los siguientes elementos: un `h2`, `input`, `button`, y `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive `messages` from the Redux store as a prop.
|
||||
El componente `Presentational` debe recibir `messages` desde el store Redux como una prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Presentational` component should receive the `submitMessage` action creator as a prop.
|
||||
El componente `Presentational` debe recibir la acción `submitMessage` como una prop.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036176
|
||||
title: Use State to Toggle an Element
|
||||
title: Usa el estado para alternar un elemento
|
||||
challengeType: 6
|
||||
forumTopicId: 301421
|
||||
dashedName: use-state-to-toggle-an-element
|
||||
@@ -8,7 +8,7 @@ dashedName: use-state-to-toggle-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous - this means React may batch multiple `setState()` calls into a single update. This means you can't rely on the previous value of `this.state` or `this.props` when calculating the next value. So, you should not use code like this:
|
||||
A veces puedes necesitar conocer el estado anterior al actualizar el estado. Sin embargo, las actualizaciones del estado pueden ser asíncronas - esto significa que React puede procesar múltiples llamadas a `setState()` en una sola actualización. Esto significa que no puedes confiar en el valor anterior de `this.state` o `this.props` al calcular el siguiente valor. Por lo tanto, no debes usar código como este:
|
||||
|
||||
```jsx
|
||||
this.setState({
|
||||
@@ -16,7 +16,7 @@ this.setState({
|
||||
});
|
||||
```
|
||||
|
||||
Instead, you should pass `setState` a function that allows you to access state and props. Using a function with `setState` guarantees you are working with the most current values of state and props. This means that the above should be rewritten as:
|
||||
En su lugar, debes pasar una función a `setState` que te permitirá acceder al estado y props. El usar una función con `setState` te garantiza que estás trabajando con los valores más actuales del estado y props. Esto significa que lo anterior debe reescribirse así:
|
||||
|
||||
```jsx
|
||||
this.setState((state, props) => ({
|
||||
@@ -24,7 +24,7 @@ this.setState((state, props) => ({
|
||||
}));
|
||||
```
|
||||
|
||||
You can also use a form without `props` if you need only the `state`:
|
||||
También puedes usar un formulario sin `props` si necesitas solo el `state`:
|
||||
|
||||
```jsx
|
||||
this.setState(state => ({
|
||||
@@ -32,21 +32,21 @@ this.setState(state => ({
|
||||
}));
|
||||
```
|
||||
|
||||
Note that you have to wrap the object literal in parentheses, otherwise JavaScript thinks it's a block of code.
|
||||
Ten en cuenta que tienes que encapsular el objeto literal entre paréntesis, de lo contrario JavaScript pensará que es un bloque de código.
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyComponent` has a `visibility` property which is initialized to `false`. The render method returns one view if the value of `visibility` is true, and a different view if it is false.
|
||||
`MyComponent` tiene una propiedad `visibility` que se inicializa con el valor `false`. El método de renderización devuelve un resultado si el valor de `visibility` es verdadero, y un resultado diferente si es falso.
|
||||
|
||||
Currently, there is no way of updating the `visibility` property in the component's `state`. The value should toggle back and forth between true and false. There is a click handler on the button which triggers a class method called `toggleVisibility()`. Pass a function to `setState` to define this method so that the `state` of `visibility` toggles to the opposite value when the method is called. If `visibility` is `false`, the method sets it to `true`, and vice versa.
|
||||
Actualmente, no hay forma de actualizar la propiedad `visibility` en el `state` del componente. El valor debe cambiar entre verdadero y falso. Hay un manejador para el evento clic en el botón que activa un método de clase llamado `toggleVisibility()`. Pasa una función a `setState` para definir este método, de tal forma que el `state` de `visibility` cambie al valor opuesto cuando se llame el método. Si `visibility` es `false`, el método lo cambia a `true` y viceversa.
|
||||
|
||||
Finally, click the button to see the conditional rendering of the component based on its `state`.
|
||||
Finalmente, haz clic en el botón para ver la renderizado condicional del componente basado en su `state`.
|
||||
|
||||
**Hint:** Don't forget to bind the `this` keyword to the method in the `constructor`!
|
||||
**Pista:** ¡No olvides enlazar la palabra clave `this` al método en el `constructor`!
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should return a `div` element which contains a `button`.
|
||||
`MyComponent` debe devolver un elemento `div` el cual debe contener una etiqueta `button`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -56,7 +56,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyComponent` should initialize with a `visibility` property set to `false`.
|
||||
El estado de `MyComponent` debe inicializarse con una propiedad `visibility` establecida a `false`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -65,7 +65,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Clicking the button element should toggle the `visibility` property in state between `true` and `false`.
|
||||
Al hacer clic en el botón se debe cambiar la propiedad `visibility` en el estado entre `true` y `false`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@@ -89,7 +89,7 @@ Clicking the button element should toggle the `visibility` property in state bet
|
||||
})();
|
||||
```
|
||||
|
||||
An anonymous function should be passed to `setState`.
|
||||
Una función anónima debe pasarse a `setState`.
|
||||
|
||||
```js
|
||||
const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?';
|
||||
@@ -104,7 +104,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`this` should not be used inside `setState`
|
||||
`this` no debe usarse dentro de `setState`
|
||||
|
||||
```js
|
||||
assert(!/this\.setState\([^}]*this/.test(code));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617d
|
||||
title: Use the Lifecycle Method componentDidMount
|
||||
title: Usa el método de ciclo de vida componentDidMount
|
||||
challengeType: 6
|
||||
forumTopicId: 301422
|
||||
dashedName: use-the-lifecycle-method-componentdidmount
|
||||
@@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentdidmount
|
||||
|
||||
# --description--
|
||||
|
||||
Most web developers, at some point, need to call an API endpoint to retrieve data. If you're working with React, it's important to know where to perform this action.
|
||||
La mayoría de los desarrolladores web, en algún momento, necesitan llamar al endpoint de un API para obtener datos. Si estás trabajando con React, es importante saber dónde realizar esta acción.
|
||||
|
||||
The best practice with React is to place API calls or any calls to your server in the lifecycle method `componentDidMount()`. This method is called after a component is mounted to the DOM. Any calls to `setState()` here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.
|
||||
La mejor práctica con React es ubicar las llamadas API o cualquier llamada a tu servidor en el método de ciclo de vida `componentDidMount()`. Este método se llama después de que un componente es montado (mounted) en el DOM. Cualquier llamada a `setState()` aquí desencadenará un re-renderizado de tu componente. Cuando se llame a una API en este método, y se modifique el estado con los datos que la API devuelve, automáticamente se ejecutará una actualización una vez que los datos sean recibidos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There is a mock API call in `componentDidMount()`. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of `activeUsers` in the `h1` after the text `Active Users:`. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
|
||||
Hay una llamada simulada al API en `componentDidMount()`. Esta llamada modifica el estado después de 2.5 segundos para simular una llamada a un servidor para obtener datos. Este ejemplo consulta el total de usuarios activos actual para un sitio. En el método render, se renderiza el valor de `activeUsers` en el `h1` después del texto `Active Users:`. Mira lo que sucede en la vista previa, y siéntete libre de cambiar el tiempo de espera para ver los diferentes efectos.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element which wraps an `h1` tag.
|
||||
`MyComponent` debe mostrar un elemento `div` el cual contiene una etiqueta `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Component state should be updated with a timeout function in `componentDidMount`.
|
||||
El estado del componente debe actualizarse con una función timeout en `componentDidMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `h1` tag should render the `activeUsers` value from `MyComponent`'s state.
|
||||
La etiqueta `h1` debe renderizar el valor `activeUsers` del estado de `MyComponent`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617c
|
||||
title: Use the Lifecycle Method componentWillMount
|
||||
title: Usa el método de ciclo de vida componentWillMount
|
||||
challengeType: 6
|
||||
forumTopicId: 301423
|
||||
dashedName: use-the-lifecycle-method-componentwillmount
|
||||
@@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentwillmount
|
||||
|
||||
# --description--
|
||||
|
||||
React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` The next several lessons will cover some of the basic use cases for these lifecycle methods.
|
||||
Los componentes React tienen varios métodos especiales que proporcionan oportunidades para realizar acciones en puntos específicos en el ciclo de vida de un componente. Estos se llaman métodos de ciclo de vida, o interceptores (hooks) de ciclo de vida, y te permiten interceptar componentes en determinados momentos del tiempo. Esto puede ser antes de que se rendericen, antes de que se actualicen, antes de que reciban las props, antes de que se desmonten, etc. Aquí hay una lista de algunos de los métodos principales del ciclo de vida: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()`. Las siguientes lecciones cubrirán algunos de los casos de uso básicos para estos métodos del ciclo de vida.
|
||||
|
||||
**Note:** The `componentWillMount` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
**Nota:** El método de ciclo de vida `componentWillMount` se desaprobará en una versión futura de 16.X y se eliminará en la versión 17. [(Fuente)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `componentWillMount()` method is called before the `render()` method when a component is being mounted to the DOM. Log something to the console within `componentWillMount()` - you may want to have your browser console open to see the output.
|
||||
El método `componentWillMount()` es invocado antes del método `render()` cuando un componente está siendo montado en el DOM. Imprime algo en la consola dentro de `componentWillMount()` - puede que quieras tener la consola del navegador abierta para ver el resultado.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element.
|
||||
`MyComponent` debe renderizar un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`console.log` should be called in `componentWillMount`.
|
||||
`console.log` debe ser llamado en `componentWillMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036168
|
||||
title: Write a React Component from Scratch
|
||||
title: Escribe un componente React desde cero
|
||||
challengeType: 6
|
||||
forumTopicId: 301424
|
||||
dashedName: write-a-react-component-from-scratch
|
||||
@@ -8,17 +8,17 @@ dashedName: write-a-react-component-from-scratch
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've learned the basics of JSX and React components, it's time to write a component on your own. React components are the core building blocks of React applications so it's important to become very familiar with writing them. Remember, a typical React component is an ES6 `class` which extends `React.Component`. It has a render method that returns HTML (from JSX) or `null`. This is the basic form of a React component. Once you understand this well, you will be prepared to start building more complex React projects.
|
||||
Ahora que has aprendido los conceptos básicos de JSX y componentes React, es el momento de escribir un componente por tu cuenta. Los componentes React son el bloque de construcción principal de las aplicaciones React, por lo que es importante familiarizarse con cómo escribirlos. Recuerda, un componente típico de React es una `class` ES6 que hereda de `React.Component`. Tiene un método de render que retorna HTML (de JSX) o `null`. Esta es la estructura básica de un componente React. Una vez que tengas un buen entendimiento de esto, estarás preparado para empezar a construir proyectos React más complejos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a class `MyComponent` that extends `React.Component`. Its render method should return a `div` that contains an `h1` tag with the text: `My First React Component!` in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.
|
||||
Define una clase `MyComponent` que herede de `React.Component`. Su método render debe devolver un `div` que contenga una etiqueta `h1` con el texto: `My First React Component!` en él. Utiliza este texto de manera exacta, las mayúsculas, minúsculas y puntuación son importantes. También asegúrate de llamar el constructor de tu componente.
|
||||
|
||||
Render this component to the DOM using `ReactDOM.render()`. There is a `div` with `id='challenge-node'` available for you to use.
|
||||
Renderiza este componente al DOM usando `ReactDOM.render()`. Hay un `div` con `id='challenge-node'` disponible para que lo uses.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be a React component called `MyComponent`.
|
||||
Debe existir un componente React llamado `MyComponent`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -29,7 +29,7 @@ There should be a React component called `MyComponent`.
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should contain an `h1` tag with text `My First React Component!` Case and punctuation matter.
|
||||
`MyComponent` debe contener una etiqueta `h1` con texto `My First React Component!`. Las mayúsculas, minúsculas y puntuación son importantes.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,13 +40,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should render to the DOM.
|
||||
`MyComponent` debe renderizarse al DOM.
|
||||
|
||||
```js
|
||||
assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||
```
|
||||
|
||||
`MyComponent` should have a constructor calling `super` with `props`.
|
||||
`MyComponent` debe tener un constructor invocando `super` con las `props`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036177
|
||||
title: Write a Simple Counter
|
||||
title: Escribe un contador simple
|
||||
challengeType: 6
|
||||
forumTopicId: 301425
|
||||
dashedName: write-a-simple-counter
|
||||
@@ -8,17 +8,17 @@ dashedName: write-a-simple-counter
|
||||
|
||||
# --description--
|
||||
|
||||
You can design a more complex stateful component by combining the concepts covered so far. These include initializing `state`, writing methods that set `state`, and assigning click handlers to trigger these methods.
|
||||
Puedes diseñar un componente con un estado más complejo combinando los conceptos cubiertos hasta ahora. Estos incluyen inicializar el `state`, escribir métodos que establezcan `state` y asignar manejadores de eventos clic para activar estos métodos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `Counter` component keeps track of a `count` value in `state`. There are two buttons which call methods `increment()` and `decrement()`. Write these methods so the counter value is incremented or decremented by 1 when the appropriate button is clicked. Also, create a `reset()` method so when the reset button is clicked, the count is set to 0.
|
||||
El componente `Counter` mantiene un seguimiento de un valor `count` en el `state`. Hay dos botones que llaman a métodos `increment()` y `decrement()`. Escribe estos métodos para que el valor del contador sea incrementado o decrementado por 1 cuando se haga clic en el botón apropiado. También, crea un método `reset()` para que cuando se haga clic en el botón reset, el contador se establezca a 0.
|
||||
|
||||
**Note:** Make sure you don't modify the `className`s of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor.
|
||||
**Nota:** Asegúrate de no modificar el `className`de los botones. Además, recuerda agregar en el constructor los enlaces necesarios para los métodos recién creados.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Counter` should return a `div` element which contains three buttons with text content in this order `Increment!`, `Decrement!`, `Reset`.
|
||||
`Counter` debe devolver un elemento `div` que contiene tres botones con contenido de texto en este orden `Increment!`, `Decrement!`, `Reset`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -33,14 +33,14 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `Counter` should initialize with a `count` property set to `0`.
|
||||
El estado de `Counter` debe inicializarse con una propiedad `count` establecida en `0`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: 0');
|
||||
```
|
||||
|
||||
Clicking the increment button should increment the count by `1`.
|
||||
Al hacer clic en el botón de incremento se incrementará el contador en `1`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
@@ -48,7 +48,7 @@ mockedComponent.find('.inc').simulate('click');
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: 1');
|
||||
```
|
||||
|
||||
Clicking the decrement button should decrement the count by `1`.
|
||||
Al hacer clic en el botón de disminuir se reducirá el contador en `1`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
@@ -56,7 +56,7 @@ mockedComponent.find('.dec').simulate('click');
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: -1');
|
||||
```
|
||||
|
||||
Clicking the reset button should reset the count to `0`.
|
||||
Al hacer clic en el botón reset se reiniciará el contador a `0`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
|
||||
Reference in New Issue
Block a user