diff --git a/curriculum/challenges/spanish/03-front-end-libraries/react/add-comments-in-jsx.spanish.md b/curriculum/challenges/spanish/03-front-end-libraries/react/add-comments-in-jsx.spanish.md index bf9f5018c9..857cefa668 100644 --- a/curriculum/challenges/spanish/03-front-end-libraries/react/add-comments-in-jsx.spanish.md +++ b/curriculum/challenges/spanish/03-front-end-libraries/react/add-comments-in-jsx.spanish.md @@ -18,14 +18,14 @@ localeTitle: Añadir comentarios en JSX ```yml tests: - - text: La constante JSX debe devolver un elemento div . - testString: 'assert(JSX.type === "div", "The constant JSX should return a div element.");' + - text: La constante JSX debe devolver un elemento div. + testString: 'assert(JSX.type === "div", "La constante JSX debe devolver un elemento div");' - text: El div debe contener una etiqueta h1 como el primer elemento. - testString: 'assert(JSX.props.children[0].type === "h1", "The div should contain an h1 tag as the first element.");' + testString: 'assert(JSX.props.children[0].type === "h1", "El div debe contener una etiqueta h1 como el primer elemento.");' - text: El div debe contener una etiqueta p como el segundo elemento. - testString: 'assert(JSX.props.children[1].type === "p", "The div should contain a p tag as the second element.");' + testString: 'assert(JSX.props.children[1].type === "p", "El div debe contener una etiqueta p como el segundo elemento.");' - text: El JSX debe incluir un comentario. - testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "The JSX should include a comment.");' + testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "El JSX debe incluir un comentario.");' ``` @@ -64,6 +64,12 @@ console.info('after the test');
```js -// solution required +const JSX = ( +
+

This is a block of JSX

+ { /* this is a JSX comment */ } +

Here's a subtitle

+
); ``` +
diff --git a/curriculum/challenges/spanish/03-front-end-libraries/react/add-event-listeners.spanish.md b/curriculum/challenges/spanish/03-front-end-libraries/react/add-event-listeners.spanish.md index 9804673038..724806ada7 100644 --- a/curriculum/challenges/spanish/03-front-end-libraries/react/add-event-listeners.spanish.md +++ b/curriculum/challenges/spanish/03-front-end-libraries/react/add-event-listeners.spanish.md @@ -18,14 +18,14 @@ localeTitle: Añadir escuchas de eventos ```yml tests: - - text: MyComponent debe generar un elemento div que envuelva una etiqueta h1 . - testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").children().find("h1").length === 1; })(), "MyComponent should render a div element which wraps an h1 tag.");' - - text: Se debe adjuntar un detector de keydown al documento en componentDidMount . - testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp("document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(didMountString); })(), "A keydown listener should be attached to the document in componentDidMount.");' - - text: El oyente keydown debe eliminarse del documento en componentWillUnmount . - testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp("document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(willUnmountString); })(), "The keydown listener should be removed from the document in componentWillUnmount.");' - - text: 'Una vez que el componente se haya montado, al presionar enter se actualizará su estado y la etiqueta h1 renderizada.' - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state("message"); const beforeText = mockedComponent.find("h1").text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state("message"), text: mockedComponent.find("h1").text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, "Once the component has mounted, pressing enter should update its state and the rendered h1 tag."); }; ' + - text: MyComponent debe generar un elemento div que envuelva una etiqueta h1. + testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").children().find("h1").length === 1; })(), "MyComponent debe generar un elemento div que envuelva una etiqueta h1.");' + - text: Se debe adjuntar un detector de keydown al documento en componentDidMount. + testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp("document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(didMountString); })(), "Se debe adjuntar un detector de keydown al documento en componentDidMount.");' + - text: El oyente keydown debe eliminarse del documento en componentWillUnmount. + testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp("document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress").test(willUnmountString); })(), "El oyente keydown debe eliminarse del documento en componentWillUnmount.");' + - text: Una vez que el componente se haya montado, al presionar enter se actualizará su estado y la etiqueta h1 renderizada. + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state("message"); const beforeText = mockedComponent.find("h1").text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state("message"), text: mockedComponent.find("h1").text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, "Una vez que el componente se haya montado, al presionar enter se actualizará su estado y la etiqueta h1 renderizada."); }; ' ``` @@ -93,6 +93,41 @@ console.info('after the test');
```js -// solution required +class MyComponent extends React.Component { + constructor(props) { + super(props); + this.state = { + message: " + }; + this.handleKeyPress = this.handleKeyPress.bind(this); + this.handleEnter = this.handleEnter.bind(this); } + componentDidMount() { + // change code below this line + document.addEventListener('keydown', this.handleKeyPress); + // change code above this line + } + componentWillUnmount() { + // change code below this line + document.removeEventListener('keydown', this.handleKeyPress); + // change code above this line + } + handleEnter() { + this.setState({ + message: this.state.message + 'You pressed the enter key! ' + }); + } + handleKeyPress(event) { + if (event.keyCode === 13) { + this.handleEnter(); + } + } + render() { + return ( +
+

{this.state.message}

+
+ ); + } +}; ```
diff --git a/curriculum/challenges/spanish/03-front-end-libraries/react/add-inline-styles-in-react.spanish.md b/curriculum/challenges/spanish/03-front-end-libraries/react/add-inline-styles-in-react.spanish.md index 4ab1d91ce1..7f036c8688 100644 --- a/curriculum/challenges/spanish/03-front-end-libraries/react/add-inline-styles-in-react.spanish.md +++ b/curriculum/challenges/spanish/03-front-end-libraries/react/add-inline-styles-in-react.spanish.md @@ -4,11 +4,11 @@ title: Add Inline Styles in React challengeType: 6 isRequired: false videoUrl: '' -localeTitle: Añadir estilos en línea en reaccionar +localeTitle: Añadir estilos en línea en React --- ## Description -
Es posible que haya notado en el último desafío que existían otras diferencias de sintaxis con respecto a los estilos HTML en línea además del atributo de style establecido en un objeto de JavaScript. Primero, los nombres de ciertas propiedades de estilo CSS usan camel case. Por ejemplo, el último desafío establecer el tamaño de la fuente con fontSize en lugar de font-size . Las palabras con guión, como font-size son sintaxis no válida para las propiedades de los objetos de JavaScript, por lo que React usa un caso de camello Como regla general, todas las propiedades de estilo con guión se escriben utilizando el caso camel en JSX. Se supone que todas las unidades de longitud de valor de propiedad (como height , width y fontSize ) están en px menos que se especifique lo contrario. Si desea usar em , por ejemplo, envuelva el valor y las unidades entre comillas, como {fontSize: "4em"} . Aparte de los valores de longitud que predeterminan a px , todos los demás valores de propiedad deben incluirse entre comillas.
+
Es posible que haya notado en el último desafío que existían otras diferencias de sintaxis con respecto a los estilos HTML en línea además del atributo de style establecido en un objeto de JavaScript. Primero, los nombres de ciertas propiedades de estilo CSS usan camel case. Por ejemplo, el último desafío establece el tamaño de la fuente con fontSize en lugar de font-size. Las palabras con guión, como font-size son sintaxis no válida para las propiedades de los objetos de JavaScript, por lo que React usa camel case como regla general, todas las propiedades de estilo con guión se escriben utilizando el camel case en JSX. Se supone que todas las propiedades con unidades de longitud como valor (como height , width y fontSize ) están en px a menos que se especifique lo contrario. Si desea puede usar em, por ejemplo, envuelva el valor y las unidades entre comillas, como {fontSize: "4em"} . Aparte de las propiedades con valores en px, todos los demás valores de propiedad deben incluirse entre comillas.
## Instructions
Si tiene un gran conjunto de estilos, puede asignar un object estilo a una constante para mantener su código organizado. Descomente la constante de styles y declare un object con tres propiedades de estilo y sus valores. Dale al div un color de "purple" , un tamaño de fuente de 40 , y un borde de "2px solid purple" . A continuación, establezca el atributo de style igual a la constante de styles .
@@ -19,17 +19,17 @@ localeTitle: Añadir estilos en línea en reaccionar ```yml tests: - text: La variable de styles debe ser un object con tres propiedades. - testString: 'assert(Object.keys(styles).length === 3, "The styles variable should be an object with three properties.");' - - text: La variable de styles debe tener una propiedad de color establecida en un valor de purple . - testString: 'assert(styles.color === "purple", "The styles variable should have a color property set to a value of purple.");' - - text: La variable de styles debe tener una propiedad fontSize establecida en un valor de 40 . - testString: 'assert(styles.fontSize === 40, "The styles variable should have a fontSize property set to a value of 40.");' - - text: La variable de styles debe tener una propiedad de border establecida en un valor de 2px solid purple . - testString: 'assert(styles.border === "2px solid purple", "The styles variable should have a border property set to a value of 2px solid purple.");' - - text: El componente debe representar un elemento div . - testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a div element.");' - - text: El elemento div debe tener sus estilos definidos por el objeto de styles . - testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "The div element should have its styles defined by the styles object.");' + testString: 'assert(Object.keys(styles).length === 3, "La variable de styles debe ser un object con tres propiedades.");' + - text: La variable de styles debe tener una propiedad de color establecida en un valor de purple. + testString: 'assert(styles.color === "purple", "La variable de styles debe tener una propiedad de color establecida en un valor de purple.");' + - text: La variable de styles debe tener una propiedad fontSize establecida en un valor de 40. + testString: 'assert(styles.fontSize === 40, "La variable de styles debe tener una propiedad fontSize establecida en un valor de 40.");' + - text: La variable de styles debe tener una propiedad de border establecida en un valor de 2px solid purple. + testString: 'assert(styles.border === "2px solid purple", "La variable de styles debe tener una propiedad de border establecida en un valor de 2px solid purple.");' + - text: El componente debe representar un elemento div. + testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "El componente debe representar un elemento div.");' + - text: El elemento div debe tener sus estilos definidos por el objeto de styles. + testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), "El elemento div debe tener sus estilos definidos por el objeto de styles.");' ``` @@ -73,6 +73,21 @@ console.info('after the test');
```js -// solution required +const styles = { + color: "purple", + fontSize: 40, + border: "2px solid purple" +}; +// change code above this line +class Colorful extends React.Component { + render() { + // change code below this line + return ( +
Style Me!
+ // change code above this line + ); + } +}; + ```