From 726f556e9fe34b79cfd572b38740463e47f1ef7a Mon Sep 17 00:00:00 2001 From: Lucas Arvelo Date: Sat, 20 Oct 2018 08:59:57 -0400 Subject: [PATCH] Translation improvements for description and instructions + translation of the challenge seed (#19435) --- .../access-props-using-this.props.spanish.md | 73 +++++++++++++------ 1 file changed, 52 insertions(+), 21 deletions(-) diff --git a/curriculum/challenges/spanish/03-front-end-libraries/react/access-props-using-this.props.spanish.md b/curriculum/challenges/spanish/03-front-end-libraries/react/access-props-using-this.props.spanish.md index 646bd01534..f71c464d21 100644 --- a/curriculum/challenges/spanish/03-front-end-libraries/react/access-props-using-this.props.spanish.md +++ b/curriculum/challenges/spanish/03-front-end-libraries/react/access-props-using-this.props.spanish.md @@ -8,26 +8,26 @@ localeTitle: Acceder a los props usando this.props --- ## Description -
Los últimos desafíos cubrieron las formas básicas de pasar propiedades (props) a los componentes hijo. Pero, ¿qué sucede si el componente hijo al que se le está pasando una propiedad es un class component, en lugar de un componente funcional sin estado? El class component utiliza una convención ligeramente diferente para acceder a props. Cada vez que refiera a un class component dentro de sí mismo, use la palabra clave this. Para acceder a props dentro de un class component, se precede el código que se utiliza para acceder a ella con this . Por ejemplo, si un class component tiene una propiedad llamada data , escribir {this.props.data} en JSX.
+
Los últimos desafíos cubrieron las formas básicas de pasar propiedades (props) a los componentes secundarios. Pero, ¿qué sucede si el componente secundario al que le está pasando una propiedad (prop) es un componente de clase ES6, en lugar de un componente funcional sin estado? El componente de clase ES6 utiliza una convención ligeramente diferente para acceder a las propiedades (props). Cada vez que se refiera a un componente de clase dentro de sí mismo, use la palabra clave this. Para acceder a las propiedades (props) dentro de un componente de clase, precede el código que se utiliza para acceder a ella con this. Por ejemplo, si un componente de clase ES6 tiene una propiedad llamada data , escribe {this.props.data} en JSX.
## Instructions -
Renderice una instancia del componente ReturnTempPassword en el componente padre ResetPassword . Aquí, mandar a ReturnTempPassword un prop de tempPassword y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del hijo, ReturnTempPassword , acceda a la propiedad tempPassword dentro de las etiquetas strong para asegurarse de que el usuario vea la contraseña temporal.
+
Renderiza una instancia del componente ReturnTempPassword en el componente principal ResetPassword . Aquí, añade una propiedad (prop) tempPassword al componente ReturnTempPassword y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del componente hijo, ReturnTempPassword , acceda a la propiedad tempPassword dentro de las etiquetas strong para asegurarse de que el usuario vea la contraseña temporal.
## Tests
```yml tests: - - text: El componente ResetPassword debe devolver un único elemento div . - testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "The ResetPassword component should return a single div element.");' - - text: El cuarto hijo de ResetPassword debe ser el componente ReturnTempPassword . - testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "The fourth child of ResetPassword should be the ReturnTempPassword component.");' - - text: El componente ReturnTempPassword debe tener un prop llamado tempPassword . - testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The ReturnTempPassword component should have a prop called tempPassword.");' + - text: El componente ResetPassword debe devolver un único elemento div. + testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "El componente ResetPassword debe devolver un único elemento div.");' + - text: El cuarto hijo de ResetPassword debe ser el componente ReturnTempPassword. + testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "El cuarto hijo de ResetPassword debe ser el componente ReturnTempPassword.");' + - text: El componente ReturnTempPassword debe tener un prop llamado tempPassword. + testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "El componente ReturnTempPassword debe tener un prop llamado tempPassword.");' - text: El prop tempPassword de ReturnTempPassword debe ser igual a una cadena de al menos 8 caracteres. - testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find("ReturnTempPassword").props().tempPassword; return typeof temp === "string" && temp.length >= 8; })(), "The tempPassword prop of ReturnTempPassword should be equal to a string of at least 8 characters.");' - - text: El componente ReturnTempPassword debe mostrar la contraseña que crea como el prop tempPassword dentro de strong etiquetas strong . - testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.");' + testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find("ReturnTempPassword").props().tempPassword; return typeof temp === "string" && temp.length >= 8; })(), "El prop tempPassword de ReturnTempPassword debe ser igual a una cadena de al menos 8 caracteres.");' + - text: El componente ReturnTempPassword debe mostrar la contraseña que crea como el prop tempPassword dentro de strong etiquetas strong. + testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "El componente ReturnTempPassword debe mostrar la contraseña que crea como el prop tempPassword dentro de strong etiquetas strong.");' ``` @@ -47,9 +47,9 @@ class ReturnTempPassword extends React.Component { render() { return (
- { /* cambia el código debajo de esta línea */ } -

Tu contraseña temporal es:

- { /* cambia el código arriba de esta línea */ } + { /* change code below this line */ } +

Your temporary password is:

+ { /* change code above this line */ }
); } @@ -63,12 +63,12 @@ class ResetPassword extends React.Component { render() { return (
-

Cambiar Contraseña

-

Te hemos generado una contraseña temporal.

-

Por favor cambia pronto está contraseña desde las opciones de tu cuenta .

- { /* cambia el código debajo de esta línea */ } +

Reset Password

+

We've generated a new temporary password for you.

+

Please reset this password from your account settings ASAP.

+ { /* change code below this line */ } - { /* cambia el código arriba de esta línea */ } + { /* change code above this line */ }
); } @@ -94,6 +94,37 @@ console.info('después de la prueba');
```js -// solución requerida +class ReturnTempPassword extends React.Component { + constructor(props) { + super(props); + + } + render() { + return ( +
+

Your temporary password is: {this.props.tempPassword}

+
+ ); + } +}; + +class ResetPassword extends React.Component { + constructor(props) { + super(props); + + } + render() { + return ( +
+

Reset Password

+

We've generated a new temporary password for you.

+

Please reset this password from your account settings ASAP.

+ { /* change code below this line */ } + + { /* change code above this line */ } +
+ ); + } +}; ``` -
+
\ No newline at end of file