Improved translation, translated stringTest and added solution (#24583)
* translated testString and added solution * translated testString and added solution * Improved translation, translated stringTest and added solution
This commit is contained in:
Lucas Arvelo
committed by
Jaka Kranjc
Jaka Kranjc
parent
04abf70efc
commit
225effb280
@ -18,14 +18,14 @@ localeTitle: Añadir comentarios en JSX
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: La constante <code>JSX</code> debe devolver un elemento <code>div</code> .
|
||||
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
|
||||
- text: La constante <code>JSX</code> debe devolver un elemento <code>div</code>.
|
||||
testString: 'assert(JSX.type === "div", "La constante <code>JSX</code> debe devolver un elemento <code>div</code>");'
|
||||
- text: El <code>div</code> debe contener una etiqueta <code>h1</code> como el primer elemento.
|
||||
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
|
||||
testString: 'assert(JSX.props.children[0].type === "h1", "El <code>div</code> debe contener una etiqueta <code>h1</code> como el primer elemento.");'
|
||||
- text: El <code>div</code> debe contener una etiqueta <code>p</code> como el segundo elemento.
|
||||
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
|
||||
testString: 'assert(JSX.props.children[1].type === "p", "El <code>div</code> debe contener una etiqueta <code>p</code> como el segundo elemento.");'
|
||||
- text: El <code>JSX</code> debe incluir un comentario.
|
||||
testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "The <code>JSX</code> should include a comment.");'
|
||||
testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "El <code>JSX</code> debe incluir un comentario.");'
|
||||
|
||||
```
|
||||
|
||||
@ -64,6 +64,12 @@ console.info('after the test');
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
const JSX = (
|
||||
<div>
|
||||
<h1>This is a block of JSX</h1>
|
||||
{ /* this is a JSX comment */ }
|
||||
<p>Here's a subtitle</p>
|
||||
</div>);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -18,14 +18,14 @@ localeTitle: Añadir escuchas de eventos
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>MyComponent</code> debe generar un elemento <code>div</code> que envuelva una etiqueta <code>h1</code> .
|
||||
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").children().find("h1").length === 1; })(), "<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.");'
|
||||
- text: Se debe adjuntar un detector de keydown al documento en <code>componentDidMount</code> .
|
||||
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 <code>componentDidMount</code>.");'
|
||||
- text: El oyente keydown debe eliminarse del documento en <code>componentWillUnmount</code> .
|
||||
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 <code>componentWillUnmount</code>.");'
|
||||
- text: 'Una vez que el componente se haya montado, al presionar <code>enter</code> se actualizará su estado y la etiqueta <code>h1</code> 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 <code>enter</code> should update its state and the rendered <code>h1</code> tag."); }; '
|
||||
- text: <code>MyComponent</code> debe generar un elemento <code>div</code> que envuelva una etiqueta <code>h1</code>.
|
||||
testString: 'assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find("div").children().find("h1").length === 1; })(), "<code>MyComponent</code> debe generar un elemento <code>div</code> que envuelva una etiqueta <code>h1</code>.");'
|
||||
- text: Se debe adjuntar un detector de keydown al documento en <code>componentDidMount</code>.
|
||||
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 <code>componentDidMount</code>.");'
|
||||
- text: El oyente keydown debe eliminarse del documento en <code>componentWillUnmount</code>.
|
||||
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 <code>componentWillUnmount</code>.");'
|
||||
- text: Una vez que el componente se haya montado, al presionar <code>enter</code> se actualizará su estado y la etiqueta <code>h1</code> 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 <code>enter</code> se actualizará su estado y la etiqueta <code>h1</code> renderizada."); }; '
|
||||
|
||||
```
|
||||
|
||||
@ -93,6 +93,41 @@ console.info('after the test');
|
||||
<section id='solution'>
|
||||
|
||||
```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 (
|
||||
<div>
|
||||
<h1>{this.state.message}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
```
|
||||
</section>
|
||||
|
||||
@ -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
|
||||
<section id="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 <code>style</code> 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 <code>fontSize</code> en lugar de <code>font-size</code> . Las palabras con guión, como <code>font-size</code> 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 <code>height</code> , <code>width</code> y <code>fontSize</code> ) están en <code>px</code> menos que se especifique lo contrario. Si desea usar <code>em</code> , por ejemplo, envuelva el valor y las unidades entre comillas, como <code>{fontSize: "4em"}</code> . Aparte de los valores de longitud que predeterminan a <code>px</code> , todos los demás valores de propiedad deben incluirse entre comillas. </section>
|
||||
<section id="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 <code>style</code> 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 <code>fontSize</code> en lugar de <code>font-size</code>. Las palabras con guión, como <code>font-size</code> 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 <code>height</code> , <code>width</code> y <code>fontSize</code> ) están en <code>px</code> a menos que se especifique lo contrario. Si desea puede usar <code>em</code>, por ejemplo, envuelva el valor y las unidades entre comillas, como <code>{fontSize: "4em"}</code> . Aparte de las propiedades con valores en <code>px</code>, todos los demás valores de propiedad deben incluirse entre comillas. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Si tiene un gran conjunto de estilos, puede asignar un <code>object</code> estilo a una constante para mantener su código organizado. Descomente la constante de <code>styles</code> y declare un <code>object</code> con tres propiedades de estilo y sus valores. Dale al <code>div</code> un color de <code>"purple"</code> , un tamaño de fuente de <code>40</code> , y un borde de <code>"2px solid purple"</code> . A continuación, establezca el atributo de <code>style</code> igual a la constante de <code>styles</code> . </section>
|
||||
@ -19,17 +19,17 @@ localeTitle: Añadir estilos en línea en reaccionar
|
||||
```yml
|
||||
tests:
|
||||
- text: La variable de <code>styles</code> debe ser un <code>object</code> con tres propiedades.
|
||||
testString: 'assert(Object.keys(styles).length === 3, "The <code>styles</code> variable should be an <code>object</code> with three properties.");'
|
||||
- text: La variable de <code>styles</code> debe tener una propiedad de <code>color</code> establecida en un valor de <code>purple</code> .
|
||||
testString: 'assert(styles.color === "purple", "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.");'
|
||||
- text: La variable de <code>styles</code> debe tener una propiedad <code>fontSize</code> establecida en un valor de <code>40</code> .
|
||||
testString: 'assert(styles.fontSize === 40, "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.");'
|
||||
- text: La variable de <code>styles</code> debe tener una propiedad de <code>border</code> establecida en un valor de <code>2px solid purple</code> .
|
||||
testString: 'assert(styles.border === "2px solid purple", "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.");'
|
||||
- text: El componente debe representar un elemento <code>div</code> .
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "The component should render a <code>div</code> element.");'
|
||||
- text: El elemento <code>div</code> debe tener sus estilos definidos por el objeto de <code>styles</code> .
|
||||
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 <code>div</code> element should have its styles defined by the <code>styles</code> object.");'
|
||||
testString: 'assert(Object.keys(styles).length === 3, "La variable de <code>styles</code> debe ser un <code>object</code> con tres propiedades.");'
|
||||
- text: La variable de <code>styles</code> debe tener una propiedad de <code>color</code> establecida en un valor de <code>purple</code>.
|
||||
testString: 'assert(styles.color === "purple", "La variable de <code>styles</code> debe tener una propiedad de <code>color</code> establecida en un valor de <code>purple</code>.");'
|
||||
- text: La variable de <code>styles</code> debe tener una propiedad <code>fontSize</code> establecida en un valor de <code>40</code>.
|
||||
testString: 'assert(styles.fontSize === 40, "La variable de <code>styles</code> debe tener una propiedad <code>fontSize</code> establecida en un valor de <code>40</code>.");'
|
||||
- text: La variable de <code>styles</code> debe tener una propiedad de <code>border</code> establecida en un valor de <code>2px solid purple</code>.
|
||||
testString: 'assert(styles.border === "2px solid purple", "La variable de <code>styles</code> debe tener una propiedad de <code>border</code> establecida en un valor de <code>2px solid purple</code>.");'
|
||||
- text: El componente debe representar un elemento <code>div</code>.
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === "div"; })(), "El componente debe representar un elemento <code>div</code>.");'
|
||||
- text: El elemento <code>div</code> debe tener sus estilos definidos por el objeto de <code>styles</code>.
|
||||
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 <code>div</code> debe tener sus estilos definidos por el objeto de <code>styles</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@ -73,6 +73,21 @@ console.info('after the test');
|
||||
<section id='solution'>
|
||||
|
||||
```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 (
|
||||
<div style={styles}>Style Me!</div>
|
||||
// change code above this line
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user