diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md index 7d03de4b79..9042bc4d1e 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md @@ -8,24 +8,28 @@ dashedName: reuse-patterns-using-capture-groups # --description-- -Algunos patrones que busques aparecerán múltiples veces en una cadena. Es un desperdicio repetir manualmente esa expresión regular. Existe una mejor forma de especificar que tienes múltiples subcadenas repetidas en tu cadena. - -Puedes buscar subcadenas repetidas utilizando grupos de captura. Los paréntesis, `(` y `)`, son usados para encontrar subcadenas repetidas. Introduces la expresión regular del patrón que se repetirá entre los paréntesis. - -Para especificar donde aparecerá esa cadena repetida, utilizarás una barra invertida (`\`) y luego un número. Este número inicia en 1 e incrementa con cada grupo de captura adicional que utilices. Un ejemplo podría ser `\1` para coincidir con el primer grupo. - -El siguiente ejemplo encuentra cualquier palabra que ocurra dos veces separada por un espacio: +Digamos que quieres hacer coincidir una palabra que aparece varias veces como la siguiente. ```js -let repeatStr = "regex regex"; -let repeatRegex = /(\w+)\s\1/; -repeatRegex.test(repeatStr); -repeatStr.match(repeatRegex); +let repeatStr = "row row row your boat"; ``` -La llamada a la función `test` devolverá `true`, y la llamada a la función `match` devolverá `["regex regex", "regex"]`. +Podrías usar `/row row row/`, pero ¿qué pasa si no conoces la palabra específica que se repite? Los grupos de captura pueden utilizarse para encontrar subcadenas repetidas. + +Los grupos de captura se construyen encerrando entre paréntesis el patrón de expresión regular a capturar. En este caso, el objetivo es capturar una palabra formada por caracteres alfanuméricos, por lo que el grupo de captura será `\w+` encerrado entre paréntesis: `/(\w+)/`. + +La subcadena que coincide con el grupo se guarda en una "variable" temporal, a la que se puede acceder dentro de la misma expresión regular utilizando una barra invertida y el número del grupo de captura (por ejemplo, `\1`). Los grupos de captura se numeran automáticamente por la posición de sus paréntesis de apertura (de izquierda a derecha), empezando por el 1. + +El siguiente ejemplo encuentra cualquier palabra que aparezca tres veces separada por un espacio: + +```js +let repeatRegex = /(\w+) \1 \1/; +repeatRegex.test(repeatStr); // Returns true +repeatStr.match(repeatRegex); // Returns ["row row row", "row"] +``` + +El uso del método `.match()` en una cadena devolverá un arreglo con la subcadena coincidente, junto con sus grupos capturados. -Utilizar el método `.match()` en una cadena devuelve un arreglo con la cadena que coincide, junto con su grupo de captura. # --instructions-- diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md index 6718ed802e..27b9e55818 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/extract-state-logic-to-redux.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036143 -title: Extract State Logic to Redux +title: Extrae la lógica de estado a Redux challengeType: 6 forumTopicId: 301429 dashedName: extract-state-logic-to-redux @@ -8,23 +8,23 @@ dashedName: extract-state-logic-to-redux # --description-- -Now that you finished the React component, you need to move the logic it's performing locally in its `state` into Redux. This is the first step to connect the simple React app to Redux. The only functionality your app has is to add new messages from the user to an unordered list. The example is simple in order to demonstrate how React and Redux work together. +Ahora que has terminado el componente React, necesitas mover la lógica que está realizando localmente en su `state` hacia Redux. Este es el primer paso para conectar la aplicación simple de React a Redux. La única funcionalidad que tiene tu aplicación es añadir nuevos mensajes del usuario a una lista desordenada. El ejemplo es simple para demostrar cómo React y Redux trabajan juntos. # --instructions-- -First, define an action type `ADD` and set it to a const `ADD`. Next, define an action creator `addMessage()` which creates the action to add a message. You'll need to pass a `message` to this action creator and include the message in the returned `action`. +En primer lugar, define un tipo de acción `ADD` y asígnalo a una const `ADD`. A continuación, define un creador de acciones `addMessage()` que crea la acción para añadir un mensaje. Tendrás que pasar un `message` a este creador de acciones e incluir el mensaje en la `action` devuelta. -Then create a reducer called `messageReducer()` that handles the state for the messages. The initial state should equal an empty array. This reducer should add a message to the array of messages held in state, or return the current state. Finally, create your Redux store and pass it the reducer. +Luego crea un reductor llamado `messageReducer()` que maneja el estado de los mensajes. El estado inicial debe ser igual a un arreglo vacío. Este reductor debe añadir un mensaje al arreglo de mensajes mantenido en el estado, o devolver el estado actual. Finalmente, crea tu almacén Redux y pásale el reductor. # --hints-- -The const `ADD` should exist and hold a value equal to the string `ADD` +La const `ADD` debe existir y mantener un valor igual a la cadena `ADD` ```js assert(ADD === 'ADD'); ``` -The action creator `addMessage` should return an object with `type` equal to `ADD` and `message` equal to the message that is passed in. +El creador de acción `addMessage` debe devolver un objeto con `type` igual a `ADD` y `message` igual al mensaje que se pasa. ```js assert( @@ -35,13 +35,13 @@ assert( ); ``` -`messageReducer` should be a function. +`messageReducer` debe ser una función. ```js assert(typeof messageReducer === 'function'); ``` -The store should exist and have an initial state set to an empty array. +El almacén debe existir y tener un estado inicial establecido a un arreglo vacío. ```js assert( @@ -52,7 +52,7 @@ assert( ); ``` -Dispatching `addMessage` against the store should immutably add a new message to the array of messages held in state. +El envío de `addMessage` contra el almacén debe añadir un nuevo mensaje de forma inmutable al arreglo de mensajes mantenido en el estado. ```js assert( @@ -66,7 +66,7 @@ assert( ); ``` -The `messageReducer` should return the current state if called with any other actions. +El `messageReducer` debe devolver el estado actual si se llama con cualquier otra acción. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.md index 8bf764191f..50bf3d1dd7 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/getting-started-with-react-redux.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036141 -title: Getting Started with React Redux +title: Introducción a React Redux challengeType: 6 forumTopicId: 301430 dashedName: getting-started-with-react-redux @@ -8,19 +8,19 @@ dashedName: getting-started-with-react-redux # --description-- -This series of challenges introduces how to use Redux with React. First, here's a review of some of the key principles of each technology. React is a view library that you provide with data, then it renders the view in an efficient, predictable way. Redux is a state management framework that you can use to simplify the management of your application's state. Typically, in a React Redux app, you create a single Redux store that manages the state of your entire app. Your React components subscribe to only the pieces of data in the store that are relevant to their role. Then, you dispatch actions directly from React components, which then trigger store updates. +Esta serie de desafíos presenta cómo utilizar Redux con React. En primer lugar, repasamos algunos de los principios clave de cada tecnología. React es una librería de vistas a la que le proporcionas datos y luego renderiza la vista de forma eficiente y predecible. Redux es un framework de gestión de estados que puedes utilizar para simplificar la gestión del estado de tu aplicación. Por lo general, en una aplicación React Redux, se crea un único almacén Redux que gestiona el estado de toda la aplicación. Tus componentes de React se suscriben sólo a las piezas de datos del almacén que son relevantes para su función. Luego, se envían acciones directamente desde los componentes de React, que luego activan las actualizaciones del almacén. -Although React components can manage their own state locally, when you have a complex app, it's generally better to keep the app state in a single location with Redux. There are exceptions when individual components may have local state specific only to them. Finally, because Redux is not designed to work with React out of the box, you need to use the `react-redux` package. It provides a way for you to pass Redux `state` and `dispatch` to your React components as `props`. +Aunque los componentes de React pueden gestionar su propio estado localmente, cuando se tiene una aplicación compleja, generalmente es mejor mantener el estado de la aplicación en una sola ubicación con Redux. Hay excepciones cuando los componentes individuales pueden tener un estado local específico sólo para ellos. Por último, debido a que Redux no está diseñado para trabajar con React de fábrica, es necesario utilizar el paquete `react-redux`. Proporciona una forma para pasar Redux `state` y `dispatch` a tus componentes React como `props`. -Over the next few challenges, first, you'll create a simple React component which allows you to input new text messages. These are added to an array that's displayed in the view. This should be a nice review of what you learned in the React lessons. Next, you'll create a Redux store and actions that manage the state of the messages array. Finally, you'll use `react-redux` to connect the Redux store with your component, thereby extracting the local state into the Redux store. +A lo largo de los siguientes desafíos, primero crearás un simple componente React que te permita introducir nuevos mensajes de texto. Estos se añaden a un arreglo que se muestra en la vista. Esto debería ser un buen repaso de lo aprendido en las lecciones de React. A continuación, crearás un almacén Redux y acciones que gestionen el estado del arreglo de mensajes. Por último, utilizarás `react-redux` para conectar el almacén Redux con tu componente, extrayendo así el estado local en el almacén Redux. # --instructions-- -Start with a `DisplayMessages` component. Add a constructor to this component and initialize it with a state that has two properties: `input`, that's set to an empty string, and `messages`, that's set to an empty array. +Comienza con un componente `DisplayMessages`. Añade un constructor a este componente e inicialízalo con un estado que tenga dos propiedades: `input`, que se establece como una cadena vacía, y `messages`, que se establece como un arreglo vacío. # --hints-- -The `DisplayMessages` component should render an empty `div` element. +El componente `DisplayMessages` debe mostrar un elemento `div` vacío. ```js assert( @@ -31,7 +31,7 @@ assert( ); ``` -The `DisplayMessages` constructor should be called properly with `super`, passing in `props`. +El constructor `DisplayMessages` debe ser llamado correctamente con `super`, pasando `props`. ```js (getUserInput) => @@ -46,7 +46,7 @@ The `DisplayMessages` constructor should be called properly with `super`, passin ); ``` -The `DisplayMessages` component should have an initial state equal to `{input: "", messages: []}`. +El componente `DisplayMessages` debe tener un estado inicial igual a `{input: "", messages: []}`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/manage-state-locally-first.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/manage-state-locally-first.md index ec7c618f3d..db6f27f82e 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/manage-state-locally-first.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/manage-state-locally-first.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036142 -title: Manage State Locally First +title: Gestiona el estado localmente primero challengeType: 6 forumTopicId: 301431 dashedName: manage-state-locally-first @@ -8,19 +8,19 @@ dashedName: manage-state-locally-first # --description-- -Here you'll finish creating the `DisplayMessages` component. +Aquí terminarás de crear el componente `DisplayMessages`. # --instructions-- -First, in the `render()` method, have the component render an `input` element, `button` element, and `ul` element. When the `input` element changes, it should trigger a `handleChange()` method. Also, the `input` element should render the value of `input` that's in the component's state. The `button` element should trigger a `submitMessage()` method when it's clicked. +En primer lugar, en el método `render()`, haz que el componente renderice un elemento `input`, un elemento `button` y un elemento `ul`. Cuando el elemento `input` cambia, debe activar un método `handleChange()`. Además, el elemento `input` debe renderizar el valor de `input` que está en el estado del componente. El elemento `button` debe activar un método `submitMessage()` cuando se hace clic en él. -Second, write these two methods. The `handleChange()` method should update the `input` with what the user is typing. The `submitMessage()` method should concatenate the current message (stored in `input`) to the `messages` array in local state, and clear the value of the `input`. +En segundo lugar, escribe estos dos métodos. El método `handleChange()` debe actualizar el `input` con lo que el usuario está escribiendo. El método `submitMessage()` debe concatenar el mensaje actual (almacenado en `input`) al arreglo `messages` del estado local, y borrar el valor de `input`. -Finally, use the `ul` to map over the array of `messages` and render it to the screen as a list of `li` elements. +Por último, utiliza el `ul` para asignar el arreglo de `messages` y renderizarlo en la pantalla como una lista de elementos `li`. # --hints-- -The `DisplayMessages` component should initialize with a state equal to `{ input: "", messages: [] }`. +El componente `DisplayMessages` debe inicializarse con un estado igual a `{ input: "", messages: [] }`. ```js assert( @@ -36,7 +36,7 @@ assert( ); ``` -The `DisplayMessages` component should render a `div` containing an `h2` element, a `button` element, a `ul` element, and `li` elements as children. +El componente `DisplayMessages` debe renderizar un `div` que contenga un elemento `h2`, un elemento `button`, un elemento `ul` y elementos `li` como hijos. ```js async () => { @@ -58,13 +58,13 @@ async () => { }; ``` -`.map` should be used on the `messages` array. +`.map` debe usarse en el arreglo `messages`. ```js assert(code.match(/this\.state\.messages\.map/g)); ``` -The `input` element should render the value of `input` in local state. +El elemento `input` debe renderizar el valor de `input` en estado local. ```js async () => { @@ -83,7 +83,7 @@ async () => { }; ``` -Calling the method `handleChange` should update the `input` value in state to the current input. +La llamada al método `handleChange` debe actualizar el valor de `input` en estado a la entrada actual. ```js async () => { @@ -106,7 +106,7 @@ async () => { }; ``` -Clicking the `Add message` button should call the method `submitMessage` which should add the current `input` to the `messages` array in state. +Al hacer clic en el botón `Add message` se debe llamar al método `submitMessage` que debe añadir el `input` actual al arreglo `messages` del estado. ```js async () => { @@ -149,7 +149,7 @@ async () => { }; ``` -The `submitMessage` method should clear the current input. +El método `submitMessage` debe borrar la entrada actual. ```js async () => { diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-dispatch-to-props.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-dispatch-to-props.md index 72dae912c2..b45f298c95 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-dispatch-to-props.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-dispatch-to-props.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036146 -title: Map Dispatch to Props +title: Asigna el envío a props challengeType: 6 forumTopicId: 301432 dashedName: map-dispatch-to-props @@ -8,9 +8,9 @@ dashedName: map-dispatch-to-props # --description-- -The `mapDispatchToProps()` function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the `mapStateToProps()` function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component `props`. However, instead of returning a piece of `state`, each property returns a function that calls `dispatch` with an action creator and any relevant action data. You have access to this `dispatch` because it's passed in to `mapDispatchToProps()` as a parameter when you define the function, just like you passed `state` to `mapStateToProps()`. Behind the scenes, React Redux is using Redux's `store.dispatch()` to conduct these dispatches with `mapDispatchToProps()`. This is similar to how it uses `store.subscribe()` for components that are mapped to `state`. +La función `mapDispatchToProps()` se utiliza para proporcionar creadores de acción específicos a tus componentes React para que puedan enviar acciones contra el almacén Redux. Su estructura es similar a la función `mapStateToProps()` que escribiste en el último desafío. Devuelve un objeto que asigna acciones de envío a nombres de propiedades, que se convierten en `props` del componente. Sin embargo, en lugar de devolver una pieza de `state`, cada propiedad devuelve una función que llama a `dispatch` con un creador de acciones y cualquier dato relevante de la acción. Tienes acceso a este `dispatch` porque se pasa a `mapDispatchToProps()` como parámetro cuando defines la función, igual que pasaste `state` a `mapStateToProps()`. Tras bambalinas, React Redux utiliza `store.dispatch()` para realizar estos envíos con `mapDispatchToProps()`. Esto es similar a cómo se utiliza `store.subscribe()` para los componentes que se asignan a `state`. -For example, you have a `loginUser()` action creator that takes a `username` as an action payload. The object returned from `mapDispatchToProps()` for this action creator would look something like: +Por ejemplo, tienes un creador de acción `loginUser()` que toma un `username` como carga útil de acción. El objeto devuelto por `mapDispatchToProps()` para este creador de acción se vería algo como: ```jsx { @@ -22,11 +22,11 @@ For example, you have a `loginUser()` action creator that takes a `username` as # --instructions-- -The code editor provides an action creator called `addMessage()`. Write the function `mapDispatchToProps()` that takes `dispatch` as an argument, then returns an object. The object should have a property `submitNewMessage` set to the dispatch function, which takes a parameter for the new message to add when it dispatches `addMessage()`. +El editor de código proporciona un creador de acción llamado `addMessage()`. Escribe la función `mapDispatchToProps()` que toma `dispatch` como argumento y devuelve un objeto. El objeto debe tener una propiedad `submitNewMessage` establecida en la función de envío, que toma un parámetro para el nuevo mensaje a añadir cuando envía `addMessage()`. # --hints-- -`addMessage` should return an object with keys `type` and `message`. +`addMessage` debe devolver un objeto con las claves `type` y `message`. ```js assert( @@ -40,19 +40,19 @@ assert( ); ``` -`mapDispatchToProps` should be a function. +`mapDispatchToProps` debe ser una función. ```js assert(typeof mapDispatchToProps === 'function'); ``` -`mapDispatchToProps` should return an object. +`mapDispatchToProps` debe devolver un objeto. ```js assert(typeof mapDispatchToProps() === 'object'); ``` -Dispatching `addMessage` with `submitNewMessage` from `mapDispatchToProps` should return a message to the dispatch function. +El envío de `addMessage` con `submitNewMessage` desde `mapDispatchToProps` debe devolver un mensaje a la función de envío. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-state-to-props.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-state-to-props.md index e75b1fb34c..bfcfcfb0fb 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-state-to-props.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/map-state-to-props.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036145 -title: Map State to Props +title: Asigna el estado a props challengeType: 6 forumTopicId: 301433 dashedName: map-state-to-props @@ -8,37 +8,37 @@ dashedName: map-state-to-props # --description-- -The `Provider` component allows you to provide `state` and `dispatch` to your React components, but you must specify exactly what state and actions you want. This way, you make sure that each component only has access to the state it needs. You accomplish this by creating two functions: `mapStateToProps()` and `mapDispatchToProps()`. +El componente `Provider` te permite proporcionar `state` y `dispatch` a tus componentes React, pero debes especificar exactamente qué estado y acciones quieres. De esta manera, te aseguras de que cada componente sólo tiene acceso al estado que necesita. Esto se consigue creando dos funciones: `mapStateToProps()` y `mapDispatchToProps()`. -In these functions, you declare what pieces of state you want to have access to and which action creators you need to be able to dispatch. Once these functions are in place, you'll see how to use the React Redux `connect` method to connect them to your components in another challenge. +En estas funciones, declaras a qué partes del estado quieres tener acceso y qué creadores de acción necesitas poder enviar. Una vez que estas funciones están en su lugar, verás cómo usar el método React Redux `connect` para conectarlos a tus componentes en otro desafío. -**Note:** Behind the scenes, React Redux uses the `store.subscribe()` method to implement `mapStateToProps()`. +**Nota:** Tras bambalinas, React Redux utiliza el método `store.subscribe()` para implementar `mapStateToProps()`. # --instructions-- -Create a function `mapStateToProps()`. This function should take `state` as an argument, then return an object which maps that state to specific property names. These properties will become accessible to your component via `props`. Since this example keeps the entire state of the app in a single array, you can pass that entire state to your component. Create a property `messages` in the object that's being returned, and set it to `state`. +Crea una función `mapStateToProps()`. Esta función debe tomar `state` como argumento, y luego devolver un objeto que asigna ese estado a nombres de propiedades específicas. Estas propiedades serán accesibles a tu componente a través de `props`. Dado que este ejemplo mantiene todo el estado de la aplicación en un solo arreglo, puedes pasar todo ese estado a tu componente. Crea una propiedad `messages` en el objeto que se devuelve, y establécela como `state`. # --hints-- -The const `state` should be an empty array. +La const `state` debe ser un arreglo vacío. ```js assert(Array.isArray(state) && state.length === 0); ``` -`mapStateToProps` should be a function. +`mapStateToProps` debe ser una función. ```js assert(typeof mapStateToProps === 'function'); ``` -`mapStateToProps` should return an object. +`mapStateToProps` debe devolver un objeto. ```js assert(typeof mapStateToProps() === 'object'); ``` -Passing an array as state to `mapStateToProps` should return this array assigned to a key of `messages`. +Pasar un arreglo como estado a `mapStateToProps` debe devolver este arreglo asignado a una clave de `messages`. ```js assert(mapStateToProps(['messages']).messages.pop() === 'messages'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md index b7921af1cc..1fe26eb71b 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/moving-forward-from-here.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403614a -title: Moving Forward From Here +title: Avanzando desde aquí challengeType: 6 forumTopicId: 301434 dashedName: moving-forward-from-here @@ -8,19 +8,19 @@ dashedName: moving-forward-from-here # --description-- -Congratulations! You finished the lessons on React and Redux. There's one last item worth pointing out before you move on. Typically, you won't write React apps in a code editor like this. This challenge gives you a glimpse of what the syntax looks like if you're working with npm and a file system on your own machine. The code should look similar, except for the use of `import` statements (these pull in all of the dependencies that have been provided for you in the challenges). The "Managing Packages with npm" section covers npm in more detail. +¡Felicidades! Has terminado las lecciones sobre React y Redux. Hay un último punto que vale la pena señalar antes de seguir adelante. Por lo general, no escribirás aplicaciones React en un editor de código como este. Este desafío te da una idea de cómo es la sintaxis si trabajas con npm y un sistema de archivos en tu propia máquina. El código debería ser similar, excepto por el uso de las sentencias `import` (éstas traen todas las dependencias que se te han proporcionado en los desafíos). La sección "Gestión de paquetes con npm" cubre npm con más detalle. -Finally, writing React and Redux code generally requires some configuration. This can get complicated quickly. If you are interested in experimenting on your own machine, the Create React App comes configured and ready to go. +Por último, escribir código React y Redux generalmente requiere cierta configuración. Esto puede complicarse rápidamente. Si te interesa experimentar en tu propia máquina, Create React App viene configurado y listo para funcionar. -Alternatively, you can enable Babel as a JavaScript Preprocessor in CodePen, add React and ReactDOM as external JavaScript resources, and work there as well. +Alternativamente, puedes habilitar Babel como un preprocesador de JavaScript en CodePen, añadir React y ReactDOM como recursos externos de JavaScript, y trabajar allí también. # --instructions-- -Log the message `'Now I know React and Redux!'` to the console. +Imprime el mensaje `'Now I know React and Redux!'` en la consola. # --hints-- -The message `Now I know React and Redux!` should be logged to the console. +El mensaje `Now I know React and Redux!` debe imprimirse en la consola. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md index dfef55cdd2..4397970849 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036144 -title: Use Provider to Connect Redux to React +title: Usa "Provider" para conectar Redux a React challengeType: 6 forumTopicId: 301435 dashedName: use-provider-to-connect-redux-to-react @@ -8,9 +8,9 @@ dashedName: use-provider-to-connect-redux-to-react # --description-- -In the last challenge, you created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its `react-redux` package to help accomplish these tasks. +En el último desafío, creaste un almacén Redux para manejar el arreglo de mensajes y creaste una acción para añadir nuevos mensajes. El siguiente paso es proporcionar a React acceso al almacén Redux y a las acciones que necesita para enviar las actualizaciones. React Redux proporciona su paquete `react-redux` para ayudar a realizar estas tareas. -React Redux provides a small API with two key features: `Provider` and `connect`. Another challenge covers `connect`. The `Provider` is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux `store` and `dispatch` functions throughout your component tree. `Provider` takes two props, the Redux store and the child components of your app. Defining the `Provider` for an App component might look like this: +React Redux ofrece si API con dos características clave: `Provider` y `connect`. Otro desafío cubre `connect`. El `Provider` es un componente envolvente de React Redux que envuelve tu aplicación React. Esta envoltura te permite acceder a las funciones Redux `store` y `dispatch` a través de tu árbol de componentes. `Provider` toma dos props, el almacén Redux y los componentes hijos de tu aplicación. La definición del `Provider` para un componente de la App podría ser así: ```jsx @@ -20,13 +20,13 @@ React Redux provides a small API with two key features: `Provider` and `connect` # --instructions-- -The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the `DisplayMessages` component. The only new piece is the `AppWrapper` component at the bottom. Use this top level component to render the `Provider` from `ReactRedux`, and pass the Redux store as a prop. Then render the `DisplayMessages` component as a child. Once you are finished, you should see your React component rendered to the page. +El editor de código ahora muestra todo tu código Redux y React de los últimos desafíos. Incluye el almacén Redux, las acciones y el componente `DisplayMessages`. La única pieza nueva es el componente `AppWrapper` de la parte inferior. Usa este componente de nivel superior para renderizar el `Provider` de `ReactRedux`, y pasa el almacén Redux como prop. Luego, renderiza el componente `DisplayMessages` como hijo. Una vez que hayas terminado, deberías ver tu componente React renderizado en la página. -**Note:** React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant `Provider` for you to use in the `AppWrapper` render method. +**Nota:** React Redux está disponible como una variable global aquí, por lo que puedes acceder al "Provider" con notación de puntos. El código del editor aprovecha esto y lo establece en una constante `Provider` para que lo uses en el método de renderizado `AppWrapper`. # --hints-- -The `AppWrapper` should render. +El `AppWrapper` debe renderizarse. ```js assert( @@ -37,7 +37,7 @@ assert( ); ``` -The `Provider` wrapper component should have a prop of `store` passed to it, equal to the Redux store. +El componente envolvente `Provider` debe tener una prop de `store` pasada, igual al almacén de Redux. ```js (getUserInput) => @@ -51,7 +51,7 @@ The `Provider` wrapper component should have a prop of `store` passed to it, equ ); ``` -`DisplayMessages` should render as a child of `AppWrapper`. +`DisplayMessages` debe renderizarse como hijo de `AppWrapper`. ```js assert( @@ -64,7 +64,7 @@ assert( ); ``` -The `DisplayMessages` component should render an `h2`, `input`, `button`, and `ul` element. +El componente `DisplayMessages` debe renderizar un elemento `h2`, `input`, `button` y `ul`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/combine-multiple-reducers.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/combine-multiple-reducers.md index 741bfc9c6a..7adbc2b274 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/combine-multiple-reducers.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/combine-multiple-reducers.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036154 -title: Combine Multiple Reducers +title: Combina múltiples reductores challengeType: 6 forumTopicId: 301436 dashedName: combine-multiple-reducers @@ -8,11 +8,11 @@ dashedName: combine-multiple-reducers # --description-- -When the state of your app begins to grow more complex, it may be tempting to divide state into multiple pieces. Instead, remember the first principle of Redux: all app state is held in a single state object in the store. Therefore, Redux provides reducer composition as a solution for a complex state model. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux `createStore()` method. +Cuando el estado de tu aplicación empieza a ser más complejo, puede ser tentador dividir el estado en varias piezas. En su lugar, recuerda el primer principio de Redux: todo el estado de la aplicación se mantiene en un único objeto de estado en el almacén. Por lo tanto, Redux proporciona la composición de reductores como una solución para un modelo de estado complejo. Se definen varios reductores para manejar diferentes partes del estado de tu aplicación, y luego se componen estos reductores juntos en un reductor raíz. El reductor raíz se pasa al método Redux `createStore()`. -In order to let us combine multiple reducers together, Redux provides the `combineReducers()` method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state. +Para permitirnos combinar múltiples reductores juntos, Redux proporciona el método `combineReducers()`. Este método acepta un objeto como argumento en el que se definen las propiedades que asocian las claves a funciones reductoras específicas. El nombre que le des a las claves será utilizado por Redux como el nombre de la pieza de estado asociada. -Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the `combineReducers()` method like this: +Por lo general, es una buena práctica crear un reductor para cada pieza de estado de la aplicación cuando son distintas o únicas de alguna manera. Por ejemplo, en una aplicación para tomar notas con autenticación de usuario, un reductor podría encargarse de la autenticación, mientras que otro se encarga del texto y las notas que el usuario envía. Para tal aplicación, podríamos escribir el método `combineReducers()` así: ```js const rootReducer = Redux.combineReducers({ @@ -21,15 +21,15 @@ const rootReducer = Redux.combineReducers({ }); ``` -Now, the key `notes` will contain all of the state associated with our notes and handled by our `notesReducer`. This is how multiple reducers can be composed to manage more complex application state. In this example, the state held in the Redux store would then be a single object containing `auth` and `notes` properties. +Ahora, la clave `notes` contendrá todo el estado asociado a nuestras notas y manejado por nuestro `notesReducer`. Así es como se pueden componer múltiples reductores para gestionar un estado de aplicación más complejo. En este ejemplo, el estado mantenido en el almacén Redux sería entonces un único objeto que contiene las propiedades `auth` y `notes`. # --instructions-- -There are `counterReducer()` and `authReducer()` functions provided in the code editor, along with a Redux store. Finish writing the `rootReducer()` function using the `Redux.combineReducers()` method. Assign `counterReducer` to a key called `count` and `authReducer` to a key called `auth`. +Están las funciones `counterReducer()` y `authReducer()` proporcionadas en el editor de código, junto con un almacén Redux. Termina de escribir la función `rootReducer()` utilizando el método `Redux.combineReducers()`. Asigna `counterReducer` a una clave llamada `count` y `authReducer` a una clave llamada `auth`. # --hints-- -The `counterReducer` should increment and decrement the `state`. +El `counterReducer` debe incrementar y disminuir el `state`. ```js assert( @@ -45,7 +45,7 @@ assert( ); ``` -The `authReducer` should toggle the `state` of `authenticated` between `true` and `false`. +El `authReducer` debe alternar el `state` de `authenticated` entre `true` y `false`. ```js assert( @@ -59,7 +59,7 @@ assert( ); ``` -The store `state` should have two keys: `count`, which holds a number, and `auth`, which holds an object. The `auth` object should have a property of `authenticated`, which holds a boolean. +El almacén `state` debe tener dos claves: `count`, que contiene un número, y `auth`, que contiene un objeto. El objeto `auth` debe tener una propiedad de `authenticated`, que contiene un booleano. ```js assert( @@ -74,7 +74,7 @@ assert( ); ``` -The `rootReducer` should be a function that combines the `counterReducer` and the `authReducer`. +El `rootReducer` debe ser una función que combine el `counterReducer` y el `authReducer`. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md index 9c004ef012..28c1d22359 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/copy-an-object-with-object.assign.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403615b -title: Copy an Object with Object.assign +title: Copia un objeto con Object.assign challengeType: 6 forumTopicId: 301437 dashedName: copy-an-object-with-object-assign @@ -8,21 +8,21 @@ dashedName: copy-an-object-with-object-assign # --description-- -The last several challenges worked with arrays, but there are ways to help enforce state immutability when state is an `object`, too. A useful tool for handling objects is the `Object.assign()` utility. `Object.assign()` takes a target object and source objects and maps properties from the source objects to the target object. Any matching properties are overwritten by properties in the source objects. This behavior is commonly used to make shallow copies of objects by passing an empty object as the first argument followed by the object(s) you want to copy. Here's an example: +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: ```js const newObject = Object.assign({}, obj1, obj2); ``` -This creates `newObject` as a new `object`, which contains the properties that currently exist in `obj1` and `obj2`. +Esto crea `newObject` como un nuevo `object`, que contiene las propiedades que existen actualmente en `obj1` y `obj2`. # --instructions-- -The Redux state and actions were modified to handle an `object` for the `state`. Edit the code to return a new `state` object for actions with type `ONLINE`, which set the `status` property to the string `online`. Try to use `Object.assign()` to complete the challenge. +El estado y las acciones de Redux fueron modificados para manejar un `object` para el `state`. Edita el código para devolver un nuevo objeto `state` para las acciones de tipo `ONLINE`, que establece la propiedad `status` a la cadena `online`. Intenta utilizar `Object.assign()` para completar el desafío. # --hints-- -The Redux store should exist and initialize with a state that is equivalent to the `defaultState` object declared on line 1. +El almacén Redux debe existir e inicializarse con un estado equivalente al objeto `defaultState` declarado en la línea 1. ```js assert( @@ -39,13 +39,13 @@ assert( ); ``` -`wakeUp` and `immutableReducer` both should be functions. +`wakeUp` e `immutableReducer` deben ser funciones. ```js assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function'); ``` -Dispatching an action of type `ONLINE` should update the property `status` in state to `online` and should NOT mutate state. +El envío de una acción de tipo `ONLINE` debe actualizar la propiedad `status` del estado a `online` y NO debe mutar el estado. ```js assert( @@ -65,7 +65,7 @@ assert( ); ``` -`Object.assign` should be used to return new state. +`Object.assign` debe utilizarse para devolver el nuevo estado. ```js (getUserInput) => assert(getUserInput('index').includes('Object.assign')); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md index 4eb9227a82..f5dda0295d 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/create-a-redux-store.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403614b -title: Create a Redux Store +title: Crea un almacén Redux challengeType: 6 forumTopicId: 301439 dashedName: create-a-redux-store @@ -8,29 +8,29 @@ dashedName: create-a-redux-store # --description-- -Redux is a state management framework that can be used with a number of different web technologies, including React. +Redux es un framework de gestión de estados que se puede utilizar con un número de diferentes tecnologías web, incluyendo React. -In Redux, there is a single state object that's responsible for the entire state of your application. This means if you had a React app with ten components, and each component had its own local state, the entire state of your app would be defined by a single state object housed in the Redux `store`. This is the first important principle to understand when learning Redux: the Redux store is the single source of truth when it comes to application state. +En Redux, hay un único objeto de estado que es responsable de todo el estado de tu aplicación. Esto significa que si tuvieras una aplicación React con diez componentes, y cada componente tuviera su propio estado local, todo el estado de tu aplicación estaría definido por un único objeto de estado alojado en el `store` (almacén) de Redux. Este es el primer principio importante a entender cuando se aprende Redux: el almacén Redux es la única fuente de verdad cuando se trata del estado de la aplicación. -This also means that any time any piece of your app wants to update state, it **must** do so through the Redux store. The unidirectional data flow makes it easier to track state management in your app. +Esto también significa que cada vez que cualquier pieza de tu aplicación quiera actualizar el estado, **debe** hacerlo a través del almacén Redux. El flujo de datos unidireccional facilita el seguimiento de la gestión de estados en tu aplicación. # --instructions-- -The Redux `store` is an object which holds and manages application `state`. There is a method called `createStore()` on the Redux object, which you use to create the Redux `store`. This method takes a `reducer` function as a required argument. The `reducer` function is covered in a later challenge, and is already defined for you in the code editor. It simply takes `state` as an argument and returns `state`. +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`. -Declare a `store` variable and assign it to the `createStore()` method, passing in the `reducer` as an argument. +Declara una variable `store` y asígnala al método `createStore()`, pasando el `reducer` como argumento. -**Note:** The code in the editor uses ES6 default argument syntax to initialize this state to hold a value of `5`. If you're not familiar with default arguments, you can refer to the [ES6 section in the Curriculum](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions) which covers this topic. +**Nota:** El código del editor utiliza la sintaxis de los argumentos por defecto de ES6 para inicializar este estado y mantener un valor de `5`. Si no estás familiarizado con los argumentos por defecto, puedes consultar la sección [ES6 en el Plan de Estudios](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions) que cubre este tema. # --hints-- -The Redux store should exist. +El almacén Redux debe existir. ```js assert(typeof store.getState === 'function'); ``` -The Redux store should have a value of 5 for the state. +El almacén Redux debe tener un valor de 5 para el estado. ```js assert(store.getState() === 5); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md index 31f49e2e33..180f74697a 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-a-redux-action.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403614d -title: Define a Redux Action +title: Define una acción Redux challengeType: 6 forumTopicId: 301440 dashedName: define-a-redux-action @@ -8,17 +8,17 @@ dashedName: define-a-redux-action # --description-- -Since Redux is a state management framework, updating state is one of its core tasks. In Redux, all state updates are triggered by dispatching actions. An action is simply a JavaScript object that contains information about an action event that has occurred. The Redux store receives these action objects, then updates its state accordingly. Sometimes a Redux action also carries some data. For example, the action carries a username after a user logs in. While the data is optional, actions must carry a `type` property that specifies the 'type' of action that occurred. +Dado que Redux es un framework de gestión de estado, la actualización del estado es una de sus tareas principales. En Redux, todas las actualizaciones de estado se activan mediante acciones de envío. Una acción es simplemente un objeto de JavaScript que contiene información sobre un evento de acción que ha ocurrido. El almacén Redux recibe estos objetos de acción, y luego actualiza su estado de acuerdo a ello. A veces una acción Redux también lleva algunos datos. Por ejemplo, la acción lleva un nombre de usuario después de que un usuario inicia sesión. Aunque los datos son opcionales, las acciones deben llevar una propiedad `type` que especifica el "tipo" de acción que se ha producido. -Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred. +Piensa en las acciones Redux como mensajeros que entregan información sobre los eventos que ocurren en tu aplicación al almacén Redux. A continuación, el almacén se encarga de actualizar el estado en función de la acción realizada. # --instructions-- -Writing a Redux action is as simple as declaring an object with a type property. Declare an object `action` and give it a property `type` set to the string `'LOGIN'`. +Escribir una acción Redux es tan sencillo como declarar un objeto con una propiedad de tipo. Declara un objeto `action` y dale una propiedad `type` establecida a la cadena `'LOGIN'`. # --hints-- -An `action` object should exist. +Debe existir un objeto `action`. ```js assert( @@ -28,7 +28,7 @@ assert( ); ``` -The `action` object should have a key property `type` with value `LOGIN`. +El objeto `action` debe tener una propiedad clave `type` con valor `LOGIN`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md index 656723c9e1..4ccfeecbd0 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/define-an-action-creator.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403614e -title: Define an Action Creator +title: Define un creador de acción challengeType: 6 forumTopicId: 301441 dashedName: define-an-action-creator @@ -8,27 +8,27 @@ dashedName: define-an-action-creator # --description-- -After creating an action, the next step is sending the action to the Redux store so it can update its state. In Redux, you define action creators to accomplish this. An action creator is simply a JavaScript function that returns an action. In other words, action creators create objects that represent action events. +Después de crear una acción, el siguiente paso es enviar la acción al almacén Redux para que pueda actualizar su estado. En Redux, se definen creadores de acción para lograr esto. Un creador de acción es simplemente una función de JavaScript que devuelve una acción. En otras palabras, los creadores de acción crean objetos que representan eventos de acción. # --instructions-- -Define a function named `actionCreator()` that returns the `action` object when called. +Define una función llamada `actionCreator()` que devuelve el objeto `action` cuando es llamado. # --hints-- -The function `actionCreator` should exist. +La función `actionCreator` debe existir. ```js assert(typeof actionCreator === 'function'); ``` -Running the `actionCreator` function should return the `action` object. +La ejecución de la función `actionCreator` debe devolver el objeto `action`. ```js assert(typeof action === 'object'); ``` -The returned `action` should have a key property `type` with value `LOGIN`. +La `action` devuelta debe tener una propiedad clave `type` con valor `LOGIN`. ```js assert(action.type === 'LOGIN'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/dispatch-an-action-event.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/dispatch-an-action-event.md index 46bfbbb12e..cbdc8259d0 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/dispatch-an-action-event.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/dispatch-an-action-event.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403614f -title: Dispatch an Action Event +title: Envía un evento de acción challengeType: 6 forumTopicId: 301442 dashedName: dispatch-an-action-event @@ -8,9 +8,9 @@ dashedName: dispatch-an-action-event # --description-- -`dispatch` method is what you use to dispatch actions to the Redux store. Calling `store.dispatch()` and passing the value returned from an action creator sends an action back to the store. +El método `dispatch` (enviar) es el que se utiliza para enviar acciones al almacén Redux. Llamar a `store.dispatch()` y pasar el valor devuelto por un creador de acción envía una acción de regreso al almacén. -Recall that action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store. Based on the previous challenge's example, the following lines are equivalent, and both dispatch the action of type `LOGIN`: +Recordemos que los creadores de acción devuelven un objeto con una propiedad de tipo que especifica la acción que se ha producido. Luego, el método envía un objeto de acción al almacén Redux. Basándonos en el ejemplo del desafío anterior, las siguientes líneas son equivalentes, y ambas envían la acción de tipo `LOGIN`: ```js store.dispatch(actionCreator()); @@ -19,23 +19,23 @@ store.dispatch({ type: 'LOGIN' }); # --instructions-- -The Redux store in the code editor has an initialized state that's an object containing a `login` property currently set to `false`. There's also an action creator called `loginAction()` which returns an action of type `LOGIN`. Dispatch the `LOGIN` action to the Redux store by calling the `dispatch` method, and pass in the action created by `loginAction()`. +El almacén Redux en el editor de código tiene un estado inicializado que es un objeto que contiene una propiedad `login` actualmente establecida a `false`. También hay un creador de acción llamado `loginAction()` que devuelve una acción de tipo `LOGIN`. Envía la acción `LOGIN` al almacén Redux llamando al método `dispatch`, y pasa la acción creada por `loginAction()`. # --hints-- -Calling the function `loginAction` should return an object with `type` property set to the string `LOGIN`. +La llamada a la función `loginAction` debe devolver un objeto con la propiedad `type` establecida a la cadena `LOGIN`. ```js assert(loginAction().type === 'LOGIN'); ``` -The store should be initialized with an object with property `login` set to `false`. +El almacén debe ser inicializado con un objeto con la propiedad `login` establecida a `false`. ```js assert(store.getState().login === false); ``` -The `store.dispatch()` method should be used to dispatch an action of type `LOGIN`. +El método `store.dispatch()` debe utilizarse para enviar una acción de tipo `LOGIN`. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md index 7c348ad330..2bb5d87de8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/get-state-from-the-redux-store.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403614c -title: Get State from the Redux Store +title: Obtén el estado del almacén Redux challengeType: 6 forumTopicId: 301443 dashedName: get-state-from-the-redux-store @@ -8,21 +8,21 @@ dashedName: get-state-from-the-redux-store # --description-- -The Redux store object provides several methods that allow you to interact with it. For example, you can retrieve the current `state` held in the Redux store object with the `getState()` method. +El objeto almacén Redux proporciona varios métodos que permiten interactuar con él. Por ejemplo, puedes recuperar el `state` actual que tiene el objeto almacén Redux con el método `getState()`. # --instructions-- -The code from the previous challenge is re-written more concisely in the code editor. Use `store.getState()` to retrieve the `state` from the `store`, and assign this to a new variable `currentState`. +El código del desafío anterior se reescribe de forma más concisa en el editor de código. Utiliza `store.getState()` para recuperar el `state` del `store`, y asígnalo a una nueva variable `currentState`. # --hints-- -The Redux store should have a value of 5 for the initial state. +El almacén Redux debe tener un valor de 5 para el estado inicial. ```js assert(store.getState() === 5); ``` -A variable `currentState` should exist and should be assigned the current state of the Redux store. +Debe existir una variable `currentState` y se le debe asignar el estado actual del almacén Redux. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/handle-an-action-in-the-store.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/handle-an-action-in-the-store.md index d33750b9c3..cfa8d27da6 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/handle-an-action-in-the-store.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/handle-an-action-in-the-store.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036150 -title: Handle an Action in the Store +title: Maneja una acción en el almacén challengeType: 6 forumTopicId: 301444 dashedName: handle-an-action-in-the-store @@ -8,29 +8,29 @@ dashedName: handle-an-action-in-the-store # --description-- -After an action is created and dispatched, the Redux store needs to know how to respond to that action. This is the job of a `reducer` function. Reducers in Redux are responsible for the state modifications that take place in response to actions. A `reducer` takes `state` and `action` as arguments, and it always returns a new `state`. It is important to see that this is the **only** role of the reducer. It has no side effects — it never calls an API endpoint and it never has any hidden surprises. The reducer is simply a pure function that takes state and action, then returns new state. +Después de crear y enviar una acción, el almacén Redux necesita saber cómo responder a esa acción. Este es el trabajo de una función `reducer` (reductor). Los reductores en Redux son responsables de las modificaciones de estado que tienen lugar en respuesta a las acciones. Un `reducer` toma `state` y `action` como argumentos, y siempre devuelve un nuevo `state`. Es importante ver que esta es la **única** función del reductor. No tiene efectos secundarios: nunca llama a un endpoint del API y nunca tiene sorpresas ocultas. El reductor es simplemente una función pura que toma el estado y la acción, y luego devuelve el nuevo estado. -Another key principle in Redux is that `state` is read-only. In other words, the `reducer` function must **always** return a new copy of `state` and never modify state directly. Redux does not enforce state immutability, however, you are responsible for enforcing it in the code of your reducer functions. You'll practice this in later challenges. +Otro principio clave en Redux es que `state` es de sólo lectura. En otras palabras, la función `reducer` debe **siempre** devolver una nueva copia de `state` y nunca modificar el estado directamente. Redux no impone la inmutabilidad del estado, sin embargo, tú eres responsable de imponerla en el código de tus funciones reductoras. Practicarás esto en desafíos posteriores. # --instructions-- -The code editor has the previous example as well as the start of a `reducer` function for you. Fill in the body of the `reducer` function so that if it receives an action of type `'LOGIN'` it returns a state object with `login` set to `true`. Otherwise, it returns the current `state`. Note that the current `state` and the dispatched `action` are passed to the reducer, so you can access the action's type directly with `action.type`. +El editor de código tiene el ejemplo anterior, así como el inicio de una función `reducer` para ti. Rellena el cuerpo de la función `reducer` para que si recibe una acción de tipo `'LOGIN'` devuelva un objeto de estado con `login` establecido a `true`. De lo contrario, devuelve el `state` actual. Ten en cuenta que el `state` actual y la `action` enviada se pasan al reductor, por lo que puedes acceder al tipo de la acción directamente con `action.type`. # --hints-- -Calling the function `loginAction` should return an object with type property set to the string `LOGIN`. +La llamada a la función `loginAction` debe devolver un objeto con la propiedad type establecida a la cadena `LOGIN`. ```js assert(loginAction().type === 'LOGIN'); ``` -The store should be initialized with an object with property `login` set to `false`. +El almacén debe ser inicializado con un objeto con la propiedad `login` establecida a `false`. ```js assert(store.getState().login === false); ``` -Dispatching `loginAction` should update the `login` property in the store state to `true`. +El envío de `loginAction` debe actualizar la propiedad `login` en el estado del almacén a `true`. ```js assert( @@ -43,7 +43,7 @@ assert( ); ``` -If the action is not of type `LOGIN`, the store should return the current state. +Si la acción no es de tipo `LOGIN`, el almacén debe devolver el estado actual. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/never-mutate-state.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/never-mutate-state.md index 002a7c4da2..ba2390b2c8 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/never-mutate-state.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/never-mutate-state.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036158 -title: Never Mutate State +title: Nunca mutes el estado challengeType: 6 forumTopicId: 301445 dashedName: never-mutate-state @@ -8,19 +8,19 @@ dashedName: never-mutate-state # --description-- -These final challenges describe several methods of enforcing the key principle of state immutability in Redux. Immutable state means that you never modify state directly, instead, you return a new copy of state. +Estos desafíos finales describen varios métodos para hacer cumplir el principio clave de la inmutabilidad del estado en Redux. Estado inmutable significa que nunca se modifica el estado directamente, sino que se devuelve una nueva copia del estado. -If you took a snapshot of the state of a Redux app over time, you would see something like `state 1`, `state 2`, `state 3`,`state 4`, `...` and so on where each state may be similar to the last, but each is a distinct piece of data. This immutability, in fact, is what provides such features as time-travel debugging that you may have heard about. +Si tomaras una captura del estado de una aplicación Redux a lo largo del tiempo, verías algo como `state 1`, `state 2`, `state 3`,`state 4`, `...` y así sucesivamente donde cada estado puede ser similar al anterior, pero cada uno es un dato distinto. Esta inmutabilidad, de hecho, es lo que proporciona características tales como la depuración de viajes en el tiempo de la que puedes haber oído hablar. -Redux does not actively enforce state immutability in its store or reducers, that responsibility falls on the programmer. Fortunately, JavaScript (especially ES6) provides several useful tools you can use to enforce the immutability of your state, whether it is a `string`, `number`, `array`, or `object`. Note that strings and numbers are primitive values and are immutable by nature. In other words, 3 is always 3. You cannot change the value of the number 3. An `array` or `object`, however, is mutable. In practice, your state will probably consist of an `array` or `object`, as these are useful data structures for representing many types of information. +Redux no impone activamente la inmutabilidad del estado en su almacén o reductores, esa responsabilidad recae en el programador. Afortunadamente, JavaScript (especialmente ES6) proporciona varias herramientas útiles que puedes utilizar para reforzar la inmutabilidad de tu estado, ya sea un `string`, `number`, `array`, u `object`. Ten en cuenta que las cadenas y los números son valores primitivos y son inmutables por naturaleza. En otras palabras, 3 siempre es 3. No se puede cambiar el valor del número 3. Sin embargo, un `array` u `object` es mutable. En la práctica, tu estado probablemente consistirá en un `array` u `object`, ya que son estructuras de datos útiles para representar muchos tipos de información. # --instructions-- -There is a `store` and `reducer` in the code editor for managing to-do items. Finish writing the `ADD_TO_DO` case in the reducer to append a new to-do to the state. There are a few ways to accomplish this with standard JavaScript or ES6. See if you can find a way to return a new array with the item from `action.todo` appended to the end. +Hay un `store` y un `reducer` en el editor de código para gestionar los elementos de las tareas pendientes. Termina de escribir el caso `ADD_TO_DO` en el reductor para añadir una nueva tarea al estado. Hay algunas maneras de lograr esto con JavaScript estándar o ES6. Ve si puedes encontrar la forma de devolver un nuevo arreglo con el elemento de `action.todo` añadido al final. # --hints-- -The Redux store should exist and initialize with a state equal to the `todos` array in the code editor. +El almacén Redux debe existir e inicializarse con un estado igual al arreglo `todos` del editor de código. ```js assert( @@ -39,13 +39,13 @@ assert( ); ``` -`addToDo` and `immutableReducer` both should be functions. +`addToDo` e `immutableReducer` deben ser funciones. ```js assert(typeof addToDo === 'function' && typeof immutableReducer === 'function'); ``` -Dispatching an action of type `ADD_TO_DO` on the Redux store should add a `todo` item and should NOT mutate state. +El envío de una acción de tipo `ADD_TO_DO` en el almacén Redux debe añadir un elemento `todo` y NO debe mutar el estado. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md index d3d43ced41..17c89f5930 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/register-a-store-listener.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036153 -title: Register a Store Listener +title: Registra un escucha al almacén challengeType: 6 forumTopicId: 301446 dashedName: register-a-store-listener @@ -8,15 +8,15 @@ dashedName: register-a-store-listener # --description-- -Another method you have access to on the Redux `store` object is `store.subscribe()`. This allows you to subscribe listener functions to the store, which are called whenever an action is dispatched against the store. One simple use for this method is to subscribe a function to your store that simply logs a message every time an action is received and the store is updated. +Otro método al que tienes acceso en el objeto Redux `store` es `store.subscribe()`. Esto te permite suscribir funciones de escucha al almacén, que se llaman cada vez que se envía una acción contra el almacén. Un uso sencillo de este método es suscribir una función a tu almacén que simplemente registra un mensaje cada vez que se recibe una acción y se actualiza el almacén. # --instructions-- -Write a callback function that increments the global variable `count` every time the store receives an action, and pass this function in to the `store.subscribe()` method. You'll see that `store.dispatch()` is called three times in a row, each time directly passing in an action object. Watch the console output between the action dispatches to see the updates take place. +Escribe una función callback que incremente la variable global `count` cada vez que el almacén recibe una acción, y pasa esta función al método `store.subscribe()`. Verás que `store.dispatch()` es llamado tres veces seguidas, cada vez pasando directamente un objeto de acción. Observa la salida de la consola entre los envíos de acción para ver cómo se producen las actualizaciones. # --hints-- -Dispatching the `ADD` action on the store should increment the state by `1`. +El envío de acción `ADD` en el almacén debe incrementar el estado en `1`. ```js assert( @@ -29,19 +29,19 @@ assert( ); ``` -There should be a listener function subscribed to the store using `store.subscribe`. +Debe haber una función de escucha suscrita al almacén usando `store.subscribe`. ```js (getUserInput) => assert(getUserInput('index').match(/store\s*\.\s*subscribe\(/gm)); ``` -The `store.subscribe` should receive a function. +El `store.subscribe` debe recibir una función. ```js (getUserInput) => assert(getUserInput('index').match(/(\s*function\s*)|(\s*\(\s*\)\s*=>)/gm)) ``` -The callback to `store.subscribe` should also increment the global `count` variable as the store is updated. +El callback a `store.subscribe` también debe incrementar la variable global `count` a medida que se actualiza el almacén. ```js assert(store.getState() === count); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/remove-an-item-from-an-array.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/remove-an-item-from-an-array.md index 16bd461669..af092cc6e1 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/remove-an-item-from-an-array.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/remove-an-item-from-an-array.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d403615a -title: Remove an Item from an Array +title: Elimina un elemento de un arreglo challengeType: 6 forumTopicId: 301447 dashedName: remove-an-item-from-an-array @@ -8,15 +8,15 @@ dashedName: remove-an-item-from-an-array # --description-- -Time to practice removing items from an array. The spread operator can be used here as well. Other useful JavaScript methods include `slice()` and `concat()`. +Es hora de practicar la eliminación de elementos de un arreglo. Aquí también se puede utilizar el operador de propagación. Otros métodos útiles de JavaScript son `slice()` y `concat()`. # --instructions-- -The reducer and action creator were modified to remove an item from an array based on the index of the item. Finish writing the reducer so a new state array is returned with the item at the specific index removed. +El reductor y el creador de acción fueron modificados para eliminar un elemento de un arreglo en función del índice del elemento. Termina de escribir el reductor para que devuelva un nuevo arreglo de estados con el elemento en el índice específico eliminado. # --hints-- -The Redux store should exist and initialize with a state equal to `[0,1,2,3,4,5]` +El almacén Redux debe existir e inicializarse con un estado igual a `[0,1,2,3,4,5]` ```js assert( @@ -30,7 +30,7 @@ assert( ); ``` -`removeItem` and `immutableReducer` both should be functions. +`removeItem` e `immutableReducer` deben ser funciones. ```js assert( @@ -38,7 +38,7 @@ assert( ); ``` -Dispatching the `removeItem` action creator should remove items from the state and should NOT mutate state. +Enviar el creador de acción `removeItem` debe eliminar elementos del estado y NO debe mutar el estado. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/send-action-data-to-the-store.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/send-action-data-to-the-store.md index ccfda74b7a..49da418180 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/send-action-data-to-the-store.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/send-action-data-to-the-store.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036155 -title: Send Action Data to the Store +title: Envía datos de acción al almacén challengeType: 6 forumTopicId: 301448 dashedName: send-action-data-to-the-store @@ -8,19 +8,19 @@ dashedName: send-action-data-to-the-store # --description-- -By now you've learned how to dispatch actions to the Redux store, but so far these actions have not contained any information other than a `type`. You can also send specific data along with your actions. In fact, this is very common because actions usually originate from some user interaction and tend to carry some data with them. The Redux store often needs to know about this data. +A estas alturas ya has aprendido a enviar acciones al almacén de Redux, pero hasta ahora estas acciones no contenían más información que un `type`. También puedes enviar datos específicos junto con sus acciones. De hecho, esto es muy común porque las acciones suelen originarse a partir de alguna interacción del usuario y suelen llevar consigo algunos datos. El almacén Redux a menudo necesita conocer estos datos. # --instructions-- -There's a basic `notesReducer()` and an `addNoteText()` action creator defined in the code editor. Finish the body of the `addNoteText()` function so that it returns an `action` object. The object should include a `type` property with a value of `ADD_NOTE`, and also a `text` property set to the `note` data that's passed into the action creator. When you call the action creator, you'll pass in specific note information that you can access for the object. +Hay un `notesReducer()` básico y un creador de acción `addNoteText()` definido en el editor de código. Termina el cuerpo de la función `addNoteText()` para que devuelva un objeto `action`. El objeto debe incluir una propiedad `type` con un valor de `ADD_NOTE`, y también una propiedad `text` establecida a los datos de `note` que se pasa al creador de acción. Cuando llames al creador de acción, pasarás información específica de la nota a la que puedes acceder para el objeto. -Next, finish writing the `switch` statement in the `notesReducer()`. You need to add a case that handles the `addNoteText()` actions. This case should be triggered whenever there is an action of type `ADD_NOTE` and it should return the `text` property on the incoming `action` as the new `state`. +A continuación, termina de escribir la sentencia `switch` en el `notesReducer()`. Necesitas añadir un caso que maneje las acciones `addNoteText()`. Este caso debe activarse siempre que haya una acción de tipo `ADD_NOTE` y debe devolver la propiedad `text` de la `action` entrante como el nuevo `state`. -The action is dispatched at the bottom of the code. Once you're finished, run the code and watch the console. That's all it takes to send action-specific data to the store and use it when you update store `state`. +La acción es enviada en la parte inferior del código. Una vez que hayas terminado, ejecuta el código y observa la consola. Eso es todo lo que se necesita para enviar datos específicos de la acción al almacén y utilizarlos cuando se actualiza el `state` del almacén. # --hints-- -The action creator `addNoteText` should return an object with keys `type` and `text`. +El creador de acción `addNoteText` debe devolver un objeto con las claves `type` y `text`. ```js assert( @@ -31,7 +31,7 @@ assert( ); ``` -Dispatching an action of type `ADD_NOTE` with the `addNoteText` action creator should update the `state` to the string passed to the action creator. +Enviar una acción de tipo `ADD_NOTE` con el creador de acción `addNoteText` debe actualizar el `state` a la cadena pasada al creador de acción. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md index 604bc416f7..94809c9a84 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036151 -title: Use a Switch Statement to Handle Multiple Actions +title: Usa una sentencia Switch para manejar múltiples acciones challengeType: 6 forumTopicId: 301449 dashedName: use-a-switch-statement-to-handle-multiple-actions @@ -8,35 +8,35 @@ dashedName: use-a-switch-statement-to-handle-multiple-actions # --description-- -You can tell the Redux store how to handle multiple action types. Say you are managing user authentication in your Redux store. You want to have a state representation for when users are logged in and when they are logged out. You represent this with a single state object with the property `authenticated`. You also need action creators that create actions corresponding to user login and user logout, along with the action objects themselves. +Puedes decirle al almacén Redux cómo manejar múltiples tipos de acción. Digamos que estás gestionando la autenticación de usuarios en tu almacén Redux. Quieres tener una representación de estado para cuando los usuarios están conectados y cuando están desconectados. Esto se representa con un único objeto de estado con la propiedad `authenticated`. También se necesitan creadores de acción que creen acciones correspondientes al inicio y cierre de sesión de los usuarios, junto con los propios objetos de acción. # --instructions-- -The code editor has a store, actions, and action creators set up for you. Fill in the `reducer` function to handle multiple authentication actions. Use a JavaScript `switch` statement in the `reducer` to respond to different action events. This is a standard pattern in writing Redux reducers. The switch statement should switch over `action.type` and return the appropriate authentication state. +El editor de código tiene un almacén, acciones y creadores de acción configurados para ti. Rellena la función `reducer` para manejar múltiples acciones de autenticación. Usa una sentencia `switch` de JavaScript en el `reducer` para responder a diferentes eventos de acción. Este es un patrón estándar en la escritura de reductores Redux. La sentencia switch debe cambiar sobre `action.type` y devolver el estado de autenticación apropiado. -**Note:** At this point, don't worry about state immutability, since it is small and simple in this example. For each action, you can return a new object — for example, `{authenticated: true}`. Also, don't forget to write a `default` case in your switch statement that returns the current `state`. This is important because once your app has multiple reducers, they are all run any time an action dispatch is made, even when the action isn't related to that reducer. In such a case, you want to make sure that you return the current `state`. +**Nota:** En este punto, no te preocupes por la inmutabilidad del estado, ya que es pequeña y simple en este ejemplo. Para cada acción, puedes devolver un nuevo objeto, por ejemplo, `{authenticated: true}`. Además, no olvides escribir un caso `default` en tu sentencia switch que devuelva el `state` actual. Esto es importante porque una vez que tu aplicación tiene múltiples reductores, todos ellos se ejecutan cada vez que se realiza un envío de acción, incluso cuando la acción no está relacionada con ese reductor. En tal caso, querrás asegurarte de que devuelves el `state` actual. # --hints-- -Calling the function `loginUser` should return an object with type property set to the string `LOGIN`. +La llamada a la función `loginUser` debe devolver un objeto con la propiedad type establecida a la cadena `LOGIN`. ```js assert(loginUser().type === 'LOGIN'); ``` -Calling the function `logoutUser` should return an object with type property set to the string `LOGOUT`. +La llamada a la función `logoutUser` debe devolver un objeto con la propiedad type establecida a la cadena `LOGOUT`. ```js assert(logoutUser().type === 'LOGOUT'); ``` -The store should be initialized with an object with an `authenticated` property set to `false`. +El almacén debe ser inicializado con un objeto con una propiedad `authenticated` establecida a `false`. ```js assert(store.getState().authenticated === false); ``` -Dispatching `loginUser` should update the `authenticated` property in the store state to `true`. +El envío de `loginUser` debe actualizar la propiedad `authenticated` en el estado del almacén a `true`. ```js assert( @@ -51,7 +51,7 @@ assert( ); ``` -Dispatching `logoutUser` should update the `authenticated` property in the store state to `false`. +El envío de `logoutUser` debe actualizar la propiedad `authenticated` en el estado del almacén a `false`. ```js assert( @@ -67,7 +67,7 @@ assert( ); ``` -The `authReducer` function should handle multiple action types with a `switch` statement. +La función `authReducer` debe manejar múltiples tipos de acción con una sentencia `switch`. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md index e34d2505f4..3707424741 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-const-for-action-types.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036152 -title: Use const for Action Types +title: Usa const para los tipos de acción challengeType: 6 forumTopicId: 301450 dashedName: use-const-for-action-types @@ -8,35 +8,35 @@ dashedName: use-const-for-action-types # --description-- -A common practice when working with Redux is to assign action types as read-only constants, then reference these constants wherever they are used. You can refactor the code you're working with to write the action types as `const` declarations. +Una práctica común cuando se trabaja con Redux es asignar tipos de acción como constantes de sólo lectura, y luego hacer referencia a estas constantes dondequiera que se utilicen. Puedes refactorizar el código con el que estás trabajando para escribir los tipos de acción como declaraciones `const`. # --instructions-- -Declare `LOGIN` and `LOGOUT` as `const` values and assign them to the strings `'LOGIN'` and `'LOGOUT'`, respectively. Then, edit the `authReducer()` and the action creators to reference these constants instead of string values. +Declara `LOGIN` y `LOGOUT` como valores `const` y asígnalos a las cadenas `'LOGIN'` y `'LOGOUT'`, respectivamente. Luego, edita el `authReducer()` y los creadores de acción para que hagan referencia a estas constantes en lugar de valores de cadena. -**Note:** It's generally a convention to write constants in all uppercase, and this is standard practice in Redux as well. +**Nota:** Generalmente es una convención escribir las constantes en mayúsculas, y esto es una práctica estándar en Redux también. # --hints-- -Calling the function `loginUser` should return an object with `type` property set to the string `LOGIN`. +La llamada a la función `loginUser` debe devolver un objeto con la propiedad `type` establecida a la cadena `LOGIN`. ```js assert(loginUser().type === 'LOGIN'); ``` -Calling the function `logoutUser` should return an object with `type` property set to the string `LOGOUT`. +La llamada a la función `logoutUser` debe devolver un objeto con la propiedad `type` establecida a la cadena `LOGOUT`. ```js assert(logoutUser().type === 'LOGOUT'); ``` -The store should be initialized with an object with property `login` set to `false`. +El almacén debe ser inicializado con un objeto con la propiedad `login` establecida a `false`. ```js assert(store.getState().authenticated === false); ``` -Dispatching `loginUser` should update the `login` property in the store state to `true`. +El envío de `loginUser` debe actualizar la propiedad `login` en el estado del almacén a `true`. ```js assert( @@ -51,7 +51,7 @@ assert( ); ``` -Dispatching `logoutUser` should update the `login` property in the store state to `false`. +El envío de `logoutUser` debe actualizar la propiedad `login` en el estado del almacén a `false`. ```js assert( @@ -67,7 +67,7 @@ assert( ); ``` -The `authReducer` function should handle multiple action types with a switch statement. +La función `authReducer` debe manejar múltiples tipos de acción con una sentencia switch. ```js (getUserInput) => @@ -83,7 +83,7 @@ The `authReducer` function should handle multiple action types with a switch sta ); ``` -`LOGIN` and `LOGOUT` should be declared as `const` values and should be assigned strings of `LOGIN`and `LOGOUT`. +`LOGIN` y `LOGOUT` deben declararse como valores `const` y se les debe asignar cadenas de `LOGIN` y `LOGOUT`. ```js const noWhiteSpace = __helpers.removeWhiteSpace(code); @@ -94,7 +94,7 @@ assert( ); ``` -The action creators and the reducer should reference the `LOGIN` and `LOGOUT` constants. +Los creadores de la acción y el reductor deben hacer referencia a las constantes `LOGIN` y `LOGOUT`. ```js (getUserInput) => diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md index 9839855204..139a8af7d9 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036156 -title: Use Middleware to Handle Asynchronous Actions +title: Usa middleware para manejar acciones asíncronas challengeType: 6 forumTopicId: 301451 dashedName: use-middleware-to-handle-asynchronous-actions @@ -8,39 +8,39 @@ dashedName: use-middleware-to-handle-asynchronous-actions # --description-- -So far these challenges have avoided discussing asynchronous actions, but they are an unavoidable part of web development. At some point you'll need to call asynchronous endpoints in your Redux app, so how do you handle these types of requests? Redux provides middleware designed specifically for this purpose, called Redux Thunk middleware. Here's a brief description how to use this with Redux. +Hasta ahora hemos evitado hablar de las acciones asíncronas, pero son una parte inevitable del desarrollo web. En algún momento necesitarás llamar a endpoints asíncronos en tu aplicación Redux, así que ¿cómo manejas este tipo de peticiones? Redux proporciona un middleware diseñado específicamente para este propósito, llamado Redux Thunk middleware. Aquí hay una breve descripción de cómo usar esto con Redux. -To include Redux Thunk middleware, you pass it as an argument to `Redux.applyMiddleware()`. This statement is then provided as a second optional parameter to the `createStore()` function. Take a look at the code at the bottom of the editor to see this. Then, to create an asynchronous action, you return a function in the action creator that takes `dispatch` as an argument. Within this function, you can dispatch actions and perform asynchronous requests. +Para incluir el Redux Thunk middleware, lo pasas como argumento a `Redux.applyMiddleware()`. Esta declaración se proporciona entonces como un segundo parámetro opcional a la función `createStore()`. Echa un vistazo al código en la parte inferior del editor para ver esto. Entonces, para crear una acción asíncrona, se devuelve una función en el creador de acción que toma `dispatch` como argumento. Dentro de esta función, se pueden enviar acciones y realizar peticiones asíncronas. -In this example, an asynchronous request is simulated with a `setTimeout()` call. It's common to dispatch an action before initiating any asynchronous behavior so that your application state knows that some data is being requested (this state could display a loading icon, for instance). Then, once you receive the data, you dispatch another action which carries the data as a payload along with information that the action is completed. +En este ejemplo, se simula una petición asíncrona con una llamada `setTimeout()`. Es común enviar una acción antes de iniciar cualquier comportamiento asíncrono para que el estado de tu aplicación sepa que se están solicitando algunos datos (este estado podría mostrar un icono de carga, por ejemplo). Luego, una vez que recibes los datos, envía otra acción que lleva los datos como carga útil junto con la información de que la acción se ha completado. -Remember that you're passing `dispatch` as a parameter to this special action creator. This is what you'll use to dispatch your actions, you simply pass the action directly to dispatch and the middleware takes care of the rest. +Recuerda que estás pasando `dispatch` como parámetro a este creador de acciones especiales. Esto es lo que usarás para enviar tus acciones, simplemente pasas la acción directamente a dispatch y el middleware se encarga del resto. # --instructions-- -Write both dispatches in the `handleAsync()` action creator. Dispatch `requestingData()` before the `setTimeout()` (the simulated API call). Then, after you receive the (pretend) data, dispatch the `receivedData()` action, passing in this data. Now you know how to handle asynchronous actions in Redux. Everything else continues to behave as before. +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. # --hints-- -The `requestingData` action creator should return an object of type equal to the value of `REQUESTING_DATA`. +El creador de acción `requestingData` debe devolver un objeto de tipo igual al valor de `REQUESTING_DATA`. ```js assert(requestingData().type === REQUESTING_DATA); ``` -The `receivedData` action creator should return an object of type equal to the value of `RECEIVED_DATA`. +El creador de acción `receivedData` debe devolver un objeto de tipo igual al valor de `RECEIVED_DATA`. ```js assert(receivedData('data').type === RECEIVED_DATA); ``` -`asyncDataReducer` should be a function. +`asyncDataReducer` debe ser una función. ```js assert(typeof asyncDataReducer === 'function'); ``` -Dispatching the `requestingData` action creator should update the store `state` property of fetching to `true`. +Enviar el creador de acción `requestingData` debe actualizar la propiedad store `state` de fetching a `true`. ```js assert( @@ -53,7 +53,7 @@ assert( ); ``` -Dispatching `handleAsync` should dispatch the data request action and then dispatch the received data action after a delay. +El envío de `handleAsync` debe enviar la acción de solicitud de datos y luego enviar la acción de datos recibidos después de un retraso. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md index 68e6f320ac..688118eede 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036159 -title: Use the Spread Operator on Arrays +title: Usa el operador de propagación en arreglos challengeType: 6 forumTopicId: 301452 dashedName: use-the-spread-operator-on-arrays @@ -8,21 +8,21 @@ dashedName: use-the-spread-operator-on-arrays # --description-- -One solution from ES6 to help enforce state immutability in Redux is the spread operator: `...`. The spread operator has a variety of applications, one of which is well-suited to the previous challenge of producing a new array from an existing array. This is relatively new, but commonly used syntax. For example, if you have an array `myArray` and write: +Una solución de ES6 para ayudar a reforzar la inmutabilidad del estado en Redux es el operador de propagación: `...`. El operador de propagación tiene una variedad de aplicaciones, una de las cuales es muy adecuada para el desafío anterior de producir un nuevo arreglo a partir de un arreglo existente. Se trata de una sintaxis relativamente nueva, pero de uso común. Por ejemplo, si tienes un arreglo `myArray` y escribes: ```js let newArray = [...myArray]; ``` -`newArray` is now a clone of `myArray`. Both arrays still exist separately in memory. If you perform a mutation like `newArray.push(5)`, `myArray` doesn't change. The `...` effectively *spreads* out the values in `myArray` into a new array. To clone an array but add additional values in the new array, you could write `[...myArray, 'new value']`. This would return a new array composed of the values in `myArray` and the string `new value` as the last value. The spread syntax can be used multiple times in array composition like this, but it's important to note that it only makes a shallow copy of the array. That is to say, it only provides immutable array operations for one-dimensional arrays. +`newArray` es ahora un clon de `myArray`. Ambos arreglos siguen existiendo por separado en la memoria. Si realizas una mutación como `newArray.push(5)`, `myArray` no cambia. El `...` efectivamente *distribuye* los valores de `myArray` en un nuevo arreglo. Para clonar un arreglo pero añadir valores adicionales en el nuevo arreglo, se podría escribir `[...myArray, 'new value']`. Esto devolvería un nuevo arreglo compuesto por los valores de `myArray` y la cadena `new value` como último valor. La sintaxis de propagación se puede utilizar varias veces en la composición de arreglos como este, pero es importante tener en cuenta que sólo hace una copia superficial del arreglo. Es decir, sólo proporciona operaciones de arreglos inmutables para arreglos unidimensionales. # --instructions-- -Use the spread operator to return a new copy of state when a to-do is added. +Utiliza el operador de propagación para devolver una nueva copia del estado cuando se añade una tarea. # --hints-- -The Redux store should exist and initialize with a state equal to `["Do not mutate state!"]`. +El almacén Redux debe existir e inicializarse con un estado igual a `["Do not mutate state!"]`. ```js assert( @@ -36,13 +36,13 @@ assert( ); ``` -`addToDo` and `immutableReducer` both should be functions. +`addToDo` e `immutableReducer` deben ser funciones. ```js assert(typeof addToDo === 'function' && typeof immutableReducer === 'function'); ``` -Dispatching an action of type `ADD_TO_DO` on the Redux store should add a `todo` item and should NOT mutate state. +Enviar una acción de tipo `ADD_TO_DO` en el almacén Redux debe añadir un elemento `todo` y NO debe mutar el estado. ```js assert( @@ -57,7 +57,7 @@ assert( ); ``` -The spread operator should be used to return new state. +El operador de propagación debe utilizarse para devolver el nuevo estado. ```js (getUserInput) => assert(getUserInput('index').includes('...state')); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/redux/write-a-counter-with-redux.md b/curriculum/challenges/espanol/03-front-end-libraries/redux/write-a-counter-with-redux.md index 9bf25454c3..b6346924f7 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/redux/write-a-counter-with-redux.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/redux/write-a-counter-with-redux.md @@ -1,6 +1,6 @@ --- id: 5a24c314108439a4d4036157 -title: Write a Counter with Redux +title: Escribe un contador con Redux challengeType: 6 forumTopicId: 301453 dashedName: write-a-counter-with-redux @@ -8,33 +8,33 @@ dashedName: write-a-counter-with-redux # --description-- -Now you've learned all the core principles of Redux! You've seen how to create actions and action creators, create a Redux store, dispatch your actions against the store, and design state updates with pure reducers. You've even seen how to manage complex state with reducer composition and handle asynchronous actions. These examples are simplistic, but these concepts are the core principles of Redux. If you understand them well, you're ready to start building your own Redux app. The next challenges cover some of the details regarding `state` immutability, but first, here's a review of everything you've learned so far. +¡Ahora ya has aprendido todos los principios básicos de Redux! Has visto cómo crear acciones y creadores de acción, crear un almacén Redux, enviar tus acciones contra el almacén y diseñar actualizaciones de estado con reductores puros. Incluso has visto cómo gestionar estados complejos con la composición de reductores y manejar acciones asíncronas. Estos ejemplos son simplistas, pero estos conceptos son los principios básicos de Redux. Si los entiendes bien, estás listo para empezar a construir tu propia aplicación Redux. Los próximos desafíos cubren algunos de los detalles relacionados con la inmutabilidad de `state`, pero primero, aquí hay un repaso de todo lo que has aprendido hasta ahora. # --instructions-- -In this lesson, you'll implement a simple counter with Redux from scratch. The basics are provided in the code editor, but you'll have to fill in the details! Use the names that are provided and define `incAction` and `decAction` action creators, the `counterReducer()`, `INCREMENT` and `DECREMENT` action types, and finally the Redux `store`. Once you're finished you should be able to dispatch `INCREMENT` or `DECREMENT` actions to increment or decrement the state held in the `store`. Good luck building your first Redux app! +En esta lección, implementarás un simple contador con Redux desde cero. El editor de código proporciona lo básico, ¡pero tendrás que completar los detalles! Utiliza los nombres que se proporcionan y define los creadores de acciones `incAction` y `decAction`, el `counterReducer()`, los tipos de acción `INCREMENT` y `DECREMENT`, y finalmente el `store` de Redux. Una vez que hayas terminado deberías poder enviar acciones `INCREMENT` o `DECREMENT` para incrementar o disminuir el estado mantenido en el `store`. ¡Buena suerte construyendo tu primera aplicación Redux! # --hints-- -The action creator `incAction` should return an action object with `type` equal to the value of `INCREMENT` +El creador de acción `incAction` debe devolver un objeto de acción con `type` igual al valor de `INCREMENT` ```js assert(incAction().type === INCREMENT); ``` -The action creator `decAction` should return an action object with `type` equal to the value of `DECREMENT` +El creador de acción `decAction` debe devolver un objeto de acción con `type` igual al valor de `DECREMENT` ```js assert(decAction().type === DECREMENT); ``` -The Redux store should initialize with a `state` of 0. +El almacén Redux debe inicializarse con un `state` de 0. ```js assert(store.getState() === 0); ``` -Dispatching `incAction` on the Redux store should increment the `state` by 1. +El envío de `incAction` en el almacén Redux debe incrementar el `state` en 1. ```js assert( @@ -47,7 +47,7 @@ assert( ); ``` -Dispatching `decAction` on the Redux store should decrement the `state` by 1. +El envío de `decAction` en el almacén Redux debe disminuir el `state` en 1. ```js assert( @@ -60,7 +60,7 @@ assert( ); ``` -`counterReducer` should be a function +`counterReducer` debe ser una función ```js assert(typeof counterReducer === 'function'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md index 0d9d13c6f0..a85d370e60 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/create-reusable-css-with-mixins.md @@ -1,6 +1,6 @@ --- id: 587d7dbd367417b2b2512bb6 -title: Create Reusable CSS with Mixins +title: Crea CSS reutilizable con Mixins challengeType: 0 forumTopicId: 301455 dashedName: create-reusable-css-with-mixins @@ -8,9 +8,9 @@ dashedName: create-reusable-css-with-mixins # --description-- -In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet. +En Sass, un mixin es un grupo de declaraciones de CSS que pueden reutilizarse a través de la hoja de estilo. -Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`: +Las nuevas funciones de CSS tardan en ser adoptadas por completo y estar listas para su uso en todos los navegadores. A medida que se añaden funciones a los navegadores, las reglas CSS que las utilizan pueden necesitar prefijos de proveedor. Consideremos `box-shadow`: ```scss div { @@ -21,7 +21,7 @@ div { } ``` -It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one: +Es mucho teclear para reescribir esta regla para todos los elementos que tienen un `box-shadow`, o para cambiar cada valor para probar diferentes efectos. Mixins son como funciones para CSS. Aquí está cómo escribir una: ```scss @mixin box-shadow($x, $y, $blur, $c){ @@ -32,7 +32,7 @@ It's a lot of typing to re-write this rule for all the elements that have a `box } ``` -The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive: +La definición empieza con `@mixin` seguido de un nombre personalizado. Los parámetros ( `$x`, `$y`, `$blur`, y `$c` en el ejemplo anterior) son opcionales. Ahora cada vez que se necesite una regla `box-shadow`, una sola línea llamando al mixin reemplaza el tener que escribir todos los prefijos del proveedor. Se llama a un mixin con la directiva `@include`: ```scss div { @@ -42,17 +42,17 @@ div { # --instructions-- -Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`. +Escribe un mixin para `border-radius` y dale un parámetro `$radius`. Debe utilizar todos los prefijos de proveedor del ejemplo. Luego usa el mixin `border-radius` para dar al elemento `#awesome` un border radius de `15px`. # --hints-- -Your code should declare a mixin named `border-radius` which has a parameter named `$radius`. +Tu código debe declarar un mixin llamado `border-radius` que tiene un parámetro llamado `$radius`. ```js assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi)); ``` -Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter. +Tu código debe incluir el prefijo de proveedor `-webkit-border-radius` que utiliza el parámetro `$radius`. ```js assert( @@ -60,7 +60,7 @@ assert( ); ``` -Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter. +Tu código debe incluir el prefijo de proveedor `-moz-border-radius` que utiliza el parámetro `$radius`. ```js assert( @@ -68,13 +68,13 @@ assert( ); ``` -Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter. +Tu código debe incluir el prefijo de proveedor `-ms-border-radius` que utiliza el parámetro `$radius`. ```js assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi)); ``` -Your code should include the general `border-radius` rule that uses the `$radius` parameter. +Tu código debe incluir la regla general `border-radius` que utiliza el parámetro `$radius`. ```js assert( @@ -83,7 +83,7 @@ assert( ); ``` -Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`. +Tu código debe llamar al `border-radius mixin` usando la palabra clave `@include`, configurándolo a `15px`. ```js assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi)); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.md index c5723d66d1..47f37a1369 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.md @@ -1,6 +1,6 @@ --- id: 587d7fa5367417b2b2512bbd -title: Extend One Set of CSS Styles to Another Element +title: Hereda un conjunto de estilos CSS a otro elemento challengeType: 0 forumTopicId: 301456 dashedName: extend-one-set-of-css-styles-to-another-element @@ -8,9 +8,9 @@ dashedName: extend-one-set-of-css-styles-to-another-element # --description-- -Sass has a feature called `extend` that makes it easy to borrow the CSS rules from one element and build upon them in another. +Sass tiene una función llamada `extend` que facilita tomar prestadas las reglas CSS de un elemento y construir sobre ellas en otro. -For example, the below block of CSS rules style a `.panel` class. It has a `background-color`, `height` and `border`. +Por ejemplo, el siguiente bloque de reglas CSS da estilo a la clase `.panel`. Este tiene un `background-color`, `height` y `border`. ```scss .panel{ @@ -20,7 +20,7 @@ For example, the below block of CSS rules style a `.panel` class. It has a `back } ``` -Now you want another panel called `.big-panel`. It has the same base properties as `.panel`, but also needs a `width` and `font-size`. It's possible to copy and paste the initial CSS rules from `.panel`, but the code becomes repetitive as you add more types of panels. The `extend` directive is a simple way to reuse the rules written for one element, then add more for another: +Ahora tienes otro panel llamado `.big-panel`. Tiene las mismas propiedades base que `.panel`, pero también necesita `width` y `font-size`. Es posible copiar y pegar las reglas de CSS iniciales de `.panel`, pero el código se vuelve repetitivo a medida que agregas más tipos de paneles. La directiva `extend` es una forma simple de reutilizar las reglas escritas para un elemento y luego añadir más para otro: ```scss .big-panel{ @@ -30,15 +30,15 @@ Now you want another panel called `.big-panel`. It has the same base properties } ``` -The `.big-panel` will have the same properties as `.panel` in addition to the new styles. +El `.big-panel` tendrá las mismas propiedades que `.panel` además de los nuevos estilos. # --instructions-- -Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta. +Crea una clase `.info-important` que hereda `.info` y también tiene un `background-color` establecido en magenta. # --hints-- -Your `info-important` class should have a `background-color` set to `magenta`. +Tu clase `info-important` debe tener un `background-color` establecido a `magenta`. ```js assert( @@ -48,7 +48,7 @@ assert( ); ``` -Your `info-important` class should use `@extend` to inherit the styling from the `info` class. +Tu clase `info-important` debe usar `@extend` para heredar el estilo de la clase `info`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/nest-css-with-sass.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/nest-css-with-sass.md index 1e7b8493c6..32cfdbe7a7 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/nest-css-with-sass.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/nest-css-with-sass.md @@ -1,6 +1,6 @@ --- id: 587d7dbd367417b2b2512bb5 -title: Nest CSS with Sass +title: Anida CSS con Sass challengeType: 0 forumTopicId: 301457 dashedName: nest-css-with-sass @@ -8,9 +8,9 @@ dashedName: nest-css-with-sass # --description-- -Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet. +Sass permite anidar las reglas CSS, que es una forma útil de organizar una hoja de estilo. -Normally, each element is targeted on a different line to style it, like so: +Normalmente, cada elemento está dirigido a una línea diferente para darle estilo, así: ```scss nav { @@ -26,7 +26,7 @@ nav ul li { } ``` -For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements: +Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde la anidación puede ayudar a organizar tu código colocando reglas de estilo hijo dentro de los respectivos elementos padres: ```scss nav { @@ -45,11 +45,11 @@ nav { # --instructions-- -Use the nesting technique shown above to re-organize the CSS rules for both children of `.blog-post` element. For testing purposes, the `h1` should come before the `p` element. +Utiliza la técnica de anidación mostrada anteriormente para reorganizar las reglas CSS para ambos hijos del elemento `.blog-post`. Para fines de prueba, el `h1` debe ir antes del elemento `p`. # --hints-- -Your code should re-organize the CSS rules so the `h1` and `p` are nested in the `.blog-post` parent element. +Tu código debe reorganizar las reglas CSS para que `h1` y `p` estén anidados en el elemento padre `.blog-post`. ```js assert( diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md index 9262041c3a..3e30e91d16 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md @@ -1,6 +1,6 @@ --- id: 587d7dbf367417b2b2512bbc -title: Split Your Styles into Smaller Chunks with Partials +title: Divide tus estilos en trozos más pequeños con parciales challengeType: 0 forumTopicId: 301459 dashedName: split-your-styles-into-smaller-chunks-with-partials @@ -8,25 +8,25 @@ dashedName: split-your-styles-into-smaller-chunks-with-partials # --description-- -Partials in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized. +Parciales en Sass son archivos separados que contienen segmentos de código CSS. Estos se importan y son utilizados en otros archivos Sass. Esta es una gran manera de agrupar código similar en un módulo para mantenerlo organizado. -Names for partials start with the underscore (`_`) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the `.scss` file extension. To bring the code in the partial into another Sass file, use the `@import` directive. +Los nombres de los parciales comienzan con el carácter de guión bajo (`_`), que le dice a Sass que es un pequeño segmento de CSS y no para convertirlo en un archivo CSS. También, los archivos Sass terminan con la extensión de archivo `.scss`. Para introducir el código en el parcial en otro archivo Sass, utiliza la directiva `@import`. -For example, if all your mixins are saved in a partial named "\_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file: +Por ejemplo, si todos tus mixins se guardan en un parcial llamado "\_mixins.scss", y son necesarios en el archivo "main.scss", es cómo usarlos en el archivo principal: ```scss @import 'mixins' ``` -Note that the underscore and file extension are not needed in the `import` statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use. +Ten en cuenta que el guión bajo y la extensión del archivo no son necesarios en la declaración `import` - Sass entiende que es un parcial. Una vez que un parcial es importado en un archivo, todas las variables, mixins y otros códigos están disponibles para usar. # --instructions-- -Write an `@import` statement to import a partial named `_variables.scss` into the main.scss file. +Escribe una instrucción `@import` para importar un nombre parcial `_variables.scss` en el archivo main.scss. # --hints-- -Your code should use the `@import` directive, and should not include the underscore in the file name. +Tu código debe usar la directiva `@import` y no debe incluir el guión bajo en el nombre del archivo. ```js assert(code.match(/@import\s+?('|")variables\1/gi)); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md index b106a6fb84..f38eccbc8f 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/store-data-with-sass-variables.md @@ -1,6 +1,6 @@ --- id: 587d7dbd367417b2b2512bb4 -title: Store Data with Sass Variables +title: Almacena datos con variables Sass challengeType: 0 forumTopicId: 301460 dashedName: store-data-with-sass-variables @@ -8,18 +8,18 @@ dashedName: store-data-with-sass-variables # --description-- -One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript. +Una característica de Sass que es diferente de CSS es que utiliza variables. Se declaran y establecen para almacenar datos, de forma similar a JavaScript. -In JavaScript, variables are defined using the `let` and `const` keywords. In Sass, variables start with a `$` followed by the variable name. +En JavaScript, las variables se definen mediante las palabras clave `let` y `const`. En Sass, las variables comienzan con un `$` seguido del nombre de la variable. -Here are a couple examples: +Aquí hay un par de ejemplos: ```scss $main-fonts: Arial, sans-serif; $headings-color: green; ``` -And to use the variables: +Y para usar las variables: ```scss h1 { @@ -28,33 +28,33 @@ h1 { } ``` -One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value. +Un ejemplo en el que las variables son útiles es cuando un número de elementos tiene que ser del mismo color. Si se cambia ese color, el único lugar para editar el código es el valor de la variable. # --instructions-- -Create a variable `$text-color` and set it to `red`. Then change the value of the `color` property for the `.blog-post` and `h2` to the `$text-color` variable. +Crea una variable `$text-color` y asígnala como `red`. Luego, cambia el valor de la propiedad `color` para el `.blog-post` y `h2` a la variable `$text-color`. # --hints-- -Your code should have a Sass variable declared for `$text-color` with a value of `red`. +Tu código debe tener una variable Sass declarada para `$text-color` con un valor de `red`. ```js assert(code.match(/\$text-color\s*:\s*?red\s*;/g)); ``` -Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items. +Tu código debe utilizar la variable `$text-color` para cambiar el `color` de los elementos `.blog-post` y `h2`. ```js assert(code.match(/color\s*:\s*\$text-color\s*;?/g)); ``` -Your `.blog-post` element should have a `color` of red. +Tu elemento `.blog-post` debe tener un `color` rojo. ```js assert($('.blog-post').css('color') == 'rgb(255, 0, 0)'); ``` -Your `h2` elements should have a `color` of red. +Tu elemento `h2` debe tener un `color` rojo. ```js assert($('h2').css('color') == 'rgb(255, 0, 0)'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md index bfdc68db55..91ab70d6ba 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.md @@ -1,6 +1,6 @@ --- id: 587d7dbf367417b2b2512bba -title: Use @each to Map Over Items in a List +title: Usa @each para asignar elementos en una lista challengeType: 0 forumTopicId: 301461 dashedName: use-each-to-map-over-items-in-a-list @@ -8,7 +8,7 @@ dashedName: use-each-to-map-over-items-in-a-list # --description-- -The last challenge showed how the `@for` directive uses a starting and ending value to loop a certain number of times. Sass also offers the `@each` directive which loops over each item in a list or map. On each iteration, the variable gets assigned to the current value from the list or map. +El último desafío mostró cómo la directiva `@for` utiliza un valor inicial y final para hacer un bucle un determinado número de veces. Sass también ofrece la directiva `@each` que hace un bucle sobre cada elemento de una lista o mapa. En cada iteración, la variable se asigna al valor actual de la lista o del mapa. ```scss @each $color in blue, red, green { @@ -16,7 +16,7 @@ The last challenge showed how the `@for` directive uses a starting and ending va } ``` -A map has slightly different syntax. Here's an example: +Un mapa tiene una sintaxis ligeramente diferente. Aquí hay un ejemplo: ```scss $colors: (color1: blue, color2: red, color3: green); @@ -26,7 +26,7 @@ $colors: (color1: blue, color2: red, color3: green); } ``` -Note that the `$key` variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have `color1`, `color2`... in it. Both of the above code examples are converted into the following CSS: +Ten en cuenta que la variable `$key` es necesaria para hacer referencia a las claves en el mapa. De lo contrario, el CSS compilado tendría `color1`, `color2`... en él. Los dos ejemplos anteriores se convierten en el siguiente CSS: ```scss .blue-text { @@ -44,29 +44,29 @@ Note that the `$key` variable is needed to reference the keys in the map. Otherw # --instructions-- -Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item. Each class should set the `background-color` the respective color. +Escribe una directiva `@each` que recorra una lista: `blue, black, red` y asigna cada variable a una clase `.color-bg`, donde la parte `color` cambia para cada elemento. Cada clase debe establecer el `background-color` al respectivo color. # --hints-- -Your code should use the `@each` directive. +Tu código debe utilizar la directiva `@each`. ```js assert(code.match(/@each /g)); ``` -Your `.blue-bg` class should have a `background-color` of blue. +Tu clase `.blue-bg` debe tener un `background-color` de color azul. ```js assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)'); ``` -Your `.black-bg` class should have a `background-color` of black. +Tu clase `.black-bg` debe tener un `background-color` de color negro. ```js assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)'); ``` -Your `.red-bg` class should have a `background-color` of red. +Tu clase `.red-bg` debe tener un `background-color` de color rojo. ```js assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md index f2d8bd73b8..ed3755617a 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.md @@ -1,6 +1,6 @@ --- id: 587d7dbe367417b2b2512bb9 -title: Use @for to Create a Sass Loop +title: Usa @for para crear un bucle Sass challengeType: 0 forumTopicId: 301462 dashedName: use-for-to-create-a-sass-loop @@ -8,11 +8,11 @@ dashedName: use-for-to-create-a-sass-loop # --description-- -The `@for` directive adds styles in a loop, very similar to a `for` loop in JavaScript. +La directiva `@for` añade estilos en un bucle, muy similar a un bucle `for` en JavaScript. -`@for` is used in two ways: "start through end" or "start to end". The main difference is that the "start **to** end" *excludes* the end number as part of the count, and "start **through** end" *includes* the end number as part of the count. +`@for` se utiliza de dos maneras: "de principio hasta el fin" o "de principio a fin". La principal diferencia es que el "de principio **a** fin" *excluye* el número final como parte de la cuenta, y "de principio **hasta** el fin" *incluye* el número final como parte de la cuenta. -Here's a start **through** end example: +Aquí hay un ejemplo de principio **hasta** el fin: ```scss @for $i from 1 through 12 { @@ -20,7 +20,7 @@ Here's a start **through** end example: } ``` -The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a string. When the Sass file is converted to CSS, it looks like this: +La parte `#{$i}` es la sintaxis para combinar una variable (`i`) con texto para hacer una cadena. Cuando el archivo Sass se convierte en CSS, tiene este aspecto: ```scss .col-1 { @@ -38,47 +38,47 @@ The `#{$i}` part is the syntax to combine a variable (`i`) with text to make a s } ``` -This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes. +Esta es una manera poderosa de crear un diseño de cuadrícula (grid). Ahora tienes doce opciones de ancho de columna disponibles como clases CSS. # --instructions-- -Write a `@for` directive that takes a variable `$j` that goes from 1 **to** 6. +Escribe una directiva `@for` que tome una variable `$j` que vaya de 1 **a** 6. -It should create 5 classes called `.text-1` to `.text-5` where each has a `font-size` set to 15px multiplied by the index. +Debes crear 5 clases llamadas `.text-1` a `.text-5` donde cada una tiene un `font-size` establecido en 15px multiplicado por el índice. # --hints-- -Your code should use the `@for` directive. +Tu código debe utilizar la directiva `@for`. ```js assert(code.match(/@for /g)); ``` -Your `.text-1` class should have a `font-size` of 15px. +Tu clase `.text-1` debe tener un `font-size` de 15px. ```js assert($('.text-1').css('font-size') == '15px'); ``` -Your `.text-2` class should have a `font-size` of 30px. +Tu clase `.text-2` debe tener un `font-size` de 30px. ```js assert($('.text-2').css('font-size') == '30px'); ``` -Your `.text-3` class should have a `font-size` of 45px. +Tu clase `.text-3` debe tener un `font-size` de 45px. ```js assert($('.text-3').css('font-size') == '45px'); ``` -Your `.text-4` class should have a `font-size` of 60px. +Tu clase `.text-4` debe tener un `font-size` de 60px. ```js assert($('.text-4').css('font-size') == '60px'); ``` -Your `.text-5` class should have a `font-size` of 75px. +Tu clase `.text-5` debe tener un `font-size` de 75px. ```js assert($('.text-5').css('font-size') == '75px'); diff --git a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md index e13d113b23..18b9386566 100644 --- a/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md +++ b/curriculum/challenges/espanol/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md @@ -1,6 +1,6 @@ --- id: 587d7dbe367417b2b2512bb8 -title: Use @if and @else to Add Logic To Your Styles +title: Usa @if y @else para añadir lógica a tus estilos challengeType: 0 forumTopicId: 301463 dashedName: use-if-and-else-to-add-logic-to-your-styles @@ -8,7 +8,7 @@ dashedName: use-if-and-else-to-add-logic-to-your-styles # --description-- -The `@if` directive in Sass is useful to test for a specific case - it works just like the `if` statement in JavaScript. +La directiva `@if` en Sass es útil para probar un caso específico: funciona igual que la sentencia `if` en JavaScript. ```scss @mixin make-bold($bool) { @@ -18,7 +18,7 @@ The `@if` directive in Sass is useful to test for a specific case - it works jus } ``` -And just like in JavaScript, `@else if` and `@else` test for more conditions: +Y al igual que en JavaScript, `@else if` y `@else` prueban más condiciones: ```scss @mixin text-effect($val) { @@ -39,7 +39,7 @@ And just like in JavaScript, `@else if` and `@else` test for more conditions: # --instructions-- -Create a mixin called `border-stroke` that takes a parameter `$val`. The mixin should check for the following conditions using `@if`, `@else if`, and `@else`: +Crea un mixin llamado `border-stroke` que toma un parámetro `$val`. El mixin debe comprobar las siguientes condiciones utilizando `@if`, `@else if`, y `@else`: ```scss light - 1px solid black @@ -47,17 +47,17 @@ medium - 3px solid black heavy - 6px solid black ``` -If `$val` is not `light`, `medium`, or `heavy`, the border should be set to `none`. +Si `$val` no es `light`, `medium`, o `heavy`, el borde debe establecerse en `none`. # --hints-- -Your code should declare a mixin named `border-stroke` which has a parameter named `$val`. +Tu código debe declarar un mixin llamado `border-stroke` que tiene un parámetro llamado `$val`. ```js assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi)); ``` -Your mixin should have an `@if` statement to check if `$val` is `light`, and to set the `border` to `1px solid black`. +Tu mixin debe tener una sentencia `@if` para comprobar si `$val` es `light`, y para establecer el `border` a `1px solid black`. ```js assert( @@ -67,7 +67,7 @@ assert( ); ``` -Your mixin should have an `@else if` statement to check if `$val` is `medium`, and to set the `border` to `3px solid black`. +Tu mixin debe tener una sentencia `@else if` para comprobar si `$val` es `medium`, y para establecer el `border` a `3px solid black`. ```js assert( @@ -77,7 +77,7 @@ assert( ); ``` -Your mixin should have an `@else if` statement to check if `$val` is `heavy`, and to set the `border` to `6px solid black`. +Tu mixin debe tener una sentencia `@else if` para comprobar si `$val` es `heavy`, y para establecer el `border` a `6px solid black`. ```js assert( @@ -87,7 +87,7 @@ assert( ); ``` -Your mixin should have an `@else` statement to set the `border` to `none`. +Tu mixin debe tener una sentencia `@else` para establecer el `border` a `none`. ```js assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi)); diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md index 33794d33d4..ed8344cefc 100644 --- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md +++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md @@ -1,6 +1,6 @@ --- id: bd7168d8c242eddfaeb5bd13 -title: Visualize Data with a Bar Chart +title: Visualiza datos con un gráfico de barras challengeType: 3 forumTopicId: 301464 dashedName: visualize-data-with-a-bar-chart @@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-bar-chart # --description-- -**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: . +**Objetivo:** Crea una aplicación en [CodePen.io](https://codepen.io) que sea funcionalmente similar a esta: . -Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style. +Completa las siguientes [historias de usuario](https://en.wikipedia.org/wiki/User_story) y consigue pasar todas las pruebas. Dale tu estilo personal. -You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at . Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. +Puedes utilizar HTML, JavaScript, CSS y la librería de visualización basada en svg D3. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en . Los elementos DOM obligatorios (no virtuales) son consultados en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3. -**User Story #1:** My chart should have a title with a corresponding `id="title"`. +**Historia de usuario #1:** Mi gráfico debe tener un título con su correspondiente `id="title"`. -**User Story #2:** My chart should have a `g` element x-axis with a corresponding `id="x-axis"`. +**Historia de usuario #2:** Mi gráfico debe tener un elemento `g` en el eje-x con su correspondiente `id="x-axis"`. -**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`. +**Historia de usuario #3:** Mi gráfico debe tener un elemento `g` en el eje-y con su correspondiente `id="y-axis"`. -**User Story #4:** Both axes should contain multiple tick labels, each with a corresponding `class="tick"`. +**Historia de usuario #4:** Ambos ejes debe contener múltiples etiquetas de marca, cada uno con su correspondiente `class="tick"`. -**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data. +**Historia de usuario #5:** Mi gráfico debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos. -**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values. +**Historia de usuario #6:** Cada barra debe tener la propiedad `data-date` y `data-gdp` conteniendo los valores `date` y `GDP`. -**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data. +**Historia de usuario #7:** Las propiedades `data-date` de los elementos de la barra deben coincidir con el orden de los datos proporcionados. -**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data. +**Historia de usuario #8:** Las propiedades `data-gdp` de los elementos de la barra deben coincidir con el orden de los datos proporcionados. -**User Story #9:** Each bar element's height should accurately represent the data's corresponding `GDP`. +**Historia de usuario #9:** La altura de cada elemento de barra debe representar con exactitud el `GDP` correspondiente a los datos. -**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis. +**Historia de usuario #10:** El atributo `data-date` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-x. -**User Story #11:** The `data-gdp` attribute and its corresponding bar element should align with the corresponding value on the y-axis. +**Historia de usuario #11:** El atributo `data-gdp` y su correspondiente elemento de barra deben alinearse con el valor correspondiente en el eje-y. -**User Story #12:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area. +**Historia de usuario #12:** Puedo pasar el ratón por encima de un área y ver una descripción con su correspondiente `id="tooltip"` que muestra más información sobre el área. -**User Story #13:** My tooltip should have a `data-date` property that corresponds to the `data-date` of the active area. +**User Story #13:** Mi descripción debe tener una propiedad `data-date` que corresponda con el `data-date` del área activa. -Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json` +Aquí está el conjunto de datos que necesitarás para completar este proyecto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json` -You can build your project by using this CodePen template and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`. +Puedes crear tu proyecto utilizando la plantilla de CodePen y haciendo clic en `Save` para crear tu propio entorno. 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`. -Once you're done, submit the URL to your working project with all its tests passing. +Una vez que hayas terminado, envía la URL de tu proyecto funcional con todas las pruebas aprobadas. # --solutions-- diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md index 4da4547ae9..d4273b45c6 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md @@ -8,24 +8,28 @@ dashedName: reuse-patterns-using-capture-groups # --description-- -Por vezes você procurará padrões que ocorrem várias vezes em uma string. Não faz sentido repetir a regex manualmente. Existe uma forma muito melhor de especificar quando a string possui múltiplas ocorrências do padrão buscado. - -Você pode usar grupos de captura para buscar substrings repetidas. Usamos parênteses (`(` e `)`) para criar grupos de captura. Só precisamos escrever a regex do padrão que se repete dentro deles. - -E, para especificar que a string capturada pelo grupo se repetirá, você escreve uma barra invertida (`\`) seguida de um número. Esse número começa por 1 e aumenta em um para cada grupo de captura que você usa. Por exemplo, `\1` captura o primeiro grupo. - -No exemplo abaixo, é capturada qualquer palavra que se repita depois de um espaço: +Vamos supor que você deseja encontrar a correspondência de uma palavra que ocorra várias vezes como abaixo. ```js -let repeatStr = "regex regex"; -let repeatRegex = /(\w+)\s\1/; -repeatRegex.test(repeatStr); -repeatStr.match(repeatRegex); +let repeatStr = "row row row your boat"; ``` -Nele, `test` retorna `true` e `match` retorna `["regex regex", "regex"]`. +Você poderia usar `/row row row/`, mas e se você não souber a palavra específica repetida? Grupos de captura podem ser usados para localizar substrings repetidas. + +Os grupos de captura são criados envolvendo o padrão de regex a ser capturado entre parênteses. Neste caso, o objetivo é capturar uma palavra composta de caracteres alfanuméricos para que o grupo de captura seja `\w+` entre parênteses: `/(\w+)/`. + +A substring correspondente ao grupo é salva em uma "variável" temporária que pode ser acessada dentro da mesma expressão regular usando uma barra invertida e o número do grupo de captura (ex.: `\1`). Os grupos de captura são automaticamente numerados pela posição de abertura de seus parênteses (esquerda para direita), começando em 1. + +O exemplo abaixo captura qualquer palavra que se repita três vezes, separada por espaços: + +```js +let repeatRegex = /(\w+) \1 \1/; +repeatRegex.test(repeatStr); // Returns true +repeatStr.match(repeatRegex); // Returns ["row row row", "row"] +``` + +Usar o método `.match()` em uma string retornará um array com a substring correspondente, juntamente com seus grupos capturados. -O método `.match()` de uma string retorna um array com a string capturada e cada grupo capturado. # --instructions-- diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md index 6235fa61ac..cacb5a3097 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md @@ -8,7 +8,7 @@ dashedName: call-out-optional-actions-with-btn-info # --description-- -O Bootstrap vem com várias cores pré-definidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar. +O Bootstrap vem com várias cores predefinidas para botões. A classe `btn-info` é usada para chamar atenção para ações opcionais que o usuário pode tomar. Crie um novo botão do Bootstrap no nível de blocos abaixo do botão `Like` com o texto `Info`, e adicione as classes `btn-info` e `btn-block` do Bootstrap a ele. diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md index 32887624d7..e896c487d0 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd8acde08812 -title: Centralize Texto com Bootstrap +title: Centralizar o texto com Bootstrap challengeType: 0 forumTopicId: 16771 dashedName: center-text-with-bootstrap diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md index 5ebc4684d1..1ae95abd85 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908846 -title: Crie um Título Bootstrap +title: Criar um título com Bootstrap challengeType: 0 forumTopicId: 16812 dashedName: create-a-bootstrap-headline @@ -10,21 +10,21 @@ dashedName: create-a-bootstrap-headline Agora vamos construir algo do zero para praticar nossa habilidade em HTML, CSS e Bootstrap. -Iremos construir um playground JQuery, o qual iremos em breve colocar em uso nos nos desafios JQuery. +Vamos construir um playground jQuery, o qual vamos colocar em uso em breve nos desafios de jQuery. -Para começar, crie um elemento `h3`, com o texto `JQuery Playground`. +Para começar, crie um elemento `h3`, com o texto `jQuery Playground`. -Colore seu elemento `h3` com a classe Bootstrap `text-primary`, e centralize-o com a classe Bootstrap `text-center`. +Dê ao elemento `h3` uma cor com a classe `text-primary`, e centralize-o com a classe `text-center` do Bootstrap. # --hints-- -Você deve adicionar um elemento `h3` para sua página. +Você deve adicionar um elemento `h3` à página. ```js assert($('h3') && $('h3').length > 0); ``` -Seu elemento `h3` deve ter uma tag de fechamento. +O elemento `h3` deve ter uma tag de fechamento. ```js assert( @@ -34,19 +34,19 @@ assert( ); ``` -Seu elemento `h3` deve ser colorido ao aplicar a classe `text-primary` +O elemento `h3` deve ser colorido ao aplicar a classe `text-primary` ```js assert($('h3').hasClass('text-primary')); ``` -Seu elemento `h3` deve ser centralizado ao aplicar a classe `text-center` +O elemento `h3` deve ser centralizado ao aplicar a classe `text-center` ```js assert($('h3').hasClass('text-center')); ``` -Seu elemento `h3` deve ter o texto `JQuery Playground`. +O elemento `h3` deve ter o texto `jQuery Playground`. ```js assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text())); diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md index 5c40ae6ea4..14fa74d212 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9bec908846 -title: Crie uma Linha Bootstrap +title: Criar uma linha do Bootstrap challengeType: 0 forumTopicId: 16813 dashedName: create-a-bootstrap-row @@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-row # --description-- -Agora iremos criar uma linha Bootstrap para nossos elementos em linha. +Agora vamos criar uma linha do Bootstrap para nossos elementos em linha. Crie um elemento `div` abaixo da tag `h3`, com a classe `row`. # --hints-- -Você deve adicionar o elemento `div` abaixo do seu elemento `h3`. +Você deve adicionar o elemento `div` abaixo do elemento `h3`. ```js assert( @@ -25,19 +25,19 @@ assert( ); ``` -Seu elemento `div` deve ter a classe `row` +O elemento `div` deve ter a classe `row` ```js assert($('div').hasClass('row')); ``` -Seu `row div` deve estar aninhado dentro de `container-fluid div` +O `row div` deve estar aninhado dentro de `container-fluid div` ```js assert($('div.container-fluid div.row').length > 0); ``` -Seu elemento `div` deve ter uma tag de fechamento. +O elemento `div` deve ter uma tag de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md index 954774e7a5..069f79c0d2 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908852 -title: Crie uma Classe para Selecionar com JQuery Selectors +title: Criar uma classe para selecionar com jQuery Selectors challengeType: 0 forumTopicId: 16815 dashedName: create-a-class-to-target-with-jquery-selectors @@ -8,13 +8,13 @@ dashedName: create-a-class-to-target-with-jquery-selectors # --description-- -Nem todas as classes precisam ter um CSS correspondente. As vezes criamos classes apenas com o propósito de selecionar esses elementos de forma mais fácil usando JQuery. +Nem todas as classes precisam ter um CSS correspondente. Às vezes, criamos classes apenas com o propósito de selecionar esses elementos de forma mais fácil usando o jQuery. -De a cada um de seus elementos `button` a classe `target`. +Dê a cada um dos elementos `button` a classe `target`. # --hints-- -Você deve aplicar a classe `target` para cada um de seus elementos `button`. +Você deve aplicar a classe `target` para cada um dos elementos `button`. ```js assert($('.target').length > 5); diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-custom-heading.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-custom-heading.md index bcd6b43a5a..8edd06321f 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-custom-heading.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-a-custom-heading.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aede08845 -title: Crie um Título Personalizado +title: Criar um título personalizado challengeType: 0 forumTopicId: 16816 dashedName: create-a-custom-heading @@ -8,9 +8,9 @@ dashedName: create-a-custom-heading # --description-- -Iremos fazer um simples título para nossa foto de gato ao colocar o título e a imagem do gato relaxando na mesma linha. +Vamos fazer um título simples para nossa foto de gato ao colocar na mesma linha o título e a imagem do gato relaxando. -Lembre-se, Bootstrap usa o sistema de rede responsiva, o que torna fácil colocar elementos em linhas e especificar cada largura relativa de um elemento. A maioria das classes Bootstrap podem ser aplicadas a um elemento `div`. +Lembre-se: o Bootstrap usa o sistema de grade responsiva, o que torna fácil colocar elementos em linha e especificar cada largura relativa de um elemento. A maioria das classes do Bootstrap podem ser aplicadas a um elemento `div`. Aninhe sua primeira imagem e seu elemento `h2` dentro de um único elemento `
`. Aninhe o seu elemento `h2` dentro de uma `
` e sua imagem em uma `
` para que eles estejam na mesma linha. @@ -18,13 +18,13 @@ Notou como a imagem agora está no tamanho exato para encaixar com o texto? # --hints-- -Seu elemento `h2` e o elemento `img` mais a cima devem ambos estarem aninhados juntos dentro de um elemento `div` com a classe `row`. +O elemento `h2` e o elemento `img` mais acima devem estar aninhados juntos dentro de um elemento `div` com a classe `row`. ```js assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0); ``` -Seu elemento `img` superior deve estar aninhado dentro de uma `div` com a classe `col-xs-4`. +O elemento `img` superior deve estar aninhado dentro de uma `div` com a classe `col-xs-4`. ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -Seu elemento `h2` deve estar aninhado dentro de uma `div` com a classe `col-xs-8`. +O elemento `h2` deve estar aninhado dentro de uma `div` com a classe `col-xs-8`. ```js assert( @@ -42,7 +42,7 @@ assert( ); ``` -Todos os seus elementos `div` devem ter tags de fechamento. +Todos os elementos `div` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md index 70a9fee0aa..ba2fb82f43 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908848 -title: Crie Poços Bootstrap +title: Criar poços do Bootstrap challengeType: 0 forumTopicId: 16825 dashedName: create-bootstrap-wells @@ -8,25 +8,25 @@ dashedName: create-bootstrap-wells # --description-- -Bootstrap tem uma classe chamada `well` que podem criar uma sensação visual de profundidade para suas colunas. +O Bootstrap tem uma classe chamada `well` que pode criar uma sensação visual de profundidade para suas colunas. Aninhe um elemento `div` com a classe `well` dentro de cada um de seus elementos `col-xs-6` `div`. # --hints-- -Você deve adicionar um elemento `div` com a classe `well` dentro de cada um de seus elementos `div` com a classe `col-xs-6` +Você deve adicionar um elemento `div` com a classe `well` dentro de cada um dos elementos `div` com a classe `col-xs-6` ```js assert($('div.col-xs-6').not(':has(>div.well)').length < 1); ``` -Ambos os seus elementos `div` com a classe `col-xs-6` deve estar aninhados dentro de seu elemento `div` com a classe `row`. +Ambos os elementos `div` com a classe `col-xs-6` devem estar aninhados dentro do elemento `div` com a classe `row`. ```js assert($('div.row > div.col-xs-6').length > 1); ``` -Todos os seus elementos `div` devem ter tags de fechamento. +Todos os elementos `div` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md index b36efd2270..7a12bc36d5 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md @@ -1,6 +1,6 @@ --- id: bad87fee1347bd9aedf08845 -title: Livre-se de CSS customizado para Bootstrap +title: Limpar o CSS customizado para o Bootstrap challengeType: 0 forumTopicId: 17565 dashedName: ditch-custom-css-for-bootstrap @@ -12,27 +12,27 @@ Nós podemos limpar nosso código e fazer o aplicativo de fotos de gato parecer Não se preocupe - haverá muito tempo para customizar nosso CSS depois. -Delete as declarações CSS `.red-text`, `p` e `.smaller-image` de seu elemento `style` para que as únicas declarações restantes em seu elemento `style` sejam `h2` e `thick-green-border`. +Exclua as declarações CSS `.red-text`, `p` e `.smaller-image` do elemento `style` para que as únicas declarações restantes no elemento `style` sejam `h2` e `thick-green-border`. -Em seguida, delete o elemento `p` que contem um link morto. Em seguida, remova a classe `red-text` do seu elemento `h2` e substitua-o com a classe Bootstrap `text-primary`. +Em seguida, exclua o elemento `p` que contem um link morto. Depois disso, remova a classe `red-text` do elemento `h2` e substitua-a pela classe `text-primary`do Bootstrap. -Finalmente, remova a classe `smaller-image` do seu primeiro elemento `img` e substitua o com a classe `img-responsive`. +Finalmente, remova a classe `smaller-image` do primeiro elemento `img` e substitua-a pela classe `img-responsive`. # --hints-- -Seu elemento `h2` não deve mais conter a classe `red-text`. +O elemento `h2` não deve mais conter a classe `red-text`. ```js assert(!$('h2').hasClass('red-text')); ``` -Seu elemento `h2` deve ter agora a classe `text-primary`. +O elemento `h2` deve ter agora a classe `text-primary`. ```js assert($('h2').hasClass('text-primary')); ``` -Seus elementos de parágrafo não devem mais usar a fonte `Monospace`. +Os elementos de parágrafo não devem mais usar a fonte `Monospace`. ```js assert( @@ -42,13 +42,13 @@ assert( ); ``` -A classe `smaller-image` deve ser removida da sua imagem superior. +A classe `smaller-image` deve ser removida da imagem superior. ```js assert(!$('img').hasClass('smaller-image')); ``` -Você deve adicionar a classe `img-responsive` para sua imagem superior. +Você deve adicionar a classe `img-responsive` à imagem superior. ```js assert($('.img-responsive').length > 1); diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md index d541f7c56a..7dde696858 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908855 -title: Dê a Cada Elemento um id Único +title: Dar a cada elemento um id único challengeType: 0 forumTopicId: 18191 dashedName: give-each-element-a-unique-id @@ -8,9 +8,9 @@ dashedName: give-each-element-a-unique-id # --description-- -Nós também queremos ser capazes de usar JQuery para selecionar cada botão a partir do seu id único. +Nós também queremos ser capazes de usar jQuery para selecionar cada botão a partir do seu id único. -Dê a cada um dos seus botões um id único, começando com `target1` e terminando com `target6`. +Dê a cada um dos botões um id único, começando com `target1` e terminando com `target6`. Certifique-se de que `target1` até `target3` estão em `#left-well`, e `target4` até `target6` estão em `#right well`. diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md index f6c24d0cae..9738998460 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908746 -title: Hospede nossa página em um div de contêiner fluido de Bootstrap +title: Hospedar nossa página em um div de contêiner fluido do Bootstrap challengeType: 0 forumTopicId: 18198 dashedName: house-our-page-within-a-bootstrap-container-fluid-div @@ -8,19 +8,19 @@ dashedName: house-our-page-within-a-bootstrap-container-fluid-div # --description-- -Agora vamos garantir que todo o conteúdo na sua página seja responsivo a dispositivo móveis. +Agora, vamos garantir que todo o conteúdo na sua página seja responsivo a dispositivo móveis. Vamos aninhar nosso elemento `h3` dentro de um elemento `div` com a classe `container-fluid`. # --hints-- -Seu elemento `div` teve ter a classe `container-fluid`. +O elemento `div` teve ter a classe `container-fluid`. ```js assert($('div').hasClass('container-fluid')); ``` -Cada um de seus elementos `div` devem ter tags de fechamento. +Cada um de seus elementos `div` deve ter tags de fechamento. ```js assert( @@ -30,7 +30,7 @@ assert( ); ``` -Seu elemento `h3` deve estar aninhando dentro de um elemento `div`. +O elemento `h3` deve estar aninhando dentro de um elemento `div`. ```js assert($('div').children('h3').length > 0); diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md index 3f4c89ac0b..d7ebece894 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908856 -title: Dê um Label a Botões Bootstrap +title: Dar um label a botões do Bootstrap challengeType: 0 forumTopicId: 18222 dashedName: label-bootstrap-buttons @@ -8,31 +8,31 @@ dashedName: label-bootstrap-buttons # --description-- -Assim como nós rotulamos nossos wells, nós queremos rotular (label) nossos botões. +Assim como fizemos com nossos poços, queremos também dar um label aos nossos botões. -Dê o texto a cada um de seus elementos `button` que corresponde ao seletor id. +Dê a cada um de seus elementos `button` o texto que corresponde ao seu seletor id. # --hints-- -Seu elemento `button` com o id `target1` teve ter o texto `#target1`. +O elemento `button` com o id `target1` deve ter o texto `#target1`. ```js assert(new RegExp('#target1', 'gi').test($('#target1').text())); ``` -Seu elemento `button` com o id `target2` deve ter o texto `#target2`. +O elemento `button` com o id `target2` deve ter o texto `#target2`. ```js assert(new RegExp('#target2', 'gi').test($('#target2').text())); ``` -Seu elemento `button` com o id `target3` deve ter o texto `#target3`. +O elemento `button` com o id `target3` deve ter o texto `#target3`. ```js assert(new RegExp('#target3', 'gi').test($('#target3').text())); ``` -Seu elemento `button` com o id `target4` deve ter o texto `#target4`. +O elemento `button` com o id `target4` deve ter o texto `#target4`. ```js assert(new RegExp('#target4', 'gi').test($('#target4').text())); diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md index dec0573596..f5dc65aa5d 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908854 -title: Dê um Label a Wells Bootstrap +title: Dar um label aos poços do Bootstrap challengeType: 0 forumTopicId: 18223 dashedName: label-bootstrap-wells @@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells # --description-- -Pelo bem da clareza, vamos rotular ambos os nossos wells com seus ids. +Para deixar claro, vamos rotular nossos dois poços com seus ids. -Acima do seu well da esquerda, dentro de seu elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#left-well`. +Acima do poço da esquerda, dentro do elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#left-well`. -Acima do seu well da direita, dentro de seu elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#right-well`. +Acima do poço da direita, dentro do elemento `col-xs-6` `div`, adicione um elemento `h4` com o texto `#right-well`. # --hints-- -Você deve adicionar um elemento `h4` para cada um de seus elementos `
`. +Você deve adicionar um elemento `h4` para cada um dos elementos `
`. ```js assert( @@ -36,7 +36,7 @@ Um elemento `h4` deve ter o texto `#right-well`. assert(new RegExp('#right-well', 'gi').test($('h4').text())); ``` -Todos os seus elementos `h4` devem ter tags de fechamento. +Todos os elementos `h4` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md index 5b6e8b2152..7c7ed32a50 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908845 -title: Alinhe os Elementos de Formulário de maneira Responsiva com o Bootstrap +title: Alinhar os elementos de formulário de maneira responsiva com o Bootstrap challengeType: 0 forumTopicId: 18225 required: @@ -13,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap # --description-- -Agora vamos colocar o seu `input` e o `button` de submissão do formulário na mesma linha. Faremos isso da mesma forma que fizemos antes: usando um elemento `div` com a classe `row`, e outros elementos `div` dentro do primeiro div usando a classe `col-xs-*`. +Agora vamos colocar o `input` e o `button` de envio do formulário na mesma linha. Faremos isso da mesma forma que fizemos antes: usando um elemento `div` com a classe `row` e outros elementos `div` dentro do primeiro div usando a classe `col-xs-*`. -Aninhe ambos o `input` de texto e o `button` de submissão do formulário dentro de uma `div` com a classe `row`. Aninhe o texto do `input` do formulário dentro de uma div com a classe `col-xs-7`. Aninhe o seu `button` de submissão do formulário em uma `div` com a classe `col-xs-5`. +Aninhe o `input` de texto e o `button` de envio do formulário dentro de uma `div` com a classe `row`. Aninhe o texto do `input` do formulário dentro de uma div com a classe `col-xs-7`. Aninhe o `button` de envio do formulário em uma `div` com a classe `col-xs-5`. -Esse é o último desafio que faremos para nossa aplicação Foto de Gato por agora. Esperamos que você tenha gostado de aprender Font Awesome, Bootstrap e design responsivo! +Esse é o último desafio que faremos para nossa aplicação de fotos de gatos por agora. Esperamos que você tenha gostado de aprender Font Awesome, Bootstrap e design responsivo! # --hints-- -Seu botão de submissão e o input de texto do formulário devem estar aninhados dentro de uma div com a classe `row`. +O botão de envio e o input de texto do formulário devem estar aninhados dentro de uma div com a classe `row`. ```js assert( @@ -30,19 +30,19 @@ assert( ); ``` -Seu input de texto do formulário deve estar aninhado dentro de uma div com a classe `col-xs-7`. +O input de texto do formulário deve estar aninhado dentro de uma div com a classe `col-xs-7`. ```js assert($('div.col-xs-7:has(input[type="text"])').length > 0); ``` -Seu botão de submissão do formulário deve estar aninhado dentro de uma div com a classe `col-xs-5`. +O botão de envio do formulário deve estar aninhado dentro de uma div com a classe `col-xs-5`. ```js assert($('div.col-xs-5:has(button[type="submit"])').length > 0); ``` -Todos os seus elementos `div` devem ter tags de fechamento. +Todos os elementos `div` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md index 02042e2b27..b84c24f168 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9acde08812 -title: Torne Imagens Responsivas a dispositivos Móveis +title: Tornar imagens responsivas a dispositivos móveis challengeType: 0 forumTopicId: 18232 dashedName: make-images-mobile-responsive @@ -12,7 +12,7 @@ Primeiro, adicione uma nova imagem abaixo da existente. Defina o seu atributo `s Seria ótimo se essa imagem pudesse ser exatamente do tamanho da nossa tela do celular. -Felizmente, com Bootstrap, tudo que precisamos fazer é adicionar a classe `img-responsive` para nossa imagem. Faça isso, e a imagem deve encaixar perfeitamente na largura da sua página. +Felizmente, com o Bootstrap, tudo que precisamos fazer é adicionar a classe `img-responsive` para a nossa imagem. Faça isso, e a imagem deve encaixar perfeitamente na largura da página. # --hints-- @@ -22,25 +22,25 @@ Você deve ter o total de duas imagens. assert($('img').length === 2); ``` -Sua nova imagem deve estar abaixo da sua antiga e ter a classe `img-responsive`. +A nova imagem deve estar abaixo da antiga e ter a classe `img-responsive`. ```js assert($('img:eq(1)').hasClass('img-responsive')); ``` -Sua nova imagem não deve ter a classe `smaller-image`. +A nova imagem não deve ter a classe `smaller-image`. ```js assert(!$('img:eq(1)').hasClass('smaller-image')); ``` -Sua nova imagem deve ter um `src` de `https://bit.ly/fcc-running-cats`. +A nova imagem deve ter um `src` de `https://bit.ly/fcc-running-cats`. ```js assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats'); ``` -Seu novo elemento `img` deve ter uma tag de fechamento. +O novo elemento `img` deve ter uma tag de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md index cdd2e7c4a0..d1ce9b4c39 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aeda08845 -title: Caixas de seleção Responsivas +title: Compreender caixas de seleção responsivas challengeType: 0 forumTopicId: 18269 required: @@ -13,27 +13,27 @@ dashedName: responsively-style-checkboxes # --description-- -Já que as classes Bootstrap `col-xs-*` são aplicáveis a todos os elementos de `form`, você também pode usá-los nas suas caixas de seleções! Dessa forma, as caixas de seleções irão estar simetricamente distribuídas pela página, independente do quão largo for a resolução da tela. +Já que as classes `col-xs-*` do Bootstrap são aplicáveis a todos os elementos de `form`, você também pode usá-las nas caixas de seleções! Dessa forma, as caixas de seleções vão estar simetricamente distribuídas pela página, independente da largura da resolução da tela. # --instructions-- -Aninhe todos as suas três caixas de seleção em um elemento `
`. Então aninhe cada um deles no elemento `
`. +Aninhe as três caixas de seleção em um elemento `
`. Então aninhe cada uma deles no elemento `
`. # --hints-- -Todas as suas caixas de seleção devem estar aninhadas dentro de uma `div` com a classe `row`. +Todas as caixas de seleção devem estar aninhadas dentro de uma `div` com a classe `row`. ```js assert($('div.row:has(input[type="checkbox"])').length > 0); ``` -Cada uma das suas caixas de seleção devem estar aninhadas dentro de sua própria `div` com a classe `col-xs-4`. +Cada uma das caixas de seleção devem estar aninhadas dentro da própria `div` com a classe `col-xs-4`. ```js assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2); ``` -Todos os seus elementos `div` devem ter tags de fechamento. +Todos os elementos `div` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md index f0b14d1d22..f7c7470d29 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aedb08845 -title: Botões Radio Responsivos +title: Botões de opção de estilo responsivo challengeType: 0 forumTopicId: 18270 required: @@ -13,27 +13,27 @@ dashedName: responsively-style-radio-buttons # --description-- -Você pode usar as classes `col-xs-*` do Bootstrap nos elementos do `formulário` também! Dessa forma, nossos botões radio irão estar simetricamente distribuídos pela página, independente do quão largo a resolução da nossa tela for. +Você pode usar as classes `col-xs-*` do Bootstrap nos elementos do `form` também! Dessa forma, nossos botões de opção vão estar simetricamente distribuídos pela página, independente da largura da resolução da tela. -Aninhe ambos os seus botões radio dentro de um elemento `
`. Em seguida aninhe cada um deles dentro de um elemento `
`. +Aninhe os botões de opção dentro de um elemento `
`. Em seguida, aninhe cada um deles dentro de um elemento `
`. -**Nota:** Como um lembrete, botões radio são elementos `input` do tipo `radio`. +**Observação:** como um lembrete, os botões de opção são elementos `input` do tipo `radio`. # --hints-- -Todos os seus botões radio devem estar aninhados dentro de uma `div` com a classe `row`. +Todos os botões de opção devem estar aninhados dentro de uma `div` com a classe `row`. ```js assert($('div.row:has(input[type="radio"])').length > 0); ``` -Cada um dos seus botões radio devem estar aninhados em seus próprios `div` com a classe `col-xs-6`. +Cada um dos botões de opção devem estar aninhados nas próprias `div` com a classe `col-xs-6`. ```js assert($('div.col-xs-6:has(input[type="radio"])').length > 1); ``` -Todos os seus elementos `div` devem ter tags de fechamento. +Todos os elementos `div` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md index 39db57dee4..2e76b9052b 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908847 -title: Divida Sua Linha Bootstrap +title: Dividir sua linha do Bootstrap challengeType: 0 forumTopicId: 18306 dashedName: split-your-bootstrap-row @@ -8,19 +8,19 @@ dashedName: split-your-bootstrap-row # --description-- -Agora que nós temos uma linha Bootstrap, vamos dividi-la em duas colunas para hospedar nossos elementos. +Agora que nós temos uma linha do Bootstrap, vamos dividi-la em duas colunas para hospedar nossos elementos. -Crie dois elementos `div` dentro da sua linha (row), ambos com a classe `col-xs-6`. +Crie dois elementos `div` dentro da linha (row), ambos com a classe `col-xs-6`. # --hints-- -Dois elementos `div class="col-xs-6"` devem estar aninhados dentro do seu elemento `div class="row"`. +Dois elementos `div class="col-xs-6"` devem estar aninhados dentro do elemento `div class="row"`. ```js assert($('div.row > div.col-xs-6').length > 1); ``` -Todos os seus elementos `div` devem ter tags de fechamento. +Todos os elementos `div` devem ter tags de fechamento. ```js assert( diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md index a9e83c533b..b8a273499b 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aed908845 -title: Inputs de Texto como Controles de Formulário +title: Estilizar inputs de texto como controles de formulário challengeType: 0 forumTopicId: 18312 required: @@ -13,33 +13,33 @@ dashedName: style-text-inputs-as-form-controls # --description-- -Você pode adicionar o ícone Font Awesome `fa-paper-plane` adicionando `` dentro do seu elemento `button` de submissão. +Você pode adicionar o ícone do Font Awesome `fa-paper-plane` incluindo `` dentro do elemento `button` de envio. -De ao seu campo input de texto do formulário a classe `form-control`. De ao seu botão de submissão do formulários as classes `btn btn-primary`. Também de a esse botão o ícone do Font Awesome `fa-paper-plane`. +Dê ao campo de input de texto do formulário a classe `form-control`. Dê ao botão de envio do formulário as classes `btn btn-primary`. Também dê a esse botão o ícone do Font Awesome `fa-paper-plane`. -Todo texto dos elementos ``, `